Refine CRA Playwright migration (#4381)

* Refine CRA Playwright migration

* Merge branch 'master' into work

Author: ScriptedAlchemy

cra/.gitignore

@@ -8,6 +8,11 @@
 # testing
 /coverage
 
+# Playwright artifacts
+playwright-report/
+test-results/
+blob-report/
+
 # production
 /build
 

cra/README.md

@@ -7,15 +7,18 @@ This example demos a basic host application loading remote component.
 
 # Running Demo
 
-Run `pnpm run start`. This will build and serve both `host` and `remote` on ports 3001 and 3002 respectively.
+Run `pnpm run start`. This will build and serve both `host` and `remote` on ports 3000 and 3002 respectively.
 
-- [localhost:3001](http://localhost:3000/) (HOST)
+- [localhost:3000](http://localhost:3000/) (HOST)
 - [localhost:3002](http://localhost:3002/) (STANDALONE REMOTE)
 
-# Running Cypress E2E Tests
+# Running Playwright E2E Tests
 
-To run tests in interactive mode, run `npm run cypress:debug` from the root directory of the project. It will open Cypress Test Runner and allow to run tests in interactive mode. [More info about "How to run tests"](../../cypress-e2e/README.md#how-to-run-tests)
+Run the following commands from this directory:
 
-To build app and run test in headless mode, run `yarn e2e:ci`. It will build app and run tests for this workspace in headless mode. If tets failed cypress will create `cypress` directory in sample root folder with screenshots and videos.
+- `pnpm test:e2e`: launches the host and remote servers and runs the Playwright suite headlessly.
+- `pnpm test:e2e:ui`: opens the Playwright test runner UI for local development.
+- `pnpm test:e2e:debug`: starts the suite in headed mode with Playwright's inspector attached.
+- `pnpm e2e:ci`: installs the required browsers (when needed) and executes the suite with a list reporter while collecting failure artifacts (traces, screenshots, videos).
 
-["Best Practices, Rules amd more interesting information here](../../cypress-e2e/README.md)
+> **Note:** The first Playwright run may require downloading browser binaries. If they are not already installed you can run `pnpm exec playwright install` once to prepare the environment.

cra/cypress.env.json

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+const apps = [
+  { name: 'Host', port: 3000 },
+  { name: 'Remote', port: 3002 },
+];
+
+for (const { name, port } of apps) {
+  test.describe(`CRA ${name}`, () => {
+    test(`should render the ${name} application`, async ({ page }) => {
+      await page.goto(`http://localhost:${port}`);
+
+      await expect(page.getByRole('heading', { level: 1 })).toHaveText('Basic Host-Remote');
+      await expect(page.getByRole('heading', { level: 2 })).toHaveText(name);
+      await expect(page.getByRole('button')).toContainText('Hello from remote');
+    });
+  });
+}
+

cra/e2e/checkCraApps.cy.ts

@@ -10,11 +10,13 @@
     "start": "pnpm --filter cra_* start",
     "build": "pnpm --filter cra_* build",
     "preview": "pnpm run build && pnpm --filter cra_* preview",
-    "e2e:ci": "pnpm start & sleep 3 && (wait-on tcp:3000 tcp:3002 --timeout 30000 || echo 'wait-on timed out, proceeding with Cypress') && npx cypress run --config-file ../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome && lsof -ti tcp:3000,3001,3002 | xargs kill"
+    "test:e2e": "pnpm exec playwright test",
+    "test:e2e:ui": "pnpm exec playwright test --ui",
+    "test:e2e:debug": "pnpm exec playwright test --debug",
+    "e2e:ci": "pnpm exec playwright install --with-deps && pnpm exec playwright test --reporter=list"
   },
   "devDependencies": {
-    "wait-on": "7.2.0",
-    "concurrently": "8.2.2",
-    "forever": "4.0.3"
+    "@playwright/test": "^1.54.2",
+    "playwright": "^1.54.2"
   }
 }

cra/e2e/checkCraApps.spec.ts

@@ -0,0 +1,48 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  timeout: 60000,
+  expect: {
+    timeout: 15000,
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [
+    ['html', { outputFolder: 'playwright-report', open: 'never' }],
+    ['list'],
+  ],
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+    viewport: { width: 1920, height: 1080 },
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  webServer: [
+    {
+      command: 'pnpm start',
+      cwd: 'remote',
+      port: 3002,
+      reuseExistingServer: !process.env.CI,
+      timeout: 120000,
+    },
+    {
+      command: 'pnpm start',
+      cwd: 'host',
+      port: 3000,
+      reuseExistingServer: !process.env.CI,
+      timeout: 120000,
+    },
+  ],
+});