ci(github): add workflow e2e.yml and run multiple browser tests

Author: remarkablemark

.github/workflows/e2e.yml

@@ -0,0 +1,31 @@
+name: e2e
+on: [push, pull_request]
+
+permissions:
+  contents: read
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        browser: [chromium, firefox, webkit]
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Use Node.js
+        uses: actions/setup-node@v6
+        with:
+          cache: npm
+          node-version-file: .nvmrc
+
+      - name: Install dependencies
+        run: npm ci --prefer-offline
+
+      - name: Install Playwright browsers
+        run: npx playwright install ${{ matrix.browser }}
+
+      - name: Run browser tests on Chrome
+        run: vitest run --config vitest.browser.config.mts --browser=${{ matrix.browser }}

.github/workflows/test.yml

@@ -30,9 +30,3 @@ jobs:
 
       - name: Run module tests
         run: npm run test:esm
-
-      - name: Install Playwright browsers
-        run: npx playwright install chromium
-
-      - name: Run browser tests
-        run: npm run test:browser

package.json

@@ -46,7 +46,7 @@
     "prepublishOnly": "run-s build lint lint:tsc lint:package",
     "size-limit": "size-limit",
     "test": "vitest",
-    "test:browser": "vitest run --config vitest.browser.config.mts",
+    "test:browser": "vitest run --config vitest.browser.config.mts --browser=chromium",
     "test:coverage": "vitest run --color --coverage",
     "test:esm": "npm run build:esm && node --test test/esm"
   },

test/cases/html.ts

@@ -1,3 +1,5 @@
+import { isNode } from '../helpers';
+
 export default [
   // html tags
   {
@@ -225,7 +227,7 @@ export default [
     data: '<noscript><p>JS is disabled</p></noscript>',
     get skip() {
       // jsdom template renders noscript children as text instead of nodes
-      return typeof process !== 'undefined';
+      return isNode();
     },
   },
 

test/client/index.test.ts

@@ -2,6 +2,7 @@
 import htmlToDOM from '../../src/client/html-to-dom';
 import htmlCases from '../cases/html';
 import {
+  isBrowser,
   parseDOM,
   runTests,
   testCaseSensitiveTags,
@@ -15,16 +16,18 @@ describe('client parser', () => {
   runTests(htmlToDOM, parseDOM, htmlCases);
   testCaseSensitiveTags(htmlToDOM);
 
-  describe('performance', () => {
-    it('executes 1000 times in less than 50ms', () => {
-      let times = 1000;
-      const start = performance.now();
-      while (--times) {
-        htmlToDOM('<div>test</div>');
-      }
-      const end = performance.now();
-      const elapsed = end - start;
-      expect(elapsed).below(50);
+  if (isBrowser()) {
+    describe('performance', () => {
+      it('executes 1000 times in less than 50ms', () => {
+        let times = 1000;
+        const start = performance.now();
+        while (--times) {
+          htmlToDOM('<div>test</div>');
+        }
+        const end = performance.now();
+        const elapsed = end - start;
+        expect(elapsed).below(50);
+      });
     });
-  });
+  }
 });

test/helpers/environment.ts

@@ -0,0 +1,3 @@
+export const isBrowser = () => typeof window === 'object' && !isNode();
+
+export const isNode = () => typeof process === 'object';

test/helpers/index.ts

@@ -1,3 +1,4 @@
+export { isBrowser, isNode } from './environment';
 export { parseDOM } from './parse-dom';
 export { runTests } from './run-tests';
 export { testCaseSensitiveTags } from './test-case-sensitive-tags';

vitest.browser.config.mts

@@ -12,7 +12,11 @@ export default mergeConfig(
         enabled: true,
         provider: playwright(),
         headless: true,
-        instances: [{ browser: 'chromium' }],
+        instances: [
+          { browser: 'chromium' },
+          { browser: 'firefox' },
+          { browser: 'webkit' },
+        ],
       },
       include: ['test/client/**'],
     },