Расширения Chrome

Введение​

примечание

Расширения работают в Chromium только при запуске с постоянным контекстом. Используйте пользовательские аргументы браузера на свой страх и риск, поскольку некоторые из них могут нарушить работу Playwright.

Google Chrome и Microsoft Edge удалили флаги командной строки, необходимые для установки расширений из сторонних источников, поэтому используйте Chromium, входящий в комплект Playwright.

Приведённый ниже фрагмент получает сервис-воркер расширения 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();
})();

Приостановка неактивного сервис-воркера (MV3)​

Сервис-воркеры Chrome MV3 автоматически приостанавливаются примерно через 30 секунд бездействия и запускаются по запросу. В этом случае Playwright сохраняет тот же объект Worker активным — новое событие 'serviceworker' не генерируется. Новые вызовы evaluate(), сделанные во время перезапуска, приостанавливаются до готовности нового контекста, а затем автоматически продолжаются:

const sw = await context.waitForEvent('serviceworker');

// ... SW suspends after 30 s of inactivity and is restarted by the browser ...

// The existing handle is transparent across the restart.
await sw.evaluate(() => sendMessage({ type: 'ping' })); // just works

примечание

Вызовы evaluate(), которые уже выполнялись непосредственно в момент приостановки, завершатся ошибкой "Service worker restarted", как и при навигации страницы, начатой до завершения предыдущей операции.

Тестирование​

Чтобы расширение загружалось при запуске тестов, можно использовать тестовую фикстуру для настройки контекста. Также можно динамически получить идентификатор расширения и использовать его, например, для загрузки и тестирования страницы всплывающего окна.

Обратите внимание на использование канала chromium, который позволяет запускать расширения в безголовом режиме. Также можно запустить браузер в обычном режиме.

Сначала добавьте фикстуры, которые загрузят расширение:

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');
});