Switch from puppeteer to playwright

.github/workflows/gh-pages.yml

@@ -14,20 +14,24 @@ jobs:
   deploy:
     runs-on: ubuntu-20.04
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           ref: ${{ github.event.inputs.branch }}
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v3
+      - name: Enable pnpm
+        run: "corepack enable"
+      - name: Use Node.js 22.x
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.x
-          cache: npm
+          node-version: 22.x
+          cache: pnpm
       - name: Install dependencies
-        run: "cd docs && npm ci"
+        working-directory: docs
+        run: "pnpm i --frozen-lockfile"
       - name: Build
-        run: "cd docs && npm run build"
+        working-directory: docs
+        run: "npm run build"
       - name: Deploy
-        uses: peaceiris/actions-gh-pages@v3
+        uses: peaceiris/actions-gh-pages@v4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: docs/_site

.github/workflows/playwright.yml

@@ -0,0 +1,47 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - run: corepack enable
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+        cache: pnpm
+    - name: Install dependencies
+      run: pnpm i -r
+    - name: build
+      run: npm run build
+    - name: Get installed Playwright version
+      id: playwright-version
+      run: echo "PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test --parseable | tail -1)" >> $GITHUB_ENV
+      working-directory: web-test
+    - name: Cache playwright binaries
+      uses: actions/cache@v3
+      id: playwright-cache
+      with:
+        path: |
+          ~/.cache/ms-playwright
+        key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
+    - run: npx playwright install --with-deps
+      if: steps.playwright-cache.outputs.cache-hit != 'true'
+      working-directory: web-test
+    - run: npx playwright install-deps
+      if: steps.playwright-cache.outputs.cache-hit == 'true'
+      working-directory: web-test
+    - name: Run Playwright tests
+      run: npm run test
+      working-directory: web-test
+    - uses: actions/upload-artifact@v4
+      if: failure()
+      with:
+        name: playwright-report
+        path: web/playwright-report/
+        retention-days: 30

.gitignore

@@ -1,10 +1,10 @@
+.nyc_output
+.vscode/
+*.map
 browser/
 build/
 coverage/
+docs/_site
 examples/*.js
 node_modules/
 yarn.lock
-.nyc_output
-*.map
-docs/_site
-.vscode/

CHANGELOG.md

@@ -15,6 +15,8 @@ Unreleased
 - [#507](https://github.com/peggyjs/peggy/pull/507) Remove stray semicolon in CSS
 - [#508](https://github.com/peggyjs/peggy/pull/508) Fix broken text input
 - [#520](https://github.com/peggyjs/peggy/pull/520) Grammar with token "constructor" fails to generate
+- [#522](https://github.com/peggyjs/peggy/pull/522) Switched from puppeteer
+  to playwright for web tests, and added them to CI.
 
 ### Documentation
 - [#506](https://github.com/peggyjs/peggy/pull/506) Added END OF INPUT (`!.`).

docs/development/test.html

@@ -2,19 +2,26 @@
 title: 'Test'
 permalink: "/development/test.html"
 layout: main-layout
-stylesheets: ["https://cdnjs.cloudflare.com/ajax/libs/mocha/8.3.2/mocha.css"]
+stylesheets: ["https://cdnjs.cloudflare.com/ajax/libs/mocha/10.4.0/mocha.css"]
 scripts:
   [
-    "https://cdnjs.cloudflare.com/ajax/libs/mocha/8.3.2/mocha.min.js",
-    "https://cdnjs.cloudflare.com/ajax/libs/chai/4.3.4/chai.min.js",
+    "https://cdnjs.cloudflare.com/ajax/libs/mocha/10.4.0/mocha.min.js",
+    "https://cdnjs.cloudflare.com/ajax/libs/chai/4.4.1/chai.min.js",
   ]
 ---
 
 <script>
   // Modern browsers don't need whatwgURL.
   // source-map looks for it with this name, as configured in rollup.config.mjs
   window.whatwgURL = { URL };
-  mocha.setup('bdd');
+  mocha.setup({
+    ui: "bdd",
+    global: [
+      "TextEncoder", // Not really a leak, we put it back after deleting
+      "peggyVersion", // Intentional
+    ],
+  });
+  mocha.checkLeaks();
 </script>
 <script src='../js/test-bundle.min.js'></script>
 <style>
@@ -30,7 +37,7 @@
   mocha.run(failures => {
     const result = failures === 0 ? 'PASS' : 'FAIL';
     // If you change the next line, please modifiy the regexp in web-test/index.js
-    const status = result + ': ' + failures + ' failures. Peggy Version: ' + browser.peggyVersion()
+    const status = result + ': ' + failures + ' failures. Peggy Version: ' + globalThis.peggyVersion;
     console.log(status);
     const div = document.getElementById('results');
     div.innerHTML = status;

docs/package.json

@@ -18,6 +18,6 @@
     "defaults, maintained node versions, not op_mini all"
   ],
   "engines": {
-    "node": ">=14"
+    "node": ">=18"
   }
 }