Kompleksowe testowanie rozszerzeń do Chrome

Testowanie kompleksowe polega na utworzeniu pakietu rozszerzenia i załadowaniu go do przeglądarki. Narzędzie do testowania komunikuje się z przeglądarką, aby automatyzować interakcje i testować te same ścieżki, które pokonuje użytkownik. Biblioteka obsługująca testy kompleksowe zwykle udostępnia sposoby kontrolowania przeglądarki, symulowania danych wejściowych użytkownika i obserwowania bieżącego stanu otwartych stron.

Samouczek znajdziesz w artykule Testing Chrome Extensions with Puppeteer, a szczegółowe informacje o pisaniu testów jednostkowych do rozszerzeń Chrome znajdziesz w sekcji Unit testing.

Korzystanie z bibliotek do testowania przeglądarek

Rozszerzenia są obsługiwane przez wiele bibliotek testowych.

Przeprowadzanie testów w Chrome bez interfejsu graficznego

Podczas przeprowadzania testów w ramach zautomatyzowanego przepływu pracy często konieczne jest wczytanie rozszerzenia na urządzeniu bez ekranu. Nowy tryb bez interfejsu graficznego w Chrome umożliwia uruchamianie przeglądarki w środowisku bez nadzoru. Uruchom Chrome, używając flagi --headless=new (tryb bez interfejsu graficznego jest obecnie domyślnie ustawiony na „old”, który nie obsługuje wczytywania rozszerzeń). W zależności od wybranego narzędzia do automatyzacji może być dostępne ustawienie, które automatycznie dodaje flagę.

Ustawianie identyfikatora rozszerzenia

W testach często przydaje się stały identyfikator rozszerzenia. Ułatwia to 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 testach. Aby to zrobić, wykonaj czynności opisane w sekcji Zachowywanie spójnego identyfikatora rozszerzenia.

Testowanie stron rozszerzeń

Strony rozszerzeń są dostępne pod odpowiednimi adresami URL, np.chrome-extension://<id>/index.html. Aby przejść do tych adresów URL, użyj standardowych metod nawigacji dostępnych w wybranym narzędziu do automatyzacji.

Testowanie wyskakującego okienka rozszerzenia

W przypadku niektórych bibliotek możesz otworzyć wyskakujące okienko za pomocą interfejsu API action.openPopup(), a następnie uzyskać odniesienie do nowego kontekstu. Na przykład w przewodniku po rozszerzeniach do Chrome znajdziesz informacje o tym, jak to zrobić.

Jeśli nie jest to możliwe w wybranej bibliotece, otwórz adres URL wyskakującego okienka w nowej karcie. Jeśli wyskakujące okienko korzysta z aktywnej karty, rozważ wdrożenie zastąpienia, w którym identyfikator karty można jawnie przekazać 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 await chrome.tabs.get(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 działania rozszerzenia, w testach integracyjnych najlepiej unikać dostępu do stanu wewnętrznego. Zamiast tego testy powinny być oparte na tym, co jest widoczne dla użytkownika. Czasami jednak warto mieć bezpośredni dostęp do danych z rozszerzenia. W takich przypadkach rozważ wykonanie kodu 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 service workera

Więcej informacji o testowaniu zakończenia działania service workera znajdziesz w artykule Testowanie zakończenia działania service workera za pomocą Puppeteer. Mamy też przykłady dla Puppeteer i Selenium.

Pamiętaj, że w przypadku niektórych platform testowych procesy service workerów mogą nie kończyć się automatycznie, jak to ma miejsce w normalnym użytkowaniu. Tak jest w przypadku Selenium. Korzysta on z ChromeDrivera, który dołącza debuger do wszystkich procesów service worker, uniemożliwiając ich zatrzymanie.