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

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

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

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

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

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

Шаг 1. Запустите проект Node.JS.

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

пакет.json:

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

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

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

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

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

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

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

индекс.test.js: 

const puppeteer = require('puppeteer');

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

let browser;

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

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

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

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

индекс.test.js: 

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    args: [
      `--disable-extensions-except=${EXTENSION_PATH}`,
      `--load-extension=${EXTENSION_PATH}`
    ]
  });
});

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

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

Чтобы упростить выполнение тестов, добавьте псевдоним в файл package.json :

пакет.json:

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

При этом будут запущены все файлы, заканчивающиеся на .test.js в текущем каталоге.

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

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

index.test.js: 

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);
});

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

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

index.test.js: 

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);

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

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

Шаг 8. Запустите тест

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

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

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

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