Kompleksowe testowanie rozszerzeń do Chrome

Kompleksowe testowanie obejmuje kompilowanie pakietu rozszerzenia i wczytywanie go w przeglądarce. Narzędzie do testowania komunikuje się z przeglądarką, aby automatyzować interakcje i testować te same przepływy, które przechodzi użytkownik. Biblioteka obsługująca kompleksowe testowanie powinna zapewniać sposoby sterowania przeglądarką, symulowania wprowadzania danych przez użytkownika i obserwowania bieżącego stanu wszystkich otwartych stron.

Samouczek zawiera artykuł Testowanie rozszerzeń do Chrome przy użyciu Puppeteer. Samouczek Testowanie jednostkowe zawiera szczegółowe informacje o tworzeniu testów jednostkowych rozszerzeń do Chrome.

Korzystanie z bibliotek testowania przeglądarek

Rozszerzenia są obsługiwane przez różne biblioteki testowe.

Biblioteka	Wskazówki
Puppeteer / Playwright	Zobacz rozszerzenia do Chrome (Puppeteer / Playwright).
Selen	Aby wczytywać rozszerzenia, użyj obiektu ChromeOptions. Więcej informacji znajdziesz tutaj.
WebDriverIO	Zobacz testowanie rozszerzeń internetowych.

Uruchamianie testów w Chrome bez interfejsu graficznego

Podczas testowania w ramach zautomatyzowanego procesu często trzeba wczytać rozszerzenie na komputerze bez ekranu. Nowy tryb bez interfejsu graficznego w Chrome umożliwia uruchamianie przeglądarki w takim środowisku bez nadzoru. Uruchom Chrome, używając flagi --headless=new (w przypadku trybu bez okna domyślnie ustawiona jest opcja „old”, która nie obsługuje ładowania rozszerzeń). W zależności od wybranego narzędzia do automatyzacji może istnieć ustawienie, które automatycznie dodaje flagę.

Konfigurowanie identyfikatora rozszerzenia

W testach często przydaje się stały identyfikator rozszerzenia. Dzięki temu łatwiej jest wykonywać wiele typowych zadań, takich jak dodawanie do białej listy pochodzenia rozszerzenia na serwerze, z którym musi się ono komunikować, czy otwieranie stron rozszerzenia w ramach testów. Aby to zrobić, wykonaj czynności opisane w sekcji Utrzymywanie spójnego identyfikatora rozszerzenia.

Testowanie stron rozszerzeń

Do stron rozszerzeń można uzyskać dostęp za pomocą odpowiedniego adresu URL, np.chrome-extension://<id>/index.html. Aby przejść do tych adresów URL, użyj zwykłych metod nawigacji dostępnych w wybranym przez Ciebie narzędziu automatyzacji.

Testowanie wyskakującego okienka rozszerzenia

Obecnie nie można otworzyć wyskakującego okienka rozszerzenia w kontekście innej strony. Zamiast tego otwórz adres URL wyskakującego okienka w nowej karcie. Jeśli Twoje wyskakujące okienko korzysta z aktywnej karty, rozważ wdrożenie zastąpienia, w którym identyfikator karty może być przekazywany do wyskakującego okienka. Na przykład:

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 parseInt(URL_PARAMS.get("tab"));
  }

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

  return tabs[0];
}

Sprawdzanie stanu rozszerzenia

Aby uniknąć niepowodzeń testów po zmianie wewnętrznego zachowania rozszerzenia, zalecamy, aby w testach integracyjnych nie korzystać z dostępu do stanu wewnętrznego. Zamiast tego testy powinny być oparte na tym, co jest widoczne dla użytkownika. Czasami jednak może być konieczny bezpośredni dostęp do danych z rozszerzenia. W takich przypadkach rozważ wykonanie kodu w kontekście strony rozszerzenia.

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

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

Testowanie zakończenia działania mechanizmu Service Worker

Więcej informacji o testowaniu zamykania się usług workera znajdziesz w artykule Testowanie zamykania się usług workera za pomocą Puppeteer. Mamy też przykład dla Puppeteer i Selenium.

Pamiętaj, że w przypadku niektórych platform testowania mechanizmy Service Worker mogą nie zakończyć się automatycznie, tak jakby to odbywały się podczas normalnego użytkowania. Tak jest w przypadku Selenium. Używa ona ChromeDriver, który dołącza debuger do wszystkich usług działających w tle, aby nie można było ich zatrzymać.