chore: Run automated tests on example pages

.github/workflows/cd.yml

@@ -77,7 +77,7 @@ jobs:
         if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
       - run: npx playwright install-deps
         if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
-      - run: npm test -- --all
+      - run: npm run test:unit:all
 
       - run: npm run manifest
       - run: npm run build

.github/workflows/ci.yml

@@ -4,6 +4,7 @@ on: [push, pull_request]
 
 jobs:
   test:
+    name: Run Unit Tests
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -38,17 +39,59 @@ jobs:
       - run: npx playwright install-deps
         if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
 
-      - run: npm test -- --all
+      - run: npm run test:unit:all
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v4
         with:
           verbose: true
       - run: npm run manifest
       - run: npm run build
 
+  test-examples:
+    name: Run Tests on Example Pages
+    needs: test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: npm
+      - run: npm ci
+
+      - name: Store Playwright's Version
+        run: |
+          PLAYWRIGHT_VERSION=$(npm view @web/test-runner-playwright dependencies.playwright)
+          echo "Playwright's Version: $PLAYWRIGHT_VERSION"
+          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
+
+      - name: Cache Playwright Browsers for Playwright's Version
+        id: cache-playwright-browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}
+
+      - name: Remove man-db to speed up apt installs
+        run: sudo apt-get remove -y man-db
+      - run: npx playwright install --with-deps
+        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
+      - run: npx playwright install-deps
+        if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
+
+      - run: npm run manifest
+      - run: npm run build
+      - name: Install React example dependencies (vite-react)
+        run: yarn install --frozen-lockfile
+        working-directory: ./examples/vite-react-with-typescript
+      - name: Install React example dependencies (nextjs)
+        run: npm ci
+        working-directory: ./examples/nextjs-with-typescript
+      - run: npm run test:examples
+
   canary:
     if: ${{ github.ref == 'refs/heads/main' }}
-    needs: test
+    needs: [test, test-examples]
     runs-on: ubuntu-latest
 
     permissions:

examples/vanilla/media-elements/jwplayer.html

@@ -42,14 +42,14 @@ <h1>Media Chrome JW Player Media Example</h1>
         <jwplayer-video
           slot="media"
           crossorigin
-          src="https://cdn.jwplayer.com/players/BZ6tc0gy-uoIbMPm3.html"
+          src="https://cdn.jwplayer.com/players/nBmHUgrk-AvhfKqG4.html"
           playsinline
         >
           <track
             label="thumbnails"
             default
             kind="metadata"
-            src="https://assets-jpcust.jwpsrv.com/strips/BZ6tc0gy-120.vtt"
+            src="https://assets-jpcust.jwpsrv.com/strips/nBmHUgrk-120.vtt"
           />
         </jwplayer-video>
         <div slot="centered-chrome" noautohide>

examples/vanilla/media-elements/mux-video.html

@@ -4,6 +4,7 @@
     <meta name="viewport" content="width=device-width" />
     <title>Media Chrome &lt;mux-video&gt; Example</title>
     <script type="module" src="../../../dist/index.js"></script>
+    <script type="module" src="../../../dist/menu/index.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@mux/mux-video/+esm"></script>
     <style>
       /** add styles to prevent CLS (Cumulative Layout Shift) */

examples/vite-react-with-typescript/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "media-chrome": "link:../../",
-    "react": "link:../../node_modules/react",
+    "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {

examples/vite-react-with-typescript/vite.config.ts

@@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react-swc'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    dedupe: ['react', 'react-dom'],
+  },
 })

examples/vite-react-with-typescript/yarn.lock

@@ -551,6 +551,11 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
+ce-la-react@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/ce-la-react/-/ce-la-react-0.3.2.tgz#66c1454e024c3b9f65ebac05724d0f50756ff057"
+  integrity sha512-QJ6k4lOD/btI08xG8jBPxRCGXvCnusGGkTsiXk0u3NqUu/W+BXRnFD4PYjwtqh8AWmGa5LDbGk0fLQsqr0nSMA==
+
 chalk@^4.0.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
@@ -1151,16 +1156,19 @@ queue-microtask@^1.2.2:
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
 react-dom@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
-  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
   dependencies:
     loose-envify "^1.1.0"
-    scheduler "^0.23.0"
+    scheduler "^0.23.2"
 
-"react@link:../../node_modules/react":
-  version "0.0.0"
-  uid ""
+react@^18.2.0:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
+  dependencies:
+    loose-envify "^1.1.0"
 
 resolve-from@^4.0.0:
   version "4.0.0"
@@ -1208,10 +1216,10 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
-scheduler@^0.23.0:
-  version "0.23.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
-  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+scheduler@^0.23.2:
+  version "0.23.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
   dependencies:
     loose-envify "^1.1.0"
 

package.json

@@ -97,8 +97,12 @@
     "watch:build": "run-p \"build:esm -- --watch=forever\" \"build:cjs -- --watch=forever\" \"build:iife:* -- --watch=forever\"",
     "dev": "run-p watch serve",
     "start": "npm run dev",
-    "test": "web-test-runner --coverage --config test/web-test-runner.config.js",
-    "serve": "wet serve --cors --livereload --redirect :examples/vanilla/ --log-level error"
+    "test": "npm run test:unit",
+    "test:unit": "web-test-runner --coverage --config test/web-test-runner.config.js",
+    "test:unit:all": "npm run test:unit -- --all",
+    "test:examples": "playwright test --config test/example-tests.config.ts",
+    "serve": "wet serve --cors --livereload --redirect :examples/vanilla/ --log-level error",
+    "serve:test": "wet serve --cors --redirect :examples/vanilla/ --log-level silent"
   },
   "repository": {
     "type": "git",
@@ -111,6 +115,7 @@
     "@custom-elements-manifest/analyzer": "^0.10.2",
     "@open-wc/testing": "^3.1.6",
     "@types/mocha": "^10.0.6",
+    "@types/node": "^25.6.0",
     "@types/react": "19.2.2",
     "@vercel/edge": "^1.2.1",
     "@web/dev-server-esbuild": "^1.0.2",

test/example-tests.config.ts

@@ -0,0 +1,42 @@
+import { defineConfig, devices } from 'playwright/test';
+import { VANILLA_PORT, VITE_PORT, NEXT_PORT } from './ports.js';
+
+export default defineConfig({
+  testDir: './examples',
+  retries: 2,
+  testIgnore: process.env.FEATURE_TESTS ? [] : ['**/features/**'],
+
+  webServer: [
+    {
+      command: `npm run serve:test -- -p ${VANILLA_PORT}`,
+      url: `http://localhost:${VANILLA_PORT}`,
+      reuseExistingServer: !process.env.CI,
+    },
+    {
+      command: `cd ../examples/vite-react-with-typescript && npx vite --port ${VITE_PORT}`,
+      url: `http://localhost:${VITE_PORT}`,
+      reuseExistingServer: !process.env.CI,
+      timeout: 60_000,
+    },
+    {
+      command: `cd ../examples/nextjs-with-typescript && npx next dev -p ${NEXT_PORT}`,
+      url: `http://localhost:${NEXT_PORT}`,
+      reuseExistingServer: !process.env.CI,
+      timeout: 120_000,
+    },
+  ],
+
+  use: {
+    baseURL: `http://localhost:${VANILLA_PORT}`,
+    screenshot: "only-on-failure",
+    video: "off",
+    trace: "retain-on-failure",
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});

test/examples/react/smoke.spec.ts

@@ -0,0 +1,88 @@
+/**
+ * Smoke tests — scope: React example pages
+ *
+ * Checks that every page:
+ *   1. Loads without uncaught JS errors
+ *   2. Renders non-empty content
+ *   3. (react-wrappers only) media-* custom elements are registered
+ */
+import { test, expect } from 'playwright/test';
+import { VITE_PORT, NEXT_PORT } from '../../ports.js';
+
+test.describe.configure({ mode: 'parallel' });
+
+// MUI + Emotion always produces a hydration mismatch in Next.js dev mode due to
+// server-rendered <style> tags differing from the client. Known limitation of the example.
+const KNOWN_ERRORS: Map<string, { patterns: string[] }> = new Map(
+  [['nextjs/material-ui-player-chrome',
+    {
+      patterns: ["Hydration failed because the server rendered HTML didn't match the client."]
+    }]]
+);
+
+type Route = { url: string; label: string; checkMediaElements?: true };
+
+const ROUTES: Route[] = [
+  {
+    url: `http://localhost:${VITE_PORT}/`,
+    label: 'vite-react',
+  },
+  {
+    url: `http://localhost:${NEXT_PORT}/`,
+    label: 'nextjs/index',
+  },
+  {
+    url: `http://localhost:${NEXT_PORT}/react-wrappers`,
+    label: 'nextjs/react-wrappers',
+    checkMediaElements: true,
+  },
+  {
+    url: `http://localhost:${NEXT_PORT}/media-store-hooks`,
+    label: 'nextjs/media-store-hooks',
+  },
+  {
+    url: `http://localhost:${NEXT_PORT}/material-ui-player-chrome`,
+    label: 'nextjs/material-ui-player-chrome',
+  },
+];
+
+for (const route of ROUTES) {
+  test(`${route.label} - renders without errors`, async ({ page }) => {
+    const pageErrors: string[] = [];
+    page.on('pageerror', (error) => pageErrors.push(error.message));
+
+    await page.goto(route.url, { waitUntil: 'load' });
+
+    const hasContent = await page.evaluate(
+      () => document.body.innerHTML.trim().length > 0
+    );
+    expect(hasContent, 'Page body should have content').toBe(true);
+
+    if (route.checkMediaElements) {
+      const undefinedElements = await page.evaluate(() => {
+        const tagNames = new Set(
+          [...document.querySelectorAll('*')]
+            .map((el) => el.tagName.toLowerCase())
+            .filter((tag) => tag.startsWith('media-'))
+        );
+        return [...tagNames].filter((tag) => !customElements.get(tag));
+      });
+      expect(
+        undefinedElements,
+        `Unregistered custom elements: ${undefinedElements.join(', ')}`
+      ).toHaveLength(0);
+    }
+
+    if (KNOWN_ERRORS.has(route.label)) {
+      const known = KNOWN_ERRORS.get(route.label)!.patterns;
+      pageErrors.forEach(error => {
+        expect(
+          known.some(k => error.includes(k)),
+          `Unexpected error (not in KNOWN_ERRORS): ${error}`
+        ).toBe(true);
+      });
+    } else {
+      expect(pageErrors, `Page errors: ${pageErrors.join('; ')}`).toHaveLength(0);
+    }
+  });
+}

test/examples/smoke.spec.ts

@@ -0,0 +1,6 @@
+import { test, expect } from 'playwright/test';
+
+test('examples index page loads', async ({ page }) => {
+  await page.goto('/examples/vanilla/');
+  await expect(page).toHaveTitle('Media Chrome Examples');
+});