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 un utente seguirebbe. 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 attuale di qualsiasi pagina aperta.

Consulta Testare le estensioni di Chrome con Puppeteer per un tutorial e Test unitari per informazioni dettagliate sulla scrittura di test unitari per le estensioni di Chrome.

Utilizzo delle librerie di test del browser

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

Esecuzione di test in Chrome senza interfaccia grafica

Quando esegui test nell'ambito di un flusso di lavoro automatizzato, spesso è necessario caricare l'estensione su una macchina senza schermo. La nuova modalità headless di Chrome consente di eseguire Chrome in un ambiente automatico come questo. Avvia Chrome utilizzando il flag --headless=new (attualmente headless è impostato su "old" per impostazione predefinita, il che non supporta il caricamento delle estensioni). A seconda dello strumento di automazione che scegli, potrebbe essere presente un'impostazione che aggiunge automaticamente il flag.

Impostazione di un ID estensione

Spesso è preferibile avere un ID estensione fisso nei test. In questo modo, molte attività comuni sono più semplici, ad esempio l'inserimento nell'elenco consentito dell'origine dell'estensione su un server con cui deve comunicare o l'apertura delle pagine delle estensioni nei test. Per farlo, segui i passaggi descritti in Mantenere un ID estensione coerente.

Testare le pagine delle estensioni

È possibile accedere alle pagine delle estensioni utilizzando l'URL corrispondente, ad esempio chrome-extension://<id>/index.html. Utilizza i normali metodi di navigazione disponibili nello strumento di automazione che preferisci per accedere a questi URL.

Test di un popup dell'estensione

Con alcune librerie, potresti essere in grado di aprire il popup utilizzando l'API action.openPopup() e poi ottenere un riferimento al nuovo contesto. Puppeteer, ad esempio, documenta come farlo nella guida alle estensioni di Chrome.

Se non è possibile nella tua libreria preferita, apri l'URL del popup in una nuova scheda. Se il popup utilizza la scheda attiva, valuta la possibilità di implementare un override in cui un ID scheda può essere passato in modo esplicito 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 await chrome.tabs.get(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 di test quando modifichi il comportamento interno dell'estensione, in genere è consigliabile evitare di accedere allo stato interno in un test di integrazione. Devi invece basare i test su ciò che è visibile all'utente. Tuttavia, a volte può essere utile accedere direttamente ai dati dall'estensione. In questi casi, valuta la possibilità di eseguire il codice nel contesto di una pagina di 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);'
);

Test dell'interruzione del service worker

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

Tieni presente che quando utilizzi alcuni framework di test, i service worker potrebbero non terminare automaticamente come farebbero in condizioni di utilizzo normali. Questo è il caso di Selenium. Si basa su ChromeDriver, che collega un debugger a tutti i service worker impedendone l'arresto.