Böngésző mód kísérleti

Ez az oldal a Vitest API kísérleti böngésző mód funkcióját mutatja be, amely lehetővé teszi a tesztek natív futtatását böngészőben, hozzáférést biztosítva a böngésző globális objektumaihoz, mint például a window és a document. Ez a funkció jelenleg fejlesztés alatt áll, ezért az API-k a jövőben változhatnak.

Böngészőkompatibilitás

A Vitest a Vite dev szervert használja a tesztek futtatásához, ezért csak az esbuild.target opcióban megadott funkciókat támogatjuk (alapértelmezés szerint esnext).

Alapértelmezés szerint a Vite olyan böngészőket céloz meg, amelyek támogatják a natív ES Modules, a natív ESM dinamikus importálást és az import.meta funkciókat. Ezen felül a BroadcastChannel segítségével kommunikálunk az iframe-ek között:

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

Motiváció

A Vitest böngésző mód célja a tesztelési munkafolyamatok javítása, valamint pontosabb és megbízhatóbb teszteredmények elérése. Ez a kísérleti kiegészítés lehetővé teszi a fejlesztők számára, hogy a teszteket natív böngészőkörnyezetben futtassák. Ebben a szakaszban megvizsgáljuk a funkció mögötti motivációkat és a tesztelésre gyakorolt előnyeit.

Tesztelési módszerek

Számos módon tesztelhetünk JavaScript kódot. Egyes tesztelési keretrendszerek böngészőkörnyezetet szimulálnak Node.js-ben, míg mások valódi böngészőkben futtatják a teszteket. Például a jsdom egy specifikációt implementáló könyvtár, amely böngészőkörnyezetet szimulál egy tesztfuttatóval (például Jest vagy Vitest) együtt használva. Más tesztelési eszközök, mint a WebdriverIO vagy a Cypress, lehetővé teszik az alkalmazások valódi böngészőben történő tesztelését, míg a Playwright egy böngészőmotort biztosít.

A szimuláció korlátai

A JavaScript programok szimulált környezetekben (például jsdom vagy happy-dom) történő tesztelése leegyszerűsíti a tesztelési folyamatot, és könnyen használható API-t biztosít, ami sok projektben használhatóvá teszi őket, és növeli a teszteredmények megbízhatóságát. Azonban fontos észben tartani, hogy ezek az eszközök csupán böngészőkörnyezetet szimulálnak, nem pedig egy valós böngészőt, ami eltérésekhez vezethet a szimulált és a valós környezet között. Ezért a teszteredményekben hamis pozitív vagy negatív eredmények fordulhatnak elő.

A tesztjeinkbe vetett legmagasabb szintű bizalom elérése érdekében elengedhetetlen a valódi böngészőkörnyezetben történő tesztelés. Ezért készült a Vitest böngésző mód, amely lehetővé teszi a fejlesztők számára, hogy a teszteket közvetlenül egy böngészőben futtassák, és pontosabb és megbízhatóbb teszteredményeket érjenek el. A böngészőszintű teszteléssel a fejlesztők biztosabbak lehetnek abban, hogy alkalmazásuk a valós helyzetekben is a kívánt módon fog működni.

Hátrányok

A Vitest böngésző mód használatakor fontos figyelembe venni a következő hátrányokat:

Korai fejlesztési fázis

A Vitest böngésző mód még fejlesztés alatt áll. Emiatt nem feltétlenül teljesen optimalizált, és előfordulhatnak benne hibák vagy problémák, amiket még nem javítottak ki. Javasoljuk, hogy használjon egy önálló böngészőoldali tesztfuttatót is, mint például a WebdriverIO, a Cypress vagy a Playwright.

Hosszabb inicializálás

A Vitest böngésző mód használata során a szolgáltatót és a böngészőt is el kell indítani az inicializálási folyamatban, ami időbe telhet. Ez hosszabb inicializálási időt eredményezhet más tesztelési módszerekhez képest.

Konfiguráció

A böngésző mód aktiválásához a Vitest konfigurációjában használhatja a --browser kapcsolót, vagy beállíthatja a browser.enabled mezőt true értékre a Vitest konfigurációs fájljában. Íme egy példa a browser mezőt használó konfigurációra:

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      name: 'chrome', // a böngésző neve kötelező
    },
  },
});

Böngésző opciók

A Vitest böngésző opciói a szolgáltatótól függenek. A Vitest hibát ad, ha a --browser paramétert megadja, de a böngésző nevét nem adja meg a konfigurációs fájlban. Elérhető opciók:

• A webdriverio (alapértelmezett) a következő böngészőket támogatja:
  • firefox
  • chrome
  • edge
  • safari
• A playwright a következő böngészőket támogatja:
  • firefox
  • webkit
  • chromium

Böngészők közötti tesztelés

Ha megad egy böngészőnevet a browser opcióban, a Vitest megpróbálja futtatni a megadott böngészőt a WebdriverIO segítségével (alapértelmezetten), majd ott futtatja a teszteket. Ez a funkció megkönnyíti a böngészők közötti tesztelést és konfigurálást olyan környezetekben, mint a CI (Folyamatos Integráció). Ha nem kívánja a WebdriverIO-t használni, a browser.provider opcióval egyéni böngészőszolgáltatót konfigurálhat.

Böngésző megadásához a CLI-ben használja a --browser kapcsolót, amelyet a böngésző neve követ, például így:

npx vitest --browser=chrome

Vagy megadhat böngésző opciókat a CLI-nek pont jelöléssel:

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

NOTE

A Safari böngésző opció WebdriverIO-val történő használatakor a safaridriver-t aktiválni kell a sudo safaridriver --enable futtatásával az eszközön.

Ezenkívül a tesztek futtatásakor a Vitest megpróbál telepíteni néhány illesztőprogramot a safaridriver-rel való kompatibilitás érdekében.

Headless (fej nélküli) mód

A Headless mód egy másik elérhető opció a böngésző módban. Headless módban a böngésző a háttérben fut képernyő nélkül, ami hasznossá teszi az automatizált tesztek futtatásához. A Vitest headless opciója logikai értékkel állítható be, amellyel a headless mód engedélyezhető vagy letiltható.

Íme egy példa a headless módot engedélyező konfigurációra:

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

A headless módot a --browser.headless kapcsolóval is beállíthatja a CLI-ben, például így:

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

Ebben az esetben a Vitest headless módban fog futni a Chrome böngésző használatával.

Korlátozások

Szálblokkoló párbeszédablakok

A Vitest böngésző mód használatakor fontos megjegyezni, hogy a szálblokkoló párbeszédablakok, mint például az alert vagy a confirm, nem használhatók natívan. Ennek oka, hogy blokkolják a weboldalt, így a Vitest nem tud tovább kommunikálni az oldallal, ami a végrehajtás megakadását eredményezi.

Ilyen helyzetekben a Vitest alapértelmezett helyettesítőket biztosít az alapértelmezett visszatérési értékekkel ezen API-khoz. Ez biztosítja, hogy ha a felhasználó véletlenül szinkron felugró webes API-kat használ, a végrehajtás ne fagyjon le. A jobb használhatóság érdekében azonban továbbra is ajánlott, hogy a felhasználó helyettesítse ezeket a webes API-kat. További információ a Mocking részben található.