Režim prohlížeče experimentální

Tato stránka poskytuje informace o experimentální funkci režimu prohlížeče ve Vitest API, která umožňuje spouštět testy přímo v prohlížeči a poskytuje přístup ke globálním proměnným prohlížeče, jako jsou window a document. Tato funkce je momentálně ve vývoji a API se mohou v budoucnu změnit.

Kompatibilita prohlížeče

Vitest používá vývojový server Vite ke spouštění vašich testů, takže podporujeme pouze funkce zadané v možnosti esbuild.target (ve výchozím nastavení esnext).

Ve výchozím nastavení Vite cílí na prohlížeče, které podporují nativní ES moduly, nativní dynamický import ESM a import.meta. Kromě toho používáme BroadcastChannel pro komunikaci mezi iFrames:

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

Motivace

Režim prohlížeče ve Vitest jsme vyvinuli s cílem zlepšit testovací pracovní postupy a dosáhnout přesnějších a spolehlivějších výsledků testů. Tento experimentální doplněk k našemu testovacímu API umožňuje vývojářům spouštět testy v nativním prostředí prohlížeče. V této části prozkoumáme motivace, které stojí za touto funkcí, a její výhody pro testování.

Různé přístupy k testování

Existuje několik způsobů, jak testovat JavaScriptový kód. Některé testovací frameworky simulují prostředí prohlížeče v Node.js, zatímco jiné spouštějí testy ve skutečných prohlížečích. V tomto kontextu je jsdom příkladem implementace standardu, která simuluje prostředí prohlížeče, když se používá s test runnerem, jako je Jest nebo Vitest. Jiné testovací nástroje, jako je WebdriverIO nebo Cypress, umožňují vývojářům testovat své aplikace ve skutečném prohlížeči, zatímco Playwright poskytuje engine prohlížeče.

Omezení simulace prostředí

Testování JavaScriptových programů v simulovaných prostředích, jako je jsdom nebo happy-dom, zjednodušilo nastavení testů a nabídlo snadno použitelné API, díky čemuž jsou vhodné pro mnoho projektů a zvyšují důvěru ve výsledky testů. Je však klíčové mít na paměti, že tyto nástroje pouze simulují prostředí prohlížeče, a nikoli skutečný prohlížeč, což může vést k určitým nesrovnalostem mezi simulovaným prostředím a skutečným prostředím. Proto mohou nastat falešně pozitivní nebo falešně negativní výsledky testů.

Pro dosažení maximální důvěry v naše testy je zásadní testovat ve skutečném prostředí prohlížeče. Proto jsme vyvinuli funkci režimu prohlížeče ve Vitest, která umožňuje vývojářům spouštět testy nativně v prohlížeči a získat přesnější a spolehlivější výsledky testů. S testováním na úrovni prohlížeče si mohou být vývojáři jistější, že jejich aplikace bude fungovat podle očekávání v reálných scénářích.

Nevýhody

Při používání režimu prohlížeče ve Vitest je důležité vzít v úvahu následující nevýhody:

Raná fáze vývoje

Funkce režimu prohlížeče ve Vitest je stále v rané fázi vývoje. Proto nemusí být ještě plně optimalizovaná a mohou se vyskytnout chyby nebo problémy, které dosud nebyly odstraněny. Doporučuje se uživatelům doplnit testování v prohlížeči Vitest o samostatný test runner na straně prohlížeče, jako je WebdriverIO, Cypress nebo Playwright.

Delší inicializace

Režim prohlížeče ve Vitest vyžaduje spuštění provideru a prohlížeče během procesu inicializace, což může nějakou dobu trvat. To může vést k delší době inicializace ve srovnání s jinými testovacími postupy.

Konfigurace

Pro aktivaci režimu prohlížeče ve vaší konfiguraci Vitest můžete použít příznak --browser nebo nastavit pole browser.enabled na true ve vašem konfiguračním souboru Vitest. Zde je příklad konfigurace pomocí pole browser:

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      name: 'chrome', // název prohlížeče je vyžadován
    },
  },
});

Typy možností prohlížeče:

Typ prohlížeče ve Vitest závisí na poskytovateli. Vitest selže, pokud použijete --browser a nezadáte jeho název v konfiguračním souboru. Dostupné možnosti:

• webdriverio (výchozí) podporuje tyto prohlížeče:
  • firefox
  • chrome
  • edge
  • safari
• playwright podporuje tyto prohlížeče:
  • firefox
  • webkit
  • chromium

Cross-browser testování:

Pokud zadáte název prohlížeče v nastavení prohlížeče, Vitest se pokusí spustit zadaný prohlížeč pomocí WebdriverIO ve výchozím nastavení a poté v něm spustit testy. Tato funkce usnadňuje používání a konfiguraci cross-browser testování v prostředích, jako je CI. Pokud nechcete používat WebdriverIO, můžete nakonfigurovat vlastního poskytovatele prohlížeče pomocí možnosti browser.provider.

Chcete-li zadat prohlížeč pomocí CLI, použijte příznak --browser následovaný názvem prohlížeče, například takto:

npx vitest --browser=chrome

Nebo můžete poskytnout možnosti prohlížeče do CLI s tečkovou notací:

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

POZNÁMKA

Při použití prohlížeče Safari s WebdriverIO je třeba aktivovat safaridriver spuštěním sudo safaridriver --enable na vašem zařízení.

Kromě toho se Vitest při spouštění testů pokusí nainstalovat některé ovladače/drivery pro kompatibilitu s safaridriver.

Headless režim

Headless režim je další možností, která je k dispozici v režimu prohlížeče. V headless režimu běží prohlížeč na pozadí bez uživatelského rozhraní, což je užitečné pro automatizované testování. Možnost headless ve Vitest lze nastavit na logickou hodnotu pro povolení nebo zakázání headless režimu.

Zde je příklad konfigurace povolující headless režim:

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

Bezhlavý režim můžete také nastavit pomocí příznaku --browser.headless v CLI, například takto:

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

V tomto případě bude Vitest spuštěn v headless režimu pomocí prohlížeče Chrome.

Omezení

Dialogová okna blokující vlákno aplikace

Při používání režimu prohlížeče ve Vitest je důležité mít na paměti, že dialogová okna blokující vlákna, jako je alert nebo confirm, nelze používat nativně. Je to proto, že blokují webovou stránku, a Vitest tak nemůže pokračovat v komunikaci se stránkou, což způsobí zablokování provádění.

V takových situacích poskytuje Vitest výchozí mocky s výchozími návratovými hodnotami pro tato API. To zajišťuje, že pokud uživatel omylem použije synchronní popup webové API, provádění se nezablokuje. Pro lepší uživatelskou zkušenost se však stále doporučuje tato webová API mockovat. Přečtěte si více v Mockování.