feat: migrate basic-host-remote e2e to Playwright (#4368)

* feat: switch basic host remote e2e to playwright

* Convert Cypress example to Playwright

---------

Co-authored-by: Claude <[email protected]>

Author: ScriptedAlchemy

basic-host-remote/cypress.env.json

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test';
+
+const apps = [
+  { port: 3001, name: 'App 1' },
+  { port: 3002, name: 'App 2' },
+];
+
+apps.forEach(({ port, name }) => {
+  test.describe(`Check ${name}`, () => {
+    test(`Check ${name} built and running`, async ({ page }) => {
+      await page.goto(`http://localhost:${port}`);
+      await expect(page.getByRole('heading', { level: 1 })).toContainText('Basic Host-Remote');
+      await expect(page.getByRole('heading', { level: 2, name })).toBeVisible();
+    });
+
+    test(`Check buttons in ${name} exist`, async ({ page }) => {
+      await page.goto(`http://localhost:${port}`);
+      await expect(page.getByRole('button')).toHaveText('App 2 Button!!!!');
+    });
+  });
+});
+

basic-host-remote/e2e/checkApplications.cy.ts

@@ -12,10 +12,15 @@
     "build": "pnpm --filter basic-host-remote_* run build",
     "serve": "pnpm --filter basic-host-remote_* run serve",
     "clean": "pnpm --filter basic-host-remote_* run reset",
-    "e2e:ci": "pnpm build && pnpm serve & sleep 60 && npx cypress run --config-file ../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome"
+    "test:e2e": "npx playwright test",
+    "test:e2e:ui": "npx playwright test --ui",
+    "test:e2e:debug": "npx playwright test --debug",
+    "e2e:ci": "pnpm build && npx playwright install --with-deps && npx playwright test --reporter=list"
   },
   "devDependencies": {
     "concurrently": "8.2.2",
-    "wait-on": "7.2.0"
+    "wait-on": "7.2.0",
+    "@playwright/test": "^1.54.2",
+    "playwright": "^1.54.2"
   }
 }

basic-host-remote/e2e/checkApplications.spec.ts

@@ -0,0 +1,47 @@
+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:3001',
+    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: 'cd app1 && pnpm serve',
+      port: 3001,
+      reuseExistingServer: !process.env.CI,
+      timeout: 120000,
+    },
+    {
+      command: 'cd app2 && pnpm serve',
+      port: 3002,
+      reuseExistingServer: !process.env.CI,
+      timeout: 120000,
+    },
+  ],
+});
+