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 dovrebbe seguire. Una libreria che supporta i test end-to-end in genere fornisce modi per controllare il browser, simulando l'input utente e osservando lo stato attuale di qualsiasi pagina aperta.

Consulta Test delle estensioni di Chrome con Puppeteer per un tutorial e Test delle unità per informazioni dettagliate su come scrivere test delle unità per le estensioni di Chrome.

Utilizzo delle librerie di test del browser

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

Raccolta	Consulenza
Burattinaio / Sceneggiatore	Vedi Estensioni di Chrome (Puppeteer / Playwright).
Selenio	Utilizza l'oggetto ChromeOptions per caricare le estensioni. Ulteriori informazioni sono disponibili qui.
WebDriverIO	Consulta Test delle estensioni web.

Esecuzione di test in Chrome headless

Quando esegui dei test come parte di un flusso di lavoro automatizzato, spesso è necessario caricare l'estensione su una macchina che non dispone di una schermata. La nuova modalità headless di Chrome ne consente l'esecuzione in un ambiente automatico come questo. Avvia Chrome utilizzando il flag --headless=new (l'impostazione predefinita al momento headless è "old", che non supporta il caricamento delle estensioni). A seconda dello strumento di automazione che scegli, potrebbe essere disponibile un'impostazione che aggiunge automaticamente il flag.

Impostare un ID estensione

Spesso è auspicabile avere un ID estensione fisso nei test. Questo semplifica molte attività comuni, come l'inserimento nell'elenco dell'origine dell'estensione su un server con cui deve comunicare o l'apertura di pagine delle estensioni all'interno dei test. A questo scopo, segui i passaggi descritti in Mantenere un ID estensione coerente.

Test delle 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 preferito per accedere a questi URL.

Test del popup di un'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, considera l'implementazione di un override in cui l'ID scheda può 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 dei test quando modifichi il comportamento interno dell'estensione, è generalmente una best practice evitare di accedere allo stato interno in un test di integrazione. Dovresti 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 selenio:

// 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 della terminazione del service worker

Per informazioni sui test della terminazione dei service worker, consulta Test della terminazione dei Service worker con Puppeteer. È disponibile anche un campione per Puppeteer e Selenium.

Tieni presente che quando utilizzi alcuni framework di test, i service worker potrebbero non essere arrestati automaticamente come farebbero nel normale utilizzo. Questo è il caso del Selenium. Si basa su ChromeDriver, che collega un debugger a tutti i Service worker per impedirne l'arresto.