chore: migrate complete-react-case e2e to Playwright (#4372)

* chore: migrate complete-react-case e2e to Playwright

* chore: regenerate pnpm-lock.yaml

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: ScriptedAlchemy

complete-react-case/cypress.env.json

@@ -0,0 +1,44 @@
+import { test, expect } from '@playwright/test';
+import { Constants } from '../../cypress-e2e/fixtures/constants';
+
+test.describe('Complete React case', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('Check App build and running', async ({ page }) => {
+    const text = Constants.elementsText.completeReactCaseApp;
+    await expect(page.locator('h1')).toHaveText(text.header);
+    await expect(page.locator('strong').nth(0)).toHaveText(text.paragraphs.firstParagraph);
+    await expect(page.locator('strong').nth(1)).toHaveText(text.paragraphs.secondParagraph);
+    await expect(page.locator('h4').filter({ hasText: text.buttons.h4Buttons })).toBeVisible();
+    await expect(page.locator('h4').filter({ hasText: text.h4Dialog })).toBeVisible();
+    await expect(page.locator('h4').filter({ hasText: text.h4HoverElement })).toBeVisible();
+    await expect(page.locator('.tool-tip')).toHaveText(text.h4HoverElement);
+  });
+
+  test('Check App buttons', async ({ page }) => {
+    const { buttons } = Constants.elementsText.completeReactCaseApp;
+    await expect(page.getByRole('button', { name: buttons.primaryButton })).toBeVisible();
+    await expect(page.getByRole('button', { name: buttons.warningButton })).toBeVisible();
+    await expect(page.getByRole('button', { name: buttons.openDialogButton })).toBeVisible();
+    await expect(page.getByRole('button', { name: buttons.primaryButton })).toHaveCSS(
+      'background-color',
+      Constants.color.lightWashedAzure,
+    );
+    await expect(page.getByRole('button', { name: buttons.warningButton })).toHaveCSS(
+      'background-color',
+      Constants.color.lightWashedOrange,
+    );
+  });
+
+  test('Check App Dialog popup', async ({ page }) => {
+    const { buttons, nameMessage } = Constants.elementsText.completeReactCaseApp;
+    await page.getByRole('button', { name: buttons.openDialogButton }).click();
+    await expect(page.getByRole('button', { name: buttons.closeButton })).toBeVisible();
+    await expect(page.getByText(nameMessage)).toBeVisible();
+    await page.fill('input', Constants.commonPhrases.completeReactCaseApp.input);
+    await page.getByRole('button', { name: buttons.closeButton }).click();
+  });
+});
+

complete-react-case/e2e/checkApplication.cy.ts

@@ -8,8 +8,11 @@
     "build": "pnpm --filter complete-react-case_* --parallel build",
     "legacy:build": "pnpm --filter complete-react-case_* --parallel legacy:build",
     "legacy:start": "pnpm --filter complete-react-case_* --parallel legacy:start",
-    "e2e:ci": "pnpm start & wait-on http-get://localhost:3002/ && npx cypress run --config-file ../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome",
-    "legacy:e2e:ci": "pnpm legacy:start & wait-on http-get://localhost:3002/ && 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",
+    "legacy:e2e:ci": "pnpm legacy:build && npx playwright install --with-deps && npx playwright test --reporter=list"
   },
   "keywords": [],
   "author": "",
@@ -19,6 +22,7 @@
   },
   "homepage": "https://github.com/anderlaw/react-webpack-MF#readme",
   "devDependencies": {
-    "wait-on": "7.2.0"
+    "@playwright/test": "^1.54.2",
+    "playwright": "^1.54.2"
   }
 }

complete-react-case/e2e/checkApplication.spec.ts

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