跳转到主要内容

Chrome 扩展

简介

注意

扩展程序仅在以持久上下文启动的 Chromium 中工作。使用自定义浏览器参数需自担风险,因为其中一些可能会破坏 Playwright 功能。

Google Chrome 和 Microsoft Edge 移除了侧载扩展所需的命令行标志,因此请使用 Playwright 捆绑的 Chromium。

下面的代码片段检索了一个 Manifest v3 扩展程序的服务工作线程,其源文件位于 ./my-extension 中。

请注意 chromium 频道的用法,它允许在无头模式下运行扩展程序。或者,您也可以在有头模式下启动浏览器。

const { chromium } = require('playwright');

(async () => {
const pathToExtension = require('path').join(__dirname, 'my-extension');
const userDataDir = '/tmp/test-user-data-dir';
const browserContext = await chromium.launchPersistentContext(userDataDir, {
channel: 'chromium',
args: [
`--disable-extensions-except=${pathToExtension}`,
`--load-extension=${pathToExtension}`
]
});
let [serviceWorker] = browserContext.serviceWorkers();
if (!serviceWorker)
serviceWorker = await browserContext.waitForEvent('serviceworker');

// Test the service worker as you would any other worker.
await browserContext.close();
})();

测试

要在运行测试时加载扩展程序,您可以使用测试夹具来设置上下文。您还可以动态检索扩展程序 ID,并使用它来加载和测试弹出页面等。

请注意 chromium 频道的用法,它允许在无头模式下运行扩展程序。或者,您也可以在有头模式下启动浏览器。

首先,添加将加载扩展程序的夹具

fixtures.ts
import { test as base, chromium, type BrowserContext } from '@playwright/test';
import path from 'path';

export const test = base.extend<{
context: BrowserContext;
extensionId: string;
}>({
context: async ({ }, use) => {
const pathToExtension = path.join(__dirname, 'my-extension');
const context = await chromium.launchPersistentContext('', {
channel: 'chromium',
args: [
`--disable-extensions-except=${pathToExtension}`,
`--load-extension=${pathToExtension}`,
],
});
await use(context);
await context.close();
},
extensionId: async ({ context }, use) => {
// for manifest v3:
let [serviceWorker] = context.serviceWorkers();
if (!serviceWorker)
serviceWorker = await context.waitForEvent('serviceworker');

const extensionId = serviceWorker.url().split('/')[2];
await use(extensionId);
},
});
export const expect = test.expect;

然后,在测试中使用这些夹具

import { test, expect } from './fixtures';

test('example test', async ({ page }) => {
await page.goto('https://example.com');
await expect(page.locator('body')).toHaveText('Changed by my-extension');
});

test('popup page', async ({ page, extensionId }) => {
await page.goto(`chrome-extension://${extensionId}/popup.html`);
await expect(page.locator('body')).toHaveText('my-extension popup');
});