chore: introduce new extension test mode

Author: mxschmitt

tests/extension/extensionTest.ts

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { baseTest } from '../config/baseTest';
+import { chromium } from 'playwright';
+import { expect, type PageTestFixtures, type PageWorkerFixtures } from '../page/pageTestApi';
+import type { TraceViewerFixtures } from '../config/traceViewerFixtures';
+import { traceViewerFixtures } from '../config/traceViewerFixtures';
+export { expect } from '@playwright/test';
+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>({
+  browserVersion: [({ browser }) => browser.version(), { scope: 'worker' }],
+  browserMajorVersion: [({ browserVersion }, use) => use(Number(browserVersion.split('.')[0])), { scope: 'worker' }],
+  isAndroid: [false, { scope: 'worker' }],
+  isElectron: [false, { scope: 'worker' }],
+  electronMajorVersion: [0, { scope: 'worker' }],
+  isWebView2: [false, { scope: 'worker' }],
+  isHeadlessShell: [false, { scope: 'worker' }],
+
+  browser: [async ({ playwright }, use, testInfo) => {
+    const httpServer = http.createServer();
+    await new Promise<void>(resolve => httpServer.listen(0, resolve));
+    const pathToExtension = path.join(__dirname, '../../../playwright-mcp/extension');
+    const context = await chromium.launchPersistentContext('', {
+      args: [
+        `--disable-extensions-except=${pathToExtension}`,
+        `--load-extension=${pathToExtension}`,
+        '--enable-features=AllowContentInitiatedDataUrlNavigations',
+      ],
+      channel: 'chromium',
+    });
+    const { CDPBridgeServer } = await import('../../../playwright-mcp/src/cdp-relay.ts');
+    const server = new CDPBridgeServer(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}${server.EXTENSION_PATH}`);
+    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}${server.CDP_PATH}`);
+    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]);
+  }
+});

tests/extension/playwright.config.ts

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { config as loadEnv } from 'dotenv';
+loadEnv({ path: path.join(__dirname, '..', '..', '.env') });
+process.env.PWTEST_UNDER_TEST = '1';
+
+import type { Config, PlaywrightTestOptions, PlaywrightWorkerOptions } from '@playwright/test';
+import * as path from 'path';
+
+process.env.PWPAGE_IMPL = 'extension';
+
+const outputDir = path.join(__dirname, '..', '..', 'test-results');
+const testDir = path.join(__dirname, '..');
+const config: Config<PlaywrightWorkerOptions & PlaywrightTestOptions> = {
+  testDir,
+  outputDir,
+  timeout: 30000,
+  globalTimeout: 5400000,
+  workers: process.env.CI ? 1 : undefined,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 3 : 0,
+  reporter: process.env.CI ? [
+    ['dot'],
+    ['json', { outputFile: path.join(outputDir, 'report.json') }],
+    ['blob', { fileName: `${process.env.PWTEST_BOT_NAME}.zip` }],
+  ] : 'line',
+  projects: [],
+};
+
+const metadata = {
+  platform: process.platform,
+  headless: true,
+  browserName: 'extension',
+  channel: undefined,
+  mode: 'default',
+  video: false,
+};
+
+config.projects.push({
+  name: 'extension',
+  // Share screenshots with chromium.
+  snapshotPathTemplate: '{testDir}/{testFileDir}/{testFileName}-snapshots/{arg}-chromium{ext}',
+  use: {
+    browserName: 'chromium',
+  },
+  testDir: path.join(testDir, 'page'),
+  metadata,
+});
+
+export default config;

tests/page/pageTest.ts

@@ -21,6 +21,7 @@ import { androidTest } from '../android/androidTest';
 import { browserTest } from '../config/browserTest';
 import { electronTest } from '../electron/electronTest';
 import { webView2Test } from '../webview2/webView2Test';
+import { extensionTest } from '../extension/extensionTest';
 import type { PageTestFixtures, PageWorkerFixtures } from './pageTestApi';
 import type { ServerFixtures, ServerWorkerOptions } from '../config/serverFixtures';
 import { expect as baseExpect } from '@playwright/test';
@@ -34,6 +35,8 @@ if (process.env.PWPAGE_IMPL === 'electron')
   impl = electronTest;
 if (process.env.PWPAGE_IMPL === 'webview2')
   impl = webView2Test;
+if (process.env.PWPAGE_IMPL === 'extension')
+  impl = extensionTest;
 
 export const test = impl;