test(e2e): add WebKit/Safari to the Playwright matrix + decide the support stance (#69)

.github/workflows/ci.yml

@@ -79,8 +79,8 @@ jobs:
           node-version: '22'
       - run: npm install --no-audit --no-fund
       - name: Install Playwright browsers
-        run: npx playwright install --with-deps chromium firefox
-      - name: E2E (Playwright — Chromium + Firefox)
+        run: npx playwright install --with-deps chromium firefox webkit
+      - name: E2E (Playwright — Chromium + Firefox + WebKit)
         run: npm run test:e2e
       - uses: actions/upload-artifact@v7
         if: ${{ failure() }}

CHANGELOG.md

@@ -9,6 +9,13 @@ auto-generated per-PR notes; this file is the curated, human-readable history.
 
 ## [Unreleased]
 
+### Added
+- Playwright e2e now runs on **WebKit** in addition to Chromium and Firefox, so
+  Safari regressions on the `html{zoom}`-based layout fail CI instead of
+  shipping silently. README gained a **Supported browsers** stance: desktop
+  Chromium/Firefox/Safari are supported (Safari verified green on CI); the full
+  browser/ClickHouse/IdP matrix is tracked in #71. (#69)
+
 ## [0.1.5] - 2026-06-29
 
 ### Added

README.md

@@ -445,6 +445,24 @@ docs/         ARCHITECTURE.md, DEPLOYMENT.md, ASSET-DISTRIBUTION.md,
               CLICKHOUSE-OAUTH.md, CLICKHOUSE-OSS-OAUTH.md
 ```
 
+## Supported browsers
+
+Current **desktop** engines — Chromium (Chrome/Edge), Firefox, and **Safari
+(WebKit)** — are all supported. The whole layout and the pointer/caret/drag math
+ride on `html { zoom: var(--zoom) }`, and WebKit is the engine most likely to
+diverge on `zoom` × `getBoundingClientRect`/viewport units, so it is exercised
+on **every CI run**: the Playwright e2e suite runs the editor-alignment,
+editor-insertion, schema-graph and EXPLAIN-pipeline specs on all three engines
+(`webkit` included as of #69), and Safari/WebKit passes them. A regression that
+breaks Safari now fails CI rather than shipping silently.
+
+> There is no responsive CSS today (fixed px, `overflow:hidden` on
+> `html`/`body`), so the app targets **desktop** browsers; the formal
+> narrow-viewport stance is part of the matrix in #71.
+
+The full system-requirements matrix — minimum browser versions, supported
+ClickHouse server versions, and IdP/OAuth requirements — is tracked in #71.
+
 ## Testing
 
 ```bash
@@ -463,10 +481,12 @@ suite needs no mocking libraries.
 happy-dom has no real layout or scrollbars, so render-layer bugs (e.g. the
 editor highlight drifting behind the selection when a scrollbar shrinks the
 textarea's client box) can't be caught by the unit suite. A small Playwright
-harness mounts the real `src/` modules in Chromium for those cases.
+harness mounts the real `src/` modules in **Chromium, Firefox and WebKit** for
+those cases — WebKit is the Safari proxy and the engine most likely to diverge
+on the `html{zoom}`-based layout (see [Supported browsers](#supported-browsers)).
 
 ```bash
-npx playwright install chromium   # once per machine
+npx playwright install chromium firefox webkit   # once per machine
 npm run test:e2e
 ```
 

playwright.config.js

@@ -5,8 +5,8 @@ import { defineConfig } from '@playwright/test';
 // behind the selection when a scrollbar shrinks the textarea's client box —
 // can only be caught in a real engine. These run separately from `npm test`.
 //
-// Setup once per machine: `npx playwright install chromium firefox`.
-// Run all engines: `npm run test:e2e`. One engine: `npm run test:e2e -- --project=firefox`.
+// Setup once per machine: `npx playwright install chromium firefox webkit`.
+// Run all engines: `npm run test:e2e`. One engine: `npm run test:e2e -- --project=webkit`.
 export default defineConfig({
   testDir: './tests/e2e',
   testMatch: '**/*.spec.js',
@@ -22,9 +22,13 @@ export default defineConfig({
     baseURL: 'http://127.0.0.1:5599',
   },
   // Render-layer + DOM-API bugs are engine-specific (e.g. Firefox's
-  // execCommand('insertText') on <textarea>), so the suite runs on both engines.
+  // execCommand('insertText') on <textarea>, WebKit's handling of
+  // `html{zoom}` × getBoundingClientRect), so the suite runs on all three
+  // engines — WebKit is the Safari proxy and the one most likely to diverge on
+  // the zoom-based layout (see README "Supported browsers").
   projects: [
     { name: 'chromium', use: { browserName: 'chromium' } },
     { name: 'firefox', use: { browserName: 'firefox' } },
+    { name: 'webkit', use: { browserName: 'webkit' } },
   ],
 });