Merge branch 'playwright'

This topic brings in some UI testing, to build confidence not only in
the migration of the website, but also to be able to prevent (or at
least swiftly detect) regressions.

Signed-off-by: Johannes Schindelin <[email protected]>

Author: dscho

.github/actions/deploy-to-github-pages/action.yml

@@ -144,3 +144,17 @@ runs:
               await github.rest.issues.update({ ...req, state: 'closed' })
             }
           }
+
+    - name: Install @playwright/test
+      shell: bash
+      run: npm install @playwright/test
+    - name: Run Playwright tests
+      shell: bash
+      env:
+        PLAYWRIGHT_TEST_URL: ${{ steps.pages.outputs.base_url }}
+      run: npx playwright test --project=chrome
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/

.github/workflows/ci.yml

@@ -76,3 +76,10 @@ jobs:
           public/
         output: lychee.md
         jobSummary: true
+
+    - name: Install @playwright/test
+      run: npm install @playwright/test
+    - name: Run Playwright tests
+      env:
+        PLAYWRIGHT_TEST_URL: http://localhost:5000/
+      run: npx playwright test --project=chrome

.github/workflows/playwright.yml

@@ -0,0 +1,28 @@
+name: Playwright Tests
+on:
+  workflow_dispatch:
+    inputs:
+      url:
+        description: 'URL to test'
+        required: true
+        default: 'https://git-scm.com'
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install @playwright/test
+      run: npm install @playwright/test
+    - name: Run Playwright tests
+      env:
+        PLAYWRIGHT_TEST_URL: ${{ github.event.inputs.url }}
+      run: npx playwright test --project=chrome
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/

.gitignore

@@ -10,3 +10,7 @@
 /.hugo_build.lock
 /public/
 /resources/_gen/
+/package-lock.json
+/node_modules/
+/test-results/
+/playwright-report/

README.md

@@ -164,6 +164,10 @@ The [list of GUI clients](https://git-scm.com/downloads/guis) has been construct
 
 * https://lychee.cli.rs/
 
+### Playwright (website UI test framework)
+
+* https://playwright.dev/
+
 ## License
 
 The source code for the site is licensed under the MIT license, which you can find in

package.json

@@ -0,0 +1,10 @@
+{
+  "name": "git-scm.com",
+  "version": "0.0.0",
+  "description": "This is the Git home page.",
+  "license": "MIT",
+  "devDependencies": {
+    "@playwright/test": "^1.47.0",
+    "@types/node": "^22.5.4"
+  }
+}

playwright.config.js

@@ -0,0 +1,88 @@
+// @ts-check
+const { defineConfig, devices } = require('@playwright/test');
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+module.exports = defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  /* Uses 'github' for GitHub Actions CI to generate annotations, otherwise 'html' */
+  reporter: process.env.CI && process.env.PLAYWRIGHT_TEST_URL === 'http://localhost:5000/' ? 'github' : 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    {
+      name: 'chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run a local web server before starting the tests as needed */
+  webServer:
+    process.env.PLAYWRIGHT_TEST_URL !== 'http://localhost:5000/'
+    ? undefined
+    : {
+      command: 'node script/serve-public.js',
+      url: process.env.PLAYWRIGHT_TEST_URL,
+      reuseExistingServer: true,
+    },
+});
+

script/serve-public.js

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+
+const http = require('http');
+const url = require('url');
+const fs = require('fs');
+const path = require('path');
+
+const basePath = path.join(__dirname, '..', 'public');
+
+const mimeTypes = {
+     "html": "text/html",
+     "jpeg": "image/jpeg",
+     "jpg": "image/jpeg",
+     "png": "image/png",
+     "ico": "image/x-icon",
+     "js": "text/javascript",
+     "css": "text/css",
+     "json": "application/json",
+     'pf_filter': 'application/gzip',
+     'pf_fragment': 'application/gzip',
+     'pf_index': 'application/gzip',
+     'pf_meta': 'application/gzip',
+     'pagefind': 'application/gzip',
+};
+
+const handler = (request, response) => {
+    const pathname = decodeURIComponent(url.parse(request.url).pathname);
+    let filename = path.join(basePath, pathname === "/" ? "index.html" : pathname);
+
+    let stats = fs.statSync(filename, { throwIfNoEntry: false });
+    if (!stats?.isFile() && !filename.match(/\.[A-Za-z0-9]{1,11}$/)) {
+	    filename += ".html";
+	    stats = fs.statSync(filename, { throwIfNoEntry: false });
+    }
+    try{
+        if (!stats?.isFile()) throw new Error(`Not a file: ${filename}`);
+        const fileStream = fs.createReadStream(filename);
+        let mimeType = mimeTypes[path.extname(filename).split(".")[1]];
+        if (!mimeType) throw new Error(`Could not get mime type for '${filename}'`)
+        response.writeHead(200, {'Content-Type':mimeType});
+        fileStream.pipe(response);
+    } catch(e) {
+        console.log(`Could not read ${filename}`);
+        response.writeHead(404, {'Content-Type': 'text/plain'});
+        response.write('404 Not Found\n');
+        response.end();
+        return;
+    }
+};
+
+const server = http.createServer(handler);
+
+server.on("listening", () => {
+    console.log(`Now listening on: http://localhost:${server.address().port}/`);
+});
+server.listen(5000);