ci: add pipeline to run tests on browsers (#6021)

UlisesGascon · web-flow · commit 61ff26e08981 · 2025-10-27T06:20:37.000-04:00
diff --git a/.github/workflows/browser-testing.yml b/.github/workflows/browser-testing.yml
@@ -0,0 +1,39 @@
+name: CI Browsers
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    # Run on every PR, regardless of branch
+    branches: [ '*' ]
+  workflow_dispatch:
+
+jobs:
+  test-docs:
+    name: Modern Browsers Test
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+
+      - name: Install dependencies
+        run: |
+          npm install
+          npx playwright install --with-deps
+          npm install -D @playwright/test@latest
+
+      - name: Build project
+        run: npm run build
+
+      - name: Start server
+        run: |
+          npx http-server -p 9001 &
+          sleep 2
+
+      - name: Run Playwright tests
+        run: npx playwright test
diff --git a/playwright.config.js b/playwright.config.js
@@ -0,0 +1,28 @@
+const { devices } = require('@playwright/test');
+
+module.exports = {
+    retries: 0,
+    testDir: './test',
+    testMatch: '**/*.spec.js',
+    use: {
+        baseURL: 'http://localhost:9001',
+        headless: true,
+    },
+    projects: [
+        { name: 'Chromium', use: { browserName: 'chromium' } },
+        { name: 'Firefox', use: { browserName: 'firefox' } },
+        { name: 'WebKit', use: { browserName: 'webkit' } },
+        {
+            name: 'Microsoft Edge',
+            use: { browserName: 'chromium', channel: 'msedge' },
+        },
+        {
+            name: 'Mobile Safari',
+            use: { ...devices['iPhone 12'], browserName: 'webkit' },
+        },
+        {
+            name: 'Mobile Chrome',
+            use: { ...devices['Pixel 5'], browserName: 'chromium' },
+        },
+    ],
+};
diff --git a/test/playwright-runner.spec.js b/test/playwright-runner.spec.js
@@ -0,0 +1,23 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe.configure({ mode: 'parallel' });
+
+test('index', async ({ page }) => {
+  await page.goto('http://localhost:9001/test/index.html');
+  await expect(page.locator('text=0 failed')).toBeVisible({ timeout: 60000 });
+});
+
+test('fp', async ({ page }) => {
+  await page.goto('http://localhost:9001/test/fp.html');
+  await expect(page.locator('text=0 failed')).toBeVisible({ timeout: 60000 });
+});
+
+test('backbone', async ({ page }) => {
+  await page.goto('http://localhost:9001/test/backbone.html');
+  await expect(page.locator('text=0 failed')).toBeVisible({ timeout: 60000 });
+});
+
+test('underscore', async ({ page }) => {
+  await page.goto('http://localhost:9001/test/underscore.html');
+  await expect(page.locator('text=0 failed')).toBeVisible({ timeout: 60000 });
+});
