chore: introduce new extension test mode

mxschmitt · mxschmitt · commit 4fa2a75298dc · 2025-06-11T18:20:42.000+02:00
diff --git a/tests/config/traceViewerFixtures.ts b/tests/config/traceViewerFixtures.ts
@@ -57,13 +57,13 @@ class TraceViewerPage {
     this.actionTitles = page.locator('.action-title');
     this.actionsTree = page.getByTestId('actions-tree');
     this.callLines = page.locator('.call-tab .call-line');
-    this.logLines = page.getByTestId('log-list').locator('.list-view-entry');
+    this.logLines = page.getByRole('list', { name: 'Log entries' }).getByRole('listitem');
     this.consoleLines = page.locator('.console-line');
     this.consoleLineMessages = page.locator('.console-line-message');
     this.errorMessages = page.locator('.error-message');
     this.consoleStacks = page.locator('.console-stack');
-    this.stackFrames = page.getByTestId('stack-trace-list').locator('.list-view-entry');
-    this.networkRequests = page.getByTestId('network-list').locator('.list-view-entry');
+    this.stackFrames = page.getByRole('list', { name: 'Stack trace' }).getByRole('listitem');
+    this.networkRequests = page.getByRole('list', { name: 'Network requests' }).getByRole('listitem');
     this.snapshotContainer = page.locator('.snapshot-container iframe.snapshot-visible[name=snapshot]');
     this.metadataTab = page.getByTestId('metadata-view');
     this.sourceCodeTab = page.getByTestId('source-code');
@@ -73,58 +73,57 @@ class TraceViewerPage {
     this.displayCanvasContentSetting = page.locator('.setting').getByText('Display canvas content');
   }
 
-  async actionIconsText(action: string) {
-    const entry = await this.page.waitForSelector(`.tree-view-entry:has-text("${action}")`);
-    await entry.waitForSelector('.action-icon-value:visible');
-    return await entry.$$eval('.action-icon-value:visible', ee => ee.map(e => e.textContent));
+  actionIconsText(action: string) {
+    const entry = this.page.locator(`.tree-view-entry`).filter({ hasText: action });
+    return entry.locator('.action-icon-value').filter({ visible: true });
   }
 
-  async actionIcons(action: string) {
-    return await this.page.waitForSelector(`.tree-view-entry:has-text("${action}") .action-icons`);
+  actionIcons(action: string) {
+    return this.page.locator(`.tree-view-entry`).filter({ hasText: action }).locator('.action-icons').filter({ visible: true });
   }
 
   @step
-  async expandAction(title: string, ordinal: number = 0) {
-    await this.actionsTree.locator('.tree-view-entry', { hasText: title }).nth(ordinal).locator('.codicon-chevron-right').click();
+  async expandAction(title: string) {
+    await this.actionsTree.getByRole('treeitem', { name: title }).nth(0).getByRole('button', { name: 'Expand' }).click();
   }
 
   @step
   async selectAction(title: string, ordinal: number = 0) {
-    await this.page.locator(`.action-title:has-text("${title}")`).nth(ordinal).click();
+    await this.actionsTree.getByRole('treeitem', { name: title }).nth(ordinal).click();
   }
 
   @step
   async hoverAction(title: string, ordinal: number = 0) {
-    await this.page.locator(`.action-title:has-text("${title}")`).nth(ordinal).hover();
+    await this.actionTitles.filter({ hasText: title }).nth(ordinal).hover();
   }
 
   @step
   async selectSnapshot(name: string) {
-    await this.page.click(`.snapshot-tab .tabbed-pane-tab-label:has-text("${name}")`);
+    await this.page.locator('.snapshot-tab .tabbed-pane-tab-label').filter({ hasText: name }).click();
   }
 
   async showErrorsTab() {
-    await this.page.click('text="Errors"');
+    await this.page.getByRole('tab', { name: 'Errors' }).click();
   }
 
   async showConsoleTab() {
-    await this.page.click('text="Console"');
+    await this.page.getByRole('tab', { name: 'Console' }).click();
   }
 
   async showSourceTab() {
-    await this.page.click('text="Source"');
+    await this.page.getByRole('tab', { name: 'Source' }).click();
   }
 
   async showNetworkTab() {
-    await this.page.click('text="Network"');
+    await this.page.getByRole('tab', { name: 'Network' }).click();
   }
 
   async showMetadataTab() {
-    await this.page.click('text="Metadata"');
+    await this.page.getByRole('tab', { name: 'Metadata' }).click();
   }
 
   async showSettings() {
-    await this.page.locator('.settings-gear').click();
+    await this.page.getByRole('button', { name: 'Settings' }).click();
   }
 
   @step
diff --git a/tests/extension/extensionTest.ts b/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]);
+  }
+});
diff --git a/tests/extension/playwright.config.ts b/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;
diff --git a/tests/page/pageTest.ts b/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;
 
