Test end-to-end delle estensioni di Chrome

Il test end-to-end prevede la creazione e il caricamento di un pacchetto di estensioni in un browser. Uno strumento di test comunica con il browser per automatizzare le interazioni e testare gli stessi flussi che seguirebbe un utente. Una libreria che supporta i test end-to-end in genere fornisce modi per controllare il browser, simulare l'input dell'utente e osservare lo stato corrente di eventuali pagine aperte.

Per un tutorial, consulta Testare le estensioni di Chrome con Puppeteer e per informazioni dettagliate su come scrivere test di unità per le estensioni di Chrome, consulta Test di unità.

Utilizzo delle librerie di test del browser

Le estensioni sono supportate da una serie di librerie di test.

Eseguire test in Chrome headless

Quando si eseguono test nell'ambito di un flusso di lavoro automatizzato, spesso è necessario caricare l'estensione su un computer che non ha uno schermo. La nuova modalità headless di Chrome consente di eseguire Chrome in un ambiente senza supervisione come questo. Avvia Chrome utilizzando il flag --headless=new (al momento il valore predefinito di headless è "old", che non supporta il caricamento delle estensioni). A seconda dello strumento di automazione scelto, potrebbe essere presente un'impostazione che aggiunge automaticamente il flag.

Impostare un ID estensione

Spesso è preferibile avere un ID estensione fisso nei test. In questo modo, è più facile eseguire molte attività comuni, come inserire l'origine dell'estensione nella lista consentita di un server con cui deve comunicare o aprire le pagine dell'estensione all'interno dei test. Per farlo, segui la procedura descritta in Mantenere un ID estensione coerente.

Test delle pagine delle estensioni

Puoi accedere alle pagine delle estensioni utilizzando il relativo URL, ad esempio chrome-extension://<id>/index.html. Per accedere a questi URL, utilizza i normali metodi di navigazione disponibili nello strumento di automazione che preferisci.

Testare un popup dell'estensione

Al momento non è possibile aprire un popup di estensione nel contesto di un'altra pagina. Apri invece l'URL del popup in una nuova scheda. Se il popup utilizza la scheda attiva, ti consigliamo di implementare un'override in cui un ID scheda possa essere passato esplicitamente al popup. Ad esempio:

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

Ispezione dello stato dell'estensione

Per evitare errori del test quando modifichi il comportamento interno dell'estensione, in genere è una best practice evitare di accedere allo stato interno in un test di integrazione. ma basarli su ciò che è visibile all'utente. Tuttavia, a volte può essere opportuno accedere direttamente ai dati dall'estensione. In questi casi, valuta la possibilità di eseguire il codice nel contesto della pagina di un'estensione.

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

Testare l'interruzione del service worker

Per scoprire di più sul test della terminazione dei worker di servizio, consulta Testare la terminazione dei worker di servizio con Puppeteer. Abbiamo anche un esempio per Puppeteer e Selenium.

Tieni presente che, quando utilizzi alcuni framework di test, i service worker potrebbero non arrestarsi automaticamente come farebbero nel normale utilizzo. Questo è il caso di Selenium. Si basa su ChromeDriver che collega un debugger a tutti i worker di servizio impedendone l'interruzione.