fix(e2e): apply II headless Linux patches to all Playwright test contexts

Create tests/fixtures.ts that extends the Playwright test with the same
addInitScript + Node.js HTTP proxy + II bundle patches used in
derive-principal.mjs — forcing DUMMY_AUTH and using a unique random seed
per test context to avoid credential conflicts between tests.

Simplify ii-helpers.ts to go CWP → "Create new identity" directly
(dropping the fragile "Use existing identity" → error-detection fallback).

All spec files that use handleIIPopup now import test/expect from
tests/fixtures.ts instead of @playwright/test.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Web3NL

tests/canister-dashboard-frontend/alternative-origins.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '../fixtures.js';
 import { login } from './login';
 import {
   TEST_ORIGINS,

tests/canister-dashboard-frontend/controllers.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '../fixtures.js';
 import { login } from './login';
 import {
   TEST_CONTROLLER,

tests/canister-dashboard-frontend/logs.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '../fixtures.js';
 import { login } from './login';
 import { setupConsoleErrorMonitoring } from './shared';
 

tests/canister-dashboard-frontend/theme.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '../fixtures.js';
 import { login } from './login';
 import { setupConsoleErrorMonitoring } from './shared';
 

tests/canister-dashboard-frontend/topup-rule.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '../fixtures.js';
 import { login } from './login';
 import { setupConsoleErrorMonitoring } from './shared';
 

tests/canister-dashboard-frontend/topup.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '../fixtures.js';
 import { login, checkPrincipal } from './login';
 import { formatIcpBalance } from '../../packages-rs/my-canister-dashboard/frontend/src/helpers';
 import {

tests/fixtures.ts

@@ -0,0 +1,104 @@
+/**
+ * Playwright test fixtures with II headless Linux CI patches.
+ *
+ * Applies the same fixes as derive-principal.mjs to every test context:
+ *   1. addInitScript: isUserVerifyingPlatformAuthenticatorAvailable → true
+ *   2. addInitScript: credentials.get → NotAllowedError (stops UI from blocking)
+ *   3. context.route: Node.js HTTP proxy for *.localhost (DNS + gzip + bundle patch)
+ *   4. II bundle patch: force DUMMY_AUTH path (Vr.dummy_auth check → true)
+ *   5. II bundle patch: unique seed per context (avoids credential conflicts between tests)
+ */
+import { test as base } from '@playwright/test';
+import type { BrowserContext } from '@playwright/test';
+import http from 'http';
+import zlib from 'zlib';
+
+const HOP_BY_HOP = new Set([
+  'content-encoding', 'transfer-encoding', 'connection', 'keep-alive',
+]);
+
+async function applyIIPatches(context: BrowserContext, seed: number): Promise<void> {
+  await context.addInitScript(() => {
+    try {
+      if (typeof PublicKeyCredential !== 'undefined') {
+        Object.defineProperty(
+          PublicKeyCredential,
+          'isUserVerifyingPlatformAuthenticatorAvailable',
+          { value: () => Promise.resolve(true), writable: true, configurable: true }
+        );
+      }
+    } catch (_) {}
+    try {
+      navigator.credentials.get = function () {
+        return Promise.reject(new DOMException('No credentials available', 'NotAllowedError'));
+      };
+    } catch (_) {}
+  });
+
+  await context.route(
+    (url) => url.hostname !== 'localhost' && url.hostname.endsWith('.localhost'),
+    (route) => {
+      const url = new URL(route.request().url());
+      const req = http.request(
+        {
+          hostname: '127.0.0.1',
+          port: parseInt(url.port) || 80,
+          path: url.pathname + url.search,
+          method: route.request().method(),
+          headers: { ...route.request().headers(), host: url.host },
+        },
+        (res) => {
+          const chunks: Buffer[] = [];
+          res.on('data', (c: Buffer) => chunks.push(c));
+          res.on('end', () => {
+            const rawBody = Buffer.concat(chunks);
+            const encoding = (res.headers['content-encoding'] ?? '').toLowerCase();
+
+            const headers: Record<string, string> = {};
+            for (const [k, v] of Object.entries(res.headers)) {
+              if (!HOP_BY_HOP.has(k) && v !== undefined) {
+                headers[k] = Array.isArray(v) ? v.join('\n') : String(v);
+              }
+            }
+
+            let body: Buffer;
+            try {
+              if (encoding === 'gzip' || encoding === 'x-gzip') body = zlib.gunzipSync(rawBody);
+              else if (encoding === 'br') body = zlib.brotliDecompressSync(rawBody);
+              else if (encoding === 'deflate') body = zlib.inflateSync(rawBody);
+              else body = rawBody;
+            } catch (_) {
+              body = rawBody;
+            }
+
+            const p = url.pathname;
+            if (p.includes('/_app/immutable/entry/start') && p.endsWith('.js')) {
+              let src = body.toString('utf8');
+              src = src.replaceAll('Vr.dummy_auth[0]?.[0]!==void 0?', 'true?');
+              src = src.replace('return BigInt(0)}', `return BigInt(${seed})}`);
+              body = Buffer.from(src, 'utf8');
+            }
+
+            route
+              .fulfill({ status: res.statusCode ?? 200, headers, body })
+              .catch(() => {});
+          });
+        }
+      );
+      req.on('error', () => route.abort());
+      const postBody = route.request().postDataBuffer();
+      if (postBody) req.write(postBody);
+      req.end();
+    }
+  );
+}
+
+export const test = base.extend<object>({
+  context: async ({ context }, use) => {
+    const seed = Math.floor(Math.random() * 2 ** 32);
+    await applyIIPatches(context, seed);
+    await use(context);
+  },
+});
+
+export { expect } from '@playwright/test';

tests/icp-dapp-launcher/install-dapp.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '../fixtures.js';
 import {
   icpDappLauncherUrl,
   loadTestEnv,

tests/icp-dapp-launcher/install-demo.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '../fixtures.js';
 import {
   icpDappLauncherUrl,
   loadTestEnv,

tests/ii-helpers.ts

@@ -3,12 +3,19 @@ import type { Page } from '@playwright/test';
 /**
  * Handle the II v2 popup authentication flow.
  *
- * Supports three scenarios:
- * - Existing canister: "Continue with passkey" → "Use existing identity" → "Continue"
- * - Fresh canister (no identity yet): above path errors → "Create new identity" fallback
- * - Returning session (same browser context): "Continue" directly
+ * icp-cli's bundled II uses DUMMY_AUTH — no real WebAuthn is needed. The fixture
+ * in fixtures.ts patches the II JS bundle to force the DUMMY_AUTH path and sets
+ * a unique random seed per test context to avoid credential conflicts between tests.
+ *
+ * Scenarios:
+ *  - First popup (no stored identity): CWP → "Create new identity" → name form → done
+ *  - Returning popup (same context): "Continue" appears directly (II session persists)
  */
 export async function handleIIPopup(popup: Page): Promise<void> {
+  await popup
+    .waitForURL((url) => !url.href.startsWith('about:'), { timeout: 25000 })
+    .catch(() => {});
+
   await popup.waitForLoadState('domcontentloaded');
 
   const continueWithPasskey = popup.getByRole('button', {
@@ -20,51 +27,27 @@ export async function handleIIPopup(popup: Page): Promise<void> {
     exact: true,
   });
 
-  // Wait for either button to appear
   await Promise.race([
-    continueWithPasskey.waitFor({ state: 'visible', timeout: 15000 }),
-    continueBtn.waitFor({ state: 'visible', timeout: 15000 }),
+    continueWithPasskey.waitFor({ state: 'visible', timeout: 30000 }),
+    continueBtn.waitFor({ state: 'visible', timeout: 30000 }),
   ]);
 
   if (await continueWithPasskey.isVisible()) {
     await continueWithPasskey.click();
 
-    // Try "Use existing identity" (works when canister already has a dummy identity)
-    const useExistingBtn = popup.getByRole('button', {
-      name: 'Use existing identity',
+    const createNewBtn = popup.getByRole('button', {
+      name: 'Create new identity',
       exact: true,
     });
-    await useExistingBtn.waitFor({ state: 'visible', timeout: 10000 });
-    await useExistingBtn.click();
-
-    // Check if existing identity was found (Continue appears) or not (error appears)
-    const errorText = popup.getByText(
-      'Cannot read properties of undefined'
-    );
-    const hasError = await errorText
-      .waitFor({ state: 'visible', timeout: 3000 })
-      .then(() => true)
-      .catch(() => false);
-
-    if (hasError) {
-      // Fresh canister — no identity exists yet, create one
-      const createNewBtn = popup.getByRole('button', {
-        name: 'Create new identity',
-        exact: true,
-      });
-      await createNewBtn.waitFor({ state: 'visible', timeout: 10000 });
-      await createNewBtn.click();
+    await createNewBtn.waitFor({ state: 'visible', timeout: 20000 });
+    await createNewBtn.click();
 
-      const nameInput = popup.locator('input[placeholder="Identity name"]');
-      await nameInput.waitFor({ state: 'visible', timeout: 10000 });
-      await nameInput.fill('Test');
-      await popup
-        .getByRole('button', { name: 'Create identity', exact: true })
-        .click();
-    }
+    const nameInput = popup.locator('input[placeholder="Identity name"]');
+    await nameInput.waitFor({ state: 'visible', timeout: 15000 });
+    await nameInput.fill('Test');
+    await popup.getByRole('button', { name: 'Create identity', exact: true }).click();
 
-    // Wait for the authorization "Continue" button
-    await continueBtn.waitFor({ state: 'visible', timeout: 15000 });
+    await continueBtn.waitFor({ state: 'visible', timeout: 30000 });
   }
 
   await continueBtn.click();