Тестирование расширений 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 popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );
});

Шаг 8: Подтвердите текущее состояние

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

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 popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );

  const popup = await popupTarget.asPage();

  const list = await page.$('ul');
  const children = await list.$$('li');

  expect(children.length).toBe(1);
});

Шаг 9: Запустите тест

Для запуска теста используйте npm start . Вы должны увидеть сообщение о том, что тест пройден успешно.

Полный проект можно посмотреть в нашем репозитории chrome-extensions-samples.

Следующие шаги

После освоения основ попробуйте создать набор тестов для собственного расширения. В справочнике API Puppeteer содержится дополнительная информация о возможностях — здесь не описаны многие функции.