Kompleksowe testowanie rozszerzeń do Chrome

Kompleksowe testowanie obejmuje wbudowanie pakietu rozszerzeń i ładowanie go w przeglądarce. Narzędzie do testowania komunikuje się z przeglądarką, by zautomatyzować interakcje i przetestować te same przepływy danych, które przechodziłby użytkownik. Biblioteka, która obsługuje kompleksowe testy, zwykle zapewnia sposoby kontrolowania przeglądarki, symulowania danych wejściowych użytkownika i obserwacji bieżącego stanu dowolnych otwartych stron.

Samouczek dotyczący testowania rozszerzeń do Chrome znajdziesz w artykule Testowanie rozszerzeń do Chrome przy użyciu Puppeteer, a szczegółowe informacje o pisaniu testów jednostkowych rozszerzeń do Chrome znajdziesz w artykule Testowanie jednostkowe.

Korzystanie z bibliotek testowania przeglądarek

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

Biblioteka	Wskazówki
Lalkarz / scenarzysta	Zobacz rozszerzenia Chrome (Puppeteer / Playwright).
Selen	Używaj obiektu ChromeOptions do ładowania rozszerzeń. Więcej informacji znajdziesz tutaj.
WebDriverIO	Zobacz Testowanie rozszerzeń internetowych.

Przeprowadzanie testów w Chrome bez interfejsu graficznego

Gdy przeprowadzasz testy w ramach automatycznego przepływu pracy, często konieczne jest wczytanie rozszerzenia na komputerze, który nie ma ekranu. Nowy tryb bez interfejsu graficznego w Chrome umożliwia uruchamianie go w środowisku nienadzorowanym. Uruchamiaj Chrome z użyciem flagi --headless=new (ustawienie domyślne to obecnie „stary”, który nie obsługuje wczytywania rozszerzeń). W zależności od wybranego narzędzia do automatyzacji dostępne może być ustawienie, które dodaje flagę automatycznie.

Ustawianie identyfikatora rozszerzenia

Często dobrze jest stosować w testach stały identyfikator rozszerzenia. Dzięki temu można łatwiej wykonywać wiele typowych zadań, takich jak umieszczenie źródła rozszerzenia na liście dozwolonych na serwerze, z którym musi się ono komunikować, lub otwieranie stron rozszerzeń w ramach testów. Aby to zrobić, wykonaj czynności opisane w sekcji Utrzymanie spójnego identyfikatora rozszerzenia.

Testowanie stron rozszerzeń

Strony rozszerzeń można otwierać za pomocą odpowiadających im adresów URL, np.chrome-extension://<id>/index.html. Aby przejść do tych adresów URL, użyj zwykłych metod nawigacyjnych dostępnych w wybranym narzędziu do automatyzacji.

Testowanie wyskakującego okienka rozszerzenia

Obecnie nie można otworzyć wyskakującego okienka rozszerzenia w kontekście innej strony. Zamiast tego otwórz URL wyskakującego okienka w nowej karcie. Jeśli wyskakujące okienko korzysta z aktywnej karty, rozważ zastąpienie identyfikatora karty. 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];
}

Sprawdzam stan rozszerzenia

Aby uniknąć błędów testów po zmianie działania wewnętrznego rozszerzenia, najlepiej unikać uzyskiwania dostępu do stanu wewnętrznego w teście integracji. Testy powinny się opierać na tym, co jest widoczne dla użytkownika. Czasami jednak warto mieć bezpośredni dostęp do danych z rozszerzenia. W takich przypadkach warto wykonać kod w kontekście strony rozszerzenia.

W 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 skryptu service worker

Więcej informacji o testowaniu zakończenia działania skryptu service worker znajdziesz w artykule o testowaniu zakończenia działania skryptu service worker za pomocą Puppeteer. Mamy też próbkę dla Puppeteer i Selenium.

Pamiętaj, że gdy używasz niektórych platform testowych, mechanizmy Service Worker mogą nie zakończyć się automatycznie, jak w przypadku normalnego użytkowania. Tak właśnie jest w Selenium. Opiera się na ChromeDriver, który łączy debuger do wszystkich mechanizmów Service Worker, co zapobiega zatrzymaniu ich.