Комплексное тестирование расширений Chrome

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

См. руководство «Тестирование расширений Chrome с помощью Puppeteer» и «Модульное тестирование» для получения подробной информации о написании модульных тестов для расширений Chrome.

Использование библиотек для тестирования браузеров

Расширения поддерживаются рядом библиотек для тестирования.

Библиотека Руководство
Кукловод / Драматург См. расширения Chrome ( Puppeteer / Playwright ).
Селен Для загрузки расширений используйте объект ChromeOptions . Более подробная информация доступна здесь .
WebDriverIO См. Тестирование веб-расширений .

Запуск тестов в безголовом Chrome

При запуске тестов в рамках автоматизированного рабочего процесса часто возникает необходимость загрузить расширение на компьютере без монитора. Новый безголовый режим Chrome позволяет запускать Chrome в такой среде без участия пользователя. Запустите Chrome, используя флаг --headless=new (в настоящее время безголовый режим по умолчанию использует значение "old", которое не поддерживает загрузку расширений). В зависимости от выбранного инструмента автоматизации, может существовать настройка, которая автоматически добавит этот флаг.

Установка идентификатора расширения

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

Тестирование страниц расширений

Доступ к страницам расширений можно получить, используя соответствующие URL-адреса, например chrome-extension://<id>/index.html . Для перехода по этим URL-адресам используйте стандартные методы навигации, доступные в выбранном вами инструменте автоматизации.

Тестирование всплывающего окна расширения

В некоторых библиотеках можно открыть всплывающее окно с помощью API action.openPopup() и затем получить ссылку на новый контекст. Например, в руководстве по расширениям Chrome для Puppeteer описано, как это сделать.

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

const URL_PARAMS = new URLSearchParams(window.location.search);

async function getActiveTab() {
  // Open popup.html?tab=5 to use tab ID 5, etc.
  if (URL_PARAMS.has("tab")) {
    return await chrome.tabs.get(parseInt(URL_PARAMS.get("tab")));
  }

  const tabs = await chrome.tabs.query({
    active: true,
    currentWindow: true
  });

  return tabs[0];
}

Проверка состояния расширения

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

В Puppeteer:

const workerTarget = await browser.waitForTarget(
  target => target.type() === 'service_worker'
);
const worker = await workerTarget.worker();

const value = await worker.evaluate(() => {
  chrome.storage.local.get('foo');
});

В Selenium:

// Selenium doesn't allow us to access the service worker, so we need to open an extension page where we can execute the code
await driver.get('chrome-extension://<id>/popup.html');
await driver.executeAsyncScript(
  'const callback = arguments[arguments.length - 1];' +
  'chrome.storage.local.get(\'foo\').then(callback);'
);

Увольнение сотрудника службы тестирования

Чтобы узнать о тестировании завершения работы сервис-воркера, см. раздел «Тестирование завершения работы сервис-воркера с помощью Puppeteer» . У нас также есть примеры для Puppeteer и Selenium.

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