ci(e2e): run the tagged specs under WebKit as the Safari/iOS proxy (#221)

Two new Playwright projects — 'webkit' (Desktop Safari) for tests tagged
@webkit and 'iphone' (iPhone 14 descriptor) for @ios — covering boot,
login + send/receive, the thread panel and the gallery lightbox. The CI
e2e job installs webkit next to chromium.

WebKit reports handled fetch failures (well-known probes, a wasm fetch cut
short by our own navigation) as page errors with its own wording, so the
benign allowlist now applies to page errors as well.

Locally: 8/8 green twice in a row against the local Synapse.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA

e2e/boot.spec.ts

@@ -5,7 +5,7 @@ import { collectConsole } from './helpers';
 // `vite preview` (see playwright.config.ts webServer). No homeserver needed.
 
 test.describe('boot', () => {
-  test('client boots to the login screen without errors', async ({ page }) => {
+  test('client boots to the login screen without errors @webkit @ios', async ({ page }) => {
     const consoleLog = collectConsole(page);
 
     await page.goto('/');
@@ -24,7 +24,7 @@ test.describe('boot', () => {
     expect(consoleLog.unexpected(), 'unexpected console/page errors during boot').toEqual([]);
   });
 
-  test('service worker script is served and registers', async ({ page }) => {
+  test('service worker script is served and registers @webkit @ios', async ({ page }) => {
     const swResponse = await page.request.get('/sw.js');
     expect(swResponse.status(), 'GET /sw.js').toBe(200);
     expect(swResponse.headers()['content-type'] ?? '').toMatch(/javascript/);

e2e/helpers.ts

@@ -18,6 +18,11 @@ const BENIGN_CONSOLE_PATTERNS: RegExp[] = [
   // autodiscovery probes https://localhost/, which is either not listening
   // (CI) or a self-signed dev server (local calls stack).
   /ERR_CONNECTION_REFUSED|ERR_CERT_AUTHORITY_INVALID|ERR_SSL_PROTOCOL_ERROR/i,
+  // WebKit's spellings of the same discovery failures (#221).
+  /Unacceptable TLS certificate|Could not connect to the server|TypeError: Load failed/i,
+  // Also a fetch cut short by our own navigation (e.g. the crypto wasm while
+  // the test moves from /home to a room) — WebKit words that the same way.
+  /due to access control checks/i,
   // React devtools hint in production bundles.
   /Download the React DevTools/i,
 ];
@@ -45,8 +50,12 @@ export function collectConsole(page: Page): ConsoleCollector {
   return {
     errors,
     pageErrors,
+    // WebKit surfaces handled fetch failures (well-known probes) as page
+    // errors rather than console lines, so the allowlist applies to both.
     unexpected: () => [
-      ...pageErrors.map((m) => `pageerror: ${m}`),
+      ...pageErrors
+        .filter((m) => !BENIGN_CONSOLE_PATTERNS.some((re) => re.test(m)))
+        .map((m) => `pageerror: ${m}`),
       ...errors.filter((m) => !BENIGN_CONSOLE_PATTERNS.some((re) => re.test(m))),
     ],
   };

e2e/local-homeserver.spec.ts

@@ -28,7 +28,7 @@ test.describe('local homeserver regression', () => {
     bob = await ensureUser(uniq('e2e_bob_'));
   });
 
-  test('logs in, opens a room, sends and receives', async ({ page }) => {
+  test('logs in, opens a room, sends and receives @webkit @ios', async ({ page }) => {
     const console_ = collectConsole(page);
     const room = await createRoom(alice, 'Regression Room', { invite: [bob.userId] });
     await joinRoom(bob, room);
@@ -140,7 +140,7 @@ test.describe('local homeserver regression', () => {
     await expect(page.getByText('the original message')).toBeVisible();
   });
 
-  test('thread panel: opens from the chip and yields the member drawer at 1400px (#218)', async ({
+  test('thread panel: opens from the chip and yields the member drawer at 1400px (#218) @webkit', async ({
     browser,
   }) => {
     const ctx = await browser.newContext({ viewport: { width: 1400, height: 850 } });
@@ -169,7 +169,7 @@ test.describe('local homeserver regression', () => {
     await ctx.close();
   });
 
-  test('timeline image opens the gallery lightbox (#219)', async ({ page }) => {
+  test('timeline image opens the gallery lightbox (#219) @webkit', async ({ page }) => {
     const room = await createRoom(alice, 'Lightbox Room');
     const png = Buffer.from(
       'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',