Тестирование расширений Chrome с помощью Puppeteer

Puppeteer предоставляет фреймворк для создания автоматизированных тестов веб-сайтов, включая возможность тестирования расширений Chrome. Это высокоуровневые сквозные тесты, проверяющие функциональность веб-сайта или расширения после того, как они были интегрированы в конечный продукт. В этом руководстве мы покажем, как написать базовый тест для расширения из нашего репозитория примеров.

Прежде чем начать

Клонируйте или скачайте репозиторий chrome-extensions-samples . В качестве тестового расширения мы будем использовать демонстрацию API истории из api-samples/history/showHistory .

Вам также потребуется установить Node.JS , на основе которого построен Puppeteer.

Написание вашего теста

Шаг 1: Запустите свой проект Node.js

Нам нужно создать базовый проект Node.js. В новой папке создайте файл package.json со следующим содержимым:

package.json:

{
  "name": "puppeteer-demo",
  "version": "1.0"
}

Подобно файлу manifest.json расширения, этот файл необходим для всех проектов Node.

Шаг 2: Установите Puppeteer и Jest.

Выполните команду npm install puppeteer jest , чтобы добавить Puppeteer и Jest в качестве зависимостей. Они будут автоматически добавлены в ваш файл package.json .

Можно писать автономные тесты для Puppeteer, но мы будем использовать Jest в качестве средства запуска тестов, чтобы придать нашему коду дополнительную структуру.

Шаг 3: Создайте точку входа.

Создайте новый файл с именем index.test.js и добавьте в него следующий код:

index.test.js:

const puppeteer = require('puppeteer');

const EXTENSION_PATH = '../../api-samples/history/showHistory';

let browser;
let worker;

beforeEach(async () => {
  // TODO: Launch the browser.
});

afterEach(async () => {
  // TODO: Close the browser.
});

Шаг 4: Запустите браузер

Обновите параметры beforeEach и afterEach для запуска и закрытия браузера. При запуске множества тестов может потребоваться использование одного и того же браузера. Однако это, как правило, не рекомендуется, поскольку снижает изоляцию между тестами и может привести к тому, что один тест повлияет на результат другого.

index.test.js:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });
});

afterEach(async () => {
  await browser.close();
  browser = undefined;
});

Шаг 5: Дождитесь прибытия сотрудника службы поддержки.

Нам нужно дождаться запуска службы расширения, чтобы позже использовать её для открытия всплывающего окна. Обновите функцию beforeEach следующим кодом:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });

  const workerTarget = await browser.waitForTarget(
    // Assumes that there is only one service worker created by the extension
    // and its URL ends with service-worker.js.
    (target) =>
      target.type() === 'service_worker' &&
      target.url().endsWith('service-worker.js')
  );

  worker = await workerTarget.worker();
});

Шаг 6: Добавьте псевдоним

Для упрощения запуска тестов добавьте псевдоним в файл package.json :

package.json:

{
  "name": "puppeteer-demo",
  "version": "1.0",
  "dependencies": {
    "puppeteer": "^24.8.1"
  },
  "scripts": {
    "start": "jest ."
  }
}

Это запустит все файлы с расширением .test.js в текущем каталоге.

Шаг 7: Откройте всплывающее окно

Добавьте простой тест. Сначала откроем новую страницу, чтобы в истории браузера появилась запись. Затем откроем всплывающее окно, чтобы посмотреть содержимое истории. Добавьте следующий код:

index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const