End-to-end testen voor Chrome-extensies

End-to-end testen houdt in dat een extensiepakket wordt gebouwd en in een browser wordt geladen. Een testtool communiceert met de browser om interacties te automatiseren en dezelfde processen te testen die een gebruiker zou doorlopen. Een bibliotheek die end-to-end testen ondersteunt, biedt doorgaans mogelijkheden om de browser te besturen, gebruikersinvoer te simuleren en de huidige status van geopende pagina's te observeren.

Zie Testing Chrome Extensions with Puppeteer voor een handleiding en Unit testing voor meer informatie over het schrijven van unit tests voor Chrome-extensies.

Gebruik maken van browser-testbibliotheken

Uitbreidingen worden ondersteund door een reeks testbibliotheken.

Bibliotheek	Begeleiding
Poppenspeler / Toneelschrijver	Zie Chrome-extensies ( Puppeteer / Playwright ).
Selenium	Gebruik het ChromeOptions- object om extensies te laden. Meer informatie is hier beschikbaar.
WebDriverIO	Zie Webextensietesten .

Tests uitvoeren in headless Chrome

Bij het uitvoeren van tests als onderdeel van een geautomatiseerde workflow is het vaak nodig om je extensie te laden op een machine zonder scherm. De nieuwe headless- modus van Chrome maakt het mogelijk om Chrome in een dergelijke onbeheerde omgeving uit te voeren. Start Chrome met de vlag --headless=new (headless is momenteel standaard ingesteld op "old", wat het laden van extensies niet ondersteunt). Afhankelijk van de automatiseringstool die je gebruikt, is er mogelijk een instelling die deze vlag automatisch voor je toevoegt.

Een extensie-ID instellen

Het is vaak wenselijk om een ​​vaste extensie-ID te gebruiken in tests. Dit vereenvoudigt veelvoorkomende taken, zoals het toevoegen van de oorsprong van de extensie aan de whitelist van een server waarmee deze moet communiceren, of het openen van extensiepagina's binnen tests. Volg hiervoor de stappen onder ' Een consistente extensie-ID behouden' .

Testpagina's van de extensie

Extensiepagina's zijn toegankelijk via de bijbehorende URL, bijvoorbeeld chrome-extension://<id>/index.html . Gebruik de gebruikelijke navigatiemethoden van uw favoriete automatiseringstool om naar deze URL's te navigeren.

Een pop-upvenster van een extensie testen

Bij sommige bibliotheken kun je de pop-up openen met de action.openPopup() API en vervolgens een verwijzing naar de nieuwe context verkrijgen. Puppeteer beschrijft bijvoorbeeld hoe dit werkt in hun Chrome Extensions-handleiding .

Als dit niet mogelijk is in de bibliotheek van uw keuze, open dan de URL van de pop-up in een nieuw tabblad. Als uw pop-up het actieve tabblad gebruikt, overweeg dan een override te implementeren waarbij een tabblad-ID expliciet aan uw pop-up kan worden doorgegeven. Bijvoorbeeld:

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];
}

Inspectie van de extensiestatus

Om te voorkomen dat tests mislukken wanneer u het interne gedrag van uw extensie wijzigt, is het over het algemeen het beste om in een integratietest geen toegang te krijgen tot de interne status. Baseer uw tests in plaats daarvan op wat zichtbaar is voor de gebruiker. Soms kan het echter wenselijk zijn om rechtstreeks toegang te krijgen tot gegevens van de extensie. Overweeg in die gevallen om code uit te voeren in de context van een extensiepagina.

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

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

Ontslag van testmedewerker

Voor meer informatie over het testen van het beëindigen van service workers, zie het artikel 'Het beëindigen van service workers testen met Puppeteer' . We hebben ook een voorbeeld voor Puppeteer en Selenium.

Houd er rekening mee dat bij sommige testframeworks service workers mogelijk niet automatisch worden beëindigd zoals bij normaal gebruik. Dit is bijvoorbeeld het geval bij Selenium. Het framework is afhankelijk van ChromeDriver, dat een debugger koppelt aan alle service workers, waardoor ze niet kunnen worden gestopt.