Modalità Browser sperimentale

Questa pagina illustra la funzionalità sperimentale della modalità browser nell'API di Vitest, che consente di eseguire i test direttamente nel browser, fornendo accesso a oggetti globali del browser come window e document. Questa funzionalità è attualmente in fase di sviluppo e le API potrebbero subire modifiche in futuro.

Compatibilità del browser

Vitest utilizza Vite dev server per eseguire i tuoi test, quindi supportiamo solo le funzionalità specificate nell'opzione esbuild.target (predefinito esnext).

Per impostazione predefinita, Vite punta ai browser che supportano ES Modules nativi, l'importazione dinamica ESM nativa e import.meta. Inoltre, utilizziamo BroadcastChannel per comunicare tra gli iframe:

• Chrome >=87
• Firefox >=78
• Safari >=15.4
• Edge >=88

Motivazione

Abbiamo sviluppato la modalità browser di Vitest per migliorare i flussi di lavoro di test e ottenere risultati più accurati e affidabili. Questa aggiunta sperimentale all'API di testing consente agli sviluppatori di eseguire test in un ambiente browser nativo. In questa sezione, analizzeremo le motivazioni e i vantaggi di questa funzionalità per il testing.

Approcci al Testing

Esistono diversi approcci per testare il codice JavaScript. Alcuni framework di testing simulano ambienti browser in Node.js, mentre altri eseguono test in browser reali. In questo contesto, jsdom è un'implementazione che simula un ambiente browser e può essere utilizzato con test runner come Jest o Vitest, mentre altri strumenti di testing come WebdriverIO o Cypress consentono agli sviluppatori di testare le proprie applicazioni in un browser reale o, nel caso di Playwright, forniscono un motore di rendering del browser.

Limiti della Simulazione

Testare codice JavaScript in ambienti simulati come jsdom o happy-dom semplifica la configurazione dei test e fornisce API facili da usare, rendendoli adatti a molti progetti e aumentando l'affidabilità dei risultati. Tuttavia, è fondamentale tenere presente che questi strumenti simulano solo un ambiente browser e non un browser reale, il che può comportare alcune discrepanze tra l'ambiente simulato e quello reale. Pertanto, possono verificarsi risultati falsi positivi o negativi.

Per avere la massima fiducia nei nostri test, è fondamentale testare in un browser reale. Per questo abbiamo sviluppato la modalità browser in Vitest, che permette agli sviluppatori di eseguire i test direttamente nel browser e ottenere risultati più accurati e affidabili. Con il test nel browser, gli sviluppatori possono essere più sicuri che la loro applicazione funzionerà come previsto in uno scenario reale.

Svantaggi

Quando si utilizza la modalità browser di Vitest, è importante considerare i seguenti svantaggi:

Fase di Sviluppo Iniziale

La modalità browser di Vitest è ancora in una fase iniziale di sviluppo. Pertanto, potrebbe non essere completamente ottimizzata e potrebbero esserci bug o problemi non ancora risolti. Si consiglia agli utenti di affiancare alla modalità browser di Vitest un test runner standalone lato browser come WebdriverIO, Cypress o Playwright.

Inizializzazione Più Lunga

La modalità browser di Vitest richiede l'avvio sia del provider che del browser durante l'inizializzazione, il che può richiedere tempo. Questo può portare a tempi di inizializzazione più lunghi rispetto ad altri approcci di test.

Configurazione

Per attivare la modalità browser nella configurazione di Vitest, si può usare il flag --browser o impostare browser.enabled su true nel file di configurazione. Ecco un esempio di configurazione che utilizza il campo browser:

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      name: 'chrome', // browser name is required
    },
  },
});

Browser Disponibili

L'opzione del browser in Vitest dipende dal provider. Vitest genererà un errore se si usa --browser senza specificare il suo nome nel file di configurazione. Opzioni disponibili:

• webdriverio (predefinito) supporta questi browser:
  • firefox
  • chrome
  • edge
  • safari
• playwright supporta questi browser:
  • firefox
  • webkit
  • chromium

Test su Più Browser

Quando si specifica un nome di browser nell'opzione browser, Vitest tenterà di eseguire il browser specificato utilizzando WebdriverIO per impostazione predefinita, e quindi eseguirà i test lì. Questa funzionalità rende il testing cross-browser facile da usare e da configurare in ambienti CI. Se non si vuole usare WebdriverIO, si può configurare un provider del browser personalizzato con l'opzione browser.provider.

Per specificare un browser dalla CLI (Command Line Interface), usare il flag --browser seguito dal nome del browser, ad esempio:

npx vitest --browser=chrome

Oppure, si possono fornire opzioni del browser alla CLI usando la notazione a punti:

npx vitest --browser.name=chrome --browser.headless

NOTE

Quando si utilizza l'opzione del browser Safari con WebdriverIO, è necessario attivare safaridriver eseguendo sudo safaridriver --enable sul proprio dispositivo.

Inoltre, durante l'esecuzione dei test, Vitest cercherà di installare i driver necessari per la compatibilità con safaridriver.

Headless (Senza Interfaccia Grafica)

La modalità headless è un'altra opzione disponibile nella modalità browser. In questa modalità, il browser viene eseguito in background senza interfaccia utente, rendendola utile per i test automatizzati. L'opzione headless in Vitest può essere impostata su un valore booleano per abilitare o disabilitare la modalità.

Ecco un esempio di configurazione che abilita la modalità headless:

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      headless: true,
    },
  },
});

Si può anche impostare la modalità headless con il flag --browser.headless nella CLI, ad esempio:

npx vitest --browser.name=chrome --browser.headless

In questo caso, Vitest verrà eseguito in modalità headless con Chrome.

Limitazioni

Dialoghi Bloccanti

Quando si usa la modalità browser di Vitest, è importante notare che i dialoghi che bloccano il thread, come alert o confirm, non possono essere usati nativamente. Questo perché bloccano la pagina web, impedendo a Vitest di comunicare con essa e bloccando l'esecuzione.

In questi casi, Vitest fornisce dei mock predefiniti con valori di ritorno predefiniti per queste API. Questo assicura che l'esecuzione non si blocchi se l'utente usa accidentalmente API web popup sincrone. Tuttavia, si consiglia comunque di mockare queste API web per un'esperienza migliore. Per maggiori informazioni, consultare Mocking.