test(react-router): adding playwright test structure, creating animation tests in playwright

Author: ShaneK

.github/workflows/actions/test-react-router-e2e/action.yml

@@ -29,7 +29,11 @@ runs:
       shell: bash
       working-directory: ./packages/react-router/test
     - name: 🕸️ Install Dependencies
-      run: npm install
+      run: npm install --legacy-peer-deps
+      shell: bash
+      working-directory: ./packages/react-router/test/build/${{ inputs.app }}
+    - name: 📦 Install Playwright Browsers
+      run: npx playwright install chromium
       shell: bash
       working-directory: ./packages/react-router/test/build/${{ inputs.app }}
     - name: 🔄 Sync Built Changes
@@ -40,7 +44,13 @@ runs:
       run: npm run build
       shell: bash
       working-directory: ./packages/react-router/test/build/${{ inputs.app }}
-    - name: 🧪 Run Tests
+    - name: 🧪 Run Cypress Tests
       run: npm run e2e
       shell: bash
       working-directory: ./packages/react-router/test/build/${{ inputs.app }}
+    - name: 🎭 Run Playwright Tests
+      run: npx playwright test --retries=2
+      env:
+        CI: true
+      shell: bash
+      working-directory: ./packages/react-router/test/build/${{ inputs.app }}

packages/react-router/scripts/test_runner.sh

@@ -34,6 +34,9 @@ echo "Installing dependencies..."
 npm install --legacy-peer-deps > npm_install.log 2>&1
 npm run sync
 
+# Install Playwright browsers if not already present
+npx playwright install chromium 2>/dev/null || true
+
 echo "Cleaning up port 3000..."
 lsof -ti:3000 | xargs kill -9 || true
 
@@ -45,24 +48,29 @@ SERVER_PID=$!
 # Ensure server is killed on script exit
 trap "kill $SERVER_PID" EXIT
 
-echo "Waiting for server to start (30s)..."
-sleep 30
+echo "Waiting for server to start..."
+# Poll until the server responds (up to 60s)
+for i in $(seq 1 60); do
+  if curl -s -o /dev/null -w "%{http_code}" http://localhost:3000 2>/dev/null | grep -q "200"; then
+    echo "Server is healthy."
+    break
+  fi
+  if [ "$i" -eq 60 ]; then
+    echo "Server did not start within 60s. Exiting."
+    cat server.log
+    exit 1
+  fi
+  sleep 1
+done
 
-echo "Checking server status..."
-SERVER_RESPONSE=$(curl -s -v http://localhost:3000 2>&1)
-if echo "$SERVER_RESPONSE" | grep -q "Child compilation failed"; then
-  echo "Server started but has compilation errors. Exiting."
-  echo "$SERVER_RESPONSE"
-  exit 1
-fi
+echo "Running Cypress tests..."
+npm run cypress || CYPRESS_FAILED=1
 
-if ! echo "$SERVER_RESPONSE" | grep -q "200 OK"; then
-  echo "Server did not return 200 OK. Exiting."
-  echo "$SERVER_RESPONSE"
+echo "Running Playwright tests..."
+npx playwright test --retries=2 || PLAYWRIGHT_FAILED=1
+
+if [ "${CYPRESS_FAILED:-0}" = "1" ] || [ "${PLAYWRIGHT_FAILED:-0}" = "1" ]; then
+  echo "One or more test suites failed."
   exit 1
 fi
-echo "Server is healthy."
-
-echo "Running Cypress tests..."
-npm run cypress
 

packages/react-router/test/apps/reactrouter6/package.json

@@ -21,18 +21,19 @@
     "react-dom": "^18.2.0",
     "react-router": "^6.0.0",
     "react-router-dom": "^6.0.0",
-    "react-scripts": "^5.0.1",
-    "sass-loader": "8.0.2",
-    "typescript": "^4.4.2",
-    "wait-on": "^5.3.0"
+    "typescript": "^4.4.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "dev": "vite",
+    "start": "vite",
+    "build": "vite build",
     "test": "cypress open",
     "cypress": "node_modules/.bin/cypress run --headless --browser chrome",
     "cypress.open": "cypress open",
     "e2e": "concurrently \"serve -s build -l 3000\" \"wait-on http-get://localhost:3000 && npm run cypress\" --kill-others --success first",
+    "playwright": "npx playwright test",
+    "playwright.open": "npx playwright test --ui",
+    "playwright.headed": "npx playwright test --headed",
     "sync": "sh ./scripts/sync.sh"
   },
   "eslintConfig": {
@@ -54,12 +55,14 @@
     ]
   },
   "devDependencies": {
+    "@playwright/test": "^1.40.0",
+    "@vitejs/plugin-react": "^4.0.0",
     "concurrently": "^6.3.0",
     "cypress": "^13.2.0",
     "cypress-terminal-report": "^5.3.0",
     "serve": "^14.0.1",
-    "wait-on": "^6.0.0",
-    "webpack-cli": "^4.9.1"
+    "vite": "^5.0.0",
+    "wait-on": "^6.0.0"
   },
   "description": "An Ionic project",
   "engines": {

packages/react-router/test/apps/reactrouter6/vite.config.ts

@@ -0,0 +1,9 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+  },
+});

…react-router/test/base/public/index.html …ckages/react-router/test/base/index.htmlpackages/react-router/test/base/public/index.html renamed to packages/react-router/test/base/index.html packages/react-router/test/base/public/index.html renamed to packages/react-router/test/base/index.html

@@ -14,9 +14,9 @@
     <meta name="format-detection" content="telephone=no" />
     <meta name="msapplication-tap-highlight" content="no" />
 
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
 
-    <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/icon/favicon.png" />
+    <link rel="shortcut icon" type="image/png" href="/assets/icon/favicon.png" />
 
     <!-- add to homescreen for ios -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
@@ -26,5 +26,6 @@
 
   <body>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

packages/react-router/test/base/playwright.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e/playwright',
+  fullyParallel: false,
+  forbidOnly: !!process.env['CI'],
+  retries: process.env['CI'] ? 2 : 0,
+  workers: 1,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+    actionTimeout: 5000,
+  },
+  projects: [
+    {
+      name: 'Mobile Chrome',
+      use: {
+        browserName: 'chromium',
+        ...devices['Pixel 5'],
+      },
+    },
+  ],
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:3000',
+    // Always reuse an existing server. In the test_runner.sh pipeline, the
+    // server is started before Cypress and stays running for Playwright.
+    // Locally, developers can start the server manually with `npm run dev`.
+    reuseExistingServer: true,
+  },
+});

packages/react-router/test/base/tests/e2e/playwright/overlays.spec.ts

@@ -0,0 +1,42 @@
+import { test, expect } from '@playwright/test';
+import { withTestingMode } from './utils/test-utils';
+
+test.describe('Overlays', () => {
+  test('should remove the overlay when going back to the previous route', async ({ page }) => {
+    // Requires navigation history to perform a pop
+    await page.goto(withTestingMode('/'));
+    await page.goto(withTestingMode('/overlays'));
+
+    await page.locator('#openModal').click();
+
+    await expect(page.locator('ion-modal')).toBeAttached();
+
+    await page.locator('#goBack').click();
+
+    await expect(page.locator('ion-modal')).not.toBeAttached();
+  });
+
+  test('should remove the overlay when pushing to a new route', async ({ page }) => {
+    await page.goto(withTestingMode('/overlays'));
+
+    await page.locator('#openModal').click();
+
+    await expect(page.locator('ion-modal')).toBeAttached();
+
+    await page.locator('#push').click();
+
+    await expect(page.locator('ion-modal')).not.toBeAttached();
+  });
+
+  test('should remove the overlay when replacing the route', async ({ page }) => {
+    await page.goto(withTestingMode('/overlays'));
+
+    await page.locator('#openModal').click();
+
+    await expect(page.locator('ion-modal')).toBeAttached();
+
+    await page.locator('#replace').click();
+
+    await expect(page.locator('ion-modal')).not.toBeAttached();
+  });
+});