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 --with-deps ${{ matrix.browser }}
+
+      - name: Run browser tests on Chrome
+        run: npx 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"
   },

src/client/domparser.ts

@@ -11,21 +11,21 @@ const HEAD_TAG_REGEX = /<head[^]*>/i;
 const BODY_TAG_REGEX = /<body[^]*>/i;
 
 // falls back to `parseFromString` if `createHTMLDocument` cannot be used
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* istanbul ignore start */
 let parseFromDocument = (html: string, tagName?: string): Document => {
-  /* istanbul ignore next */
   throw new Error(
     'This browser does not support `document.implementation.createHTMLDocument`',
   );
 };
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 let parseFromString = (html: string, tagName?: string): Document => {
-  /* istanbul ignore next */
   throw new Error(
     'This browser does not support `DOMParser.prototype.parseFromString`',
   );
 };
+/* istanbul ignore stop */
+/* eslint-enable @typescript-eslint/no-unused-vars */
 
 const DOMParser = typeof window === 'object' && window.DOMParser;
 
@@ -46,10 +46,11 @@ if (typeof DOMParser === 'function') {
    * @returns - Document.
    */
   parseFromString = (html: string, tagName?: string): Document => {
-    /* istanbul ignore if */
+    /* istanbul ignore start */
     if (tagName) {
       html = `<${tagName}>${html}</${tagName}>`;
     }
+    /* istanbul ignore stop */
 
     return domParser.parseFromString(html, mimeType);
   };
@@ -74,7 +75,7 @@ if (typeof document === 'object' && document.implementation) {
    * @returns - Document
    */
   parseFromDocument = function (html: string, tagName?: string): Document {
-    /* istanbul ignore if */
+    /* istanbul ignore start */
     if (tagName) {
       const element = htmlDocument.documentElement.querySelector(tagName);
 
@@ -84,6 +85,7 @@ if (typeof document === 'object' && document.implementation) {
 
       return htmlDocument;
     }
+    /* istanbul ignore stop */
 
     htmlDocument.documentElement.innerHTML = html;
     return htmlDocument;
@@ -114,8 +116,8 @@ if (template && template.content) {
   };
 }
 
-/* istanbul ignore next */
-const createNodeList = () => document.createDocumentFragment().childNodes;
+const createNodeList = /* istanbul ignore next */ () =>
+  document.createDocumentFragment().childNodes;
 
 /**
  * Parses HTML string to DOM nodes.
@@ -171,11 +173,11 @@ export default function domparser(html: string): NodeList {
         return parseFromTemplate(html);
       }
 
-      /* istanbul ignore next */
+      /* istanbul ignore start */
       const element = parseFromDocument(html, BODY).querySelector(BODY);
 
-      /* istanbul ignore next */
       return element?.childNodes ?? createNodeList();
+      /* istanbul ignore stop */
     }
   }
 }

src/client/utilities.ts

@@ -121,12 +121,10 @@ export function formatDOM(
       }
 
       case 3:
-        /* istanbul ignore next */
         current = new Text(revertEscapedCharacters(node.nodeValue ?? ''));
         break;
 
       case 8:
-        /* istanbul ignore next */
         current = new Comment(node.nodeValue ?? '');
         break;
 

test/cases/html.ts

@@ -1,3 +1,5 @@
+import { isNode } from '../helpers';
+
 export default [
   // html tags
   {
@@ -224,8 +226,8 @@ export default [
     name: 'noscript with p',
     data: '<noscript><p>JS is disabled</p></noscript>',
     get skip() {
-      // jsdom template renders noscript children as text instead of nodes
-      return typeof process !== 'undefined';
+      // template renders noscript children as text instead of nodes
+      return isNode() || /firefox/i.test(navigator.userAgent);
     },
   },
 

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/**'],
     },