Create new page (and new CDP connection) for every test

Author: yury-s

tests/extension/extensionTest.ts

@@ -15,7 +15,7 @@
  */
 
 import { baseTest } from '../config/baseTest';
-import { chromium } from 'playwright';
+import { chromium, type BrowserContext } from 'playwright';
 import { expect, type PageTestFixtures, type PageWorkerFixtures } from '../page/pageTestApi';
 import type { TraceViewerFixtures } from '../config/traceViewerFixtures';
 import { traceViewerFixtures } from '../config/traceViewerFixtures';
@@ -24,7 +24,13 @@ import http from 'node:http';
 import path from 'node:path';
 import { AddressInfo } from 'node:net';
 
-export const extensionTest = baseTest.extend<TraceViewerFixtures>(traceViewerFixtures).extend<PageTestFixtures, PageWorkerFixtures>({
+export type ExtensionTestFixtures = {
+  persistentContext: BrowserContext;
+  relayServer: http.Server;
+};
+
+
+export const extensionTest = baseTest.extend<TraceViewerFixtures>(traceViewerFixtures).extend<PageTestFixtures, PageWorkerFixtures & ExtensionTestFixtures>({
   browserVersion: [({ browser }, use) => use(browser.version()), { scope: 'worker' }],
   browserMajorVersion: [({ browserVersion }, use) => use(Number(browserVersion.split('.')[0])), { scope: 'worker' }],
   isAndroid: [false, { scope: 'worker' }],
@@ -33,9 +39,16 @@ export const extensionTest = baseTest.extend<TraceViewerFixtures>(traceViewerFix
   isWebView2: [false, { scope: 'worker' }],
   isHeadlessShell: [false, { scope: 'worker' }],
 
-  browser: [async ({ playwright }, use, testInfo) => {
+  relayServer: [async ({ }, use) => {
     const httpServer = http.createServer();
     await new Promise<void>(resolve => httpServer.listen(0, resolve));
+    const { CDPRelayServer } = await import('../../../playwright-mcp/src/cdpRelay.ts');
+    new CDPRelayServer(httpServer);
+    await use(httpServer);
+    httpServer.close();
+  }, { scope: 'worker' }],
+
+  persistentContext: [async ({ }, use) => {
     const pathToExtension = path.join(__dirname, '../../../playwright-mcp/extension');
     const context = await chromium.launchPersistentContext('', {
       executablePath: process.env.CRPATH,
@@ -46,28 +59,45 @@ export const extensionTest = baseTest.extend<TraceViewerFixtures>(traceViewerFix
       ],
       channel: 'chromium',
     });
-    const { CDPRelayServer } = await import('../../../playwright-mcp/src/cdpRelay.ts');
-    new CDPRelayServer(httpServer);
-    const origin = `ws://localhost:${(httpServer.address() as AddressInfo).port}`;
-    await expect.poll(() => context?.serviceWorkers()).toHaveLength(1);
-    await context.pages()[0].goto(new URL('/popup.html', context.serviceWorkers()[0].url()).toString());
-    await context.pages()[0].getByRole('textbox', { name: 'Bridge Server URL:' }).clear();
-    await context.pages()[0].getByRole('textbox', { name: 'Bridge Server URL:' }).fill(`${origin}/extension`);
-    await context.pages()[0].getByRole('button', { name: 'Share This Tab' }).click();
-    await context.pages()[0].goto('about:blank');
-    const browser = await playwright.chromium.connectOverCDP(`${origin}/cdp`);
     context.on('dialog', dialog => {
       // Make sure the dialog is not dismissed automatically.
     });
+    await use(context);
+    await context.close();
+  }, { scope: 'worker' }],
+
+  browser: [async ({ persistentContext, relayServer, playwright }, use, testInfo) => {
+    const origin = `ws://localhost:${(relayServer.address() as AddressInfo).port}`;
+    await expect.poll(() => persistentContext.serviceWorkers()).toHaveLength(1);
+    await persistentContext.pages()[0].goto(new URL('/popup.html', persistentContext.serviceWorkers()[0].url()).toString());
+    await persistentContext.pages()[0].getByRole('textbox', { name: 'Bridge Server URL:' }).clear();
+    await persistentContext.pages()[0].getByRole('textbox', { name: 'Bridge Server URL:' }).fill(`${origin}/extension`);
+    await persistentContext.pages()[0].getByRole('button', { name: 'Share This Tab' }).click();
+    await persistentContext.pages()[0].goto('about:blank');
+    const browser = await playwright.chromium.connectOverCDP(`${origin}/cdp`);
     await use(browser);
-    httpServer.close();
   }, { scope: 'worker' }],
 
   context: async ({ browser }, use) => {
     await use(browser.contexts()[0]);
   },
 
-  page: async ({ browser }, use) => {
-    await use(browser.contexts()[0].pages()[0]);
+  page: async ({ persistentContext, relayServer, playwright }, use) => {
+    const page = await persistentContext.newPage();
+    const origin = `ws://localhost:${(relayServer.address() as AddressInfo).port}`;
+    await expect.poll(() => persistentContext.serviceWorkers()).toHaveLength(1);
+    await page.goto(new URL('/popup.html', persistentContext.serviceWorkers()[0].url()).toString());
+    await page.getByRole('textbox', { name: 'Bridge Server URL:' }).clear();
+    await page.getByRole('textbox', { name: 'Bridge Server URL:' }).fill(`${origin}/extension`);
+    await page.getByRole('button', { name: 'Share This Tab' }).click();
+    await page.goto('about:blank');
+    const browser = await playwright.chromium.connectOverCDP(`${origin}/cdp`);
+    const pages = browser.contexts()[0].pages();
+    const remotePage = pages[pages.length - 1];
+    await use(remotePage);
+    // Disconnect from the tab.
+    await browser.close();
+    // Close the page.
+    await page.close();
   }
 });

tests/extension/playwright.config.ts

@@ -31,6 +31,7 @@ const config: Config<PlaywrightWorkerOptions & PlaywrightTestOptions> = {
   timeout: 30000,
   globalTimeout: 5400000,
   workers: process.env.CI ? 1 : undefined,
+  fullyParallel: !process.env.CI,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 3 : 0,
   reporter: process.env.CI ? [