Böngésző konfigurációs referencia

A böngésző konfigurációját a konfigurációs fájl test.browser mezőjének frissítésével módosíthatja. Íme egy példa egy egyszerű konfigurációs fájlra:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      provider: 'playwright',
      instances: [
        {
          browser: 'chromium',
          setupFile: './chromium-setup.js',
        },
      ],
    },
  },
});

Kérjük, nézze meg a "Konfigurációs referencia" cikket a különböző konfigurációs példákért.

WARNING

Az ezen az oldalon felsorolt összes opció a konfiguráción belüli test tulajdonságban található:

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

browser.enabled

• Típus: boolean
• Alapértelmezett: false
• CLI: --browser, --browser.enabled=false

Alapértelmezés szerint minden tesztet böngészőben futtat. Ne feledje, hogy a --browser csak akkor működik, ha legalább egy browser.instances elemmel rendelkezik.

browser.instances

• Típus: BrowserConfig
• Alapértelmezett: [{ browser: name }]

Több böngészőbeállítást határoz meg. Minden konfigurációnak legalább egy browser mezővel kell rendelkeznie. A konfiguráció támogatja a szolgáltatói konfigurációkat:

• Playwright konfigurálása
• WebdriverIO konfigurálása

TIP

A beépített szolgáltatók használatakor a jobb típusbiztonság érdekében az alábbi típusok egyikére (az Ön által használt szolgáltatóhoz) kell hivatkoznia a konfigurációs fájlban:

/// <reference types="@vitest/browser/providers/playwright" />
/// <reference types="@vitest/browser/providers/webdriverio" />

Ezen felül megadhatja a projektbeállítások többségét (amelyek nincsenek * ikonnal jelölve) és néhány browser opciót, mint például a browser.testerHtmlPath.

WARNING

Minden böngésző konfiguráció örökli a beállításokat a gyökér konfigurációból:

export default defineConfig({
  test: {
    setupFile: ['./root-setup-file.js'],
    browser: {
      enabled: true,
      testerHtmlPath: './custom-path.html',
      instances: [
        {
          // mindkét beállítási fájl meglesz: "root" és "browser"
          setupFile: ['./browser-setup-file.js'],
          // implicit módon örökli a "testerHtmlPath"-t a gyökér konfigurációból
          // testerHtmlPath: './custom-path.html',
        },
      ],
    },
  },
})

Fejlesztés közben a Vitest csak egy nem headless konfigurációt támogat. A headed projektet saját maga korlátozhatja a headless: false megadásával a konfigurációban, vagy a --browser.headless=false kapcsoló használatával, vagy a projektek szűrésével a --project=chromium kapcsoló segítségével.

További példákért lásd a "Több beállítás" útmutatót.

Elérhető browser opciók listája:

• browser.headless
• browser.locators
• browser.viewport
• browser.testerHtmlPath
• browser.screenshotDirectory
• browser.screenshotFailures

Alapértelmezés szerint a Vitest egy elemű tömböt hoz létre, amely a browser.name mezőt használja browser-ként. Vegye figyelembe, hogy ez a viselkedés a Vitest 4-gyel eltávolításra kerül.

A háttérben a Vitest ezeket a példányokat külön teszt projektekké alakítja, egyetlen Vite szervert használva a jobb gyorsítótárazási teljesítmény érdekében.

browser.name elavult

• Típus: string
• CLI: --browser=safari

ELAVULT

Ez az API elavult, és a Vitest 4-ben eltávolításra kerül. Kérjük, helyette a browser.instances opciót használja.

Minden tesztet egy adott böngészőben futtat. Lehetséges opciók különböző szolgáltatóknál:

• webdriverio: firefox, chrome, edge, safari
• egyéni: bármilyen string, amely a szolgáltatónak átadásra kerül
• custom: bármilyen string, amely átadásra kerül a provider-nek

browser.headless

• Típus: boolean
• Alapértelmezett: process.env.CI
• CLI: --browser.headless, --browser.headless=false

A böngésző futtatása headless módban. Ha a Vitest-et CI-ben futtatja, alapértelmezés szerint engedélyezve lesz.

browser.isolate

• Típus: boolean
• Alapértelmezett: true
• CLI: --browser.isolate, --browser.isolate=false

Minden teszt külön iframe-ben fut.

browser.testerHtmlPath

• Típus: string

A HTML induló pontjának elérési útja. Lehet relatív a projekt gyökeréhez képest. Ezt a fájlt a transformIndexHtml hook dolgozza fel.

browser.api

• Típus: number | { port?, strictPort?, host? }
• Alapértelmezett: 63315
• CLI: --browser.api=63315, --browser.api.port=1234, --browser.api.host=example.com

A böngészőben futó kódot kiszolgáló Vite szerver beállításainak konfigurálása. Nem befolyásolja a test.api opciót. Alapértelmezés szerint a Vitest a 63315 portot rendeli hozzá, hogy elkerülje a fejlesztői szerverrel való ütközéseket, lehetővé téve mindkettő párhuzamos futtatását.

browser.provider

• Típus: 'webdriverio' | 'playwright' | 'preview' | string
• Alapértelmezett: 'preview'
• CLI: --browser.provider=playwright

A szolgáltató elérési útja, amelyet a böngésző tesztek futtatásakor használni fog. A Vitest három szolgáltatót biztosít: preview (alapértelmezett), webdriverio és playwright. Az egyéni szolgáltatókat default exporttal kell exportálni, és az alábbi formát kell követniük:

export interface BrowserProvider {
  name: string;
  supportsParallelism: boolean;
  getSupportedBrowsers: () => readonly string[];
  beforeCommand?: (command: string, args: unknown[]) => Awaitable<void>;
  afterCommand?: (command: string, args: unknown[]) => Awaitable<void>;
  getCommandsContext: (sessionId: string) => Record<string, unknown>;
  openPage: (
    sessionId: string,
    url: string,
    beforeNavigate?: () => Promise<void>
  ) => Promise<void>;
  getCDPSession?: (sessionId: string) => Promise<CDPSession>;
  close: () => Awaitable<void>;
  initialize(
    ctx: TestProject,
    options: BrowserProviderInitializationOptions
  ): Awaitable<void>;
}

HALADÓ API

Az egyéni szolgáltató API nagyon kísérleti jellegű, és a javítások során változhat. Ha csak böngészőben kell teszteket futtatnia, inkább használja a browser.instances opciót.

browser.providerOptions elavult

• Típus: BrowserProviderOptions

ELAVULT

Ez az API elavult, és a Vitest 4-ben eltávolításra kerül. Kérjük, helyette a browser.instances opciót használja.

Azok az opciók, amelyek a provider.initialize hívásakor átadódnak a szolgáltatónak.

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    browser: {
      providerOptions: {
        launch: {
          devtools: true,
        },
      },
    },
  },
});

TIP

A beépített szolgáltatók használatakor a jobb típusbiztonság érdekében az alábbi típusok egyikére (az Ön által használt szolgáltatóhoz) kell hivatkoznia a konfigurációs fájlban:

/// <reference types="@vitest/browser/providers/playwright" />
/// <reference types="@vitest/browser/providers/webdriverio" />

browser.ui

• Típus: boolean
• Alapértelmezett: !isCI
• CLI: --browser.ui=false

Be kell-e illeszteni a Vitest UI-t az oldalba. Alapértelmezés szerint fejlesztés közben injektálja az UI iframe-et.

browser.viewport

• Típus: { width, height }
• Alapértelmezett: 414x896

Az iframe alapértelmezett megjelenítési területe.

browser.locators

Beépített böngésző lokátorok beállításai.

browser.locators.testIdAttribute

• Típus: string
• Alapértelmezett: data-testid

Az attribútum, amelyet a getByTestId lokátorral történő elemek keresésére használnak.

browser.screenshotDirectory

• Típus: string
• Alapértelmezett: __screenshots__ a tesztfájl könyvtárában

A képernyőképek könyvtárának elérési útja a root-hoz képest.

browser.screenshotFailures

• Típus: boolean
• Alapértelmezett: !browser.ui

Készítsen-e a Vitest képernyőképeket, ha a teszt sikertelen.

browser.orchestratorScripts

• Típus: BrowserScript[]
• Alapértelmezett: []

Egyéni szkriptek, amelyeket a vezérlő HTML-be kell injektálni a teszt iframe-ek inicializálása előtt. Ez a HTML dokumentum csak az iframe-eket állítja be, és valójában nem importálja a kódot.

A szkript src és content értékeit a Vite bővítmények dolgozzák fel. A szkriptet a következő formában kell megadni:

export interface BrowserScript {
  /**
   * Ha "content" meg van adva és a típus "module", ez lesz az azonosítója.
   *
   * Ha TypeScript-et használ, itt hozzáadhatja például a `.ts` kiterjesztést.
   * @default `injected-${index}.js`
   */
  id?: string;
  /**
   * Injektálandó JavaScript tartalom. Ezt a stringet a Vite bővítmények dolgozzák fel, ha a típus "module".
   *
   * Az `id` segítségével adhat tippet a Vite-nek a fájlkiterjesztésről.
   */
  content?: string;
  /**
   * A szkript elérési útja. Ezt az értéket a Vite feloldja, így lehet node modul vagy fájl elérési út.
   */
  src?: string;
  /**
   * Ha a szkriptet aszinkron módon kell betölteni.
   */
  async?: boolean;
  /**
   * Szkript típusa.
   * @default 'module'
   */
  type?: string;
}

browser.testerScripts

• Típus: BrowserScript[]
• Alapértelmezett: []

ELAVULT

Ez az API elavult, és a Vitest 4-ben eltávolításra kerül. Kérjük, helyette a browser.testerHtmlPath mezőt használja.

Egyéni szkriptek, amelyeket a tesztelő HTML-be kell injektálni a tesztkörnyezet inicializálása előtt. Ez hasznos a Vitest böngésző implementációjához szükséges polyfill-ek injektálásához. Szinte minden esetben a setupFiles használata javasolt ez helyett.

A szkript src és content értékeit a Vite bővítmények dolgozzák fel.

browser.commands

• Típus: Record<string, BrowserCommand>
• Alapértelmezett: { readFile, writeFile, ... }

Egyéni parancsok, amelyek a böngésző tesztek során importálhatók a @vitest/browser/commands modulból.

browser.connectTimeout

• Típus: number
• Alapértelmezett: 60_000

Az időtúllépés milliszekundumban. Ha a böngészőhöz való csatlakozás tovább tart, a tesztcsomag sikertelen lesz.

INFO

Ez az az idő, ameddig a böngészőnek létre kell hoznia a WebSocket kapcsolatot a Vitest szerverrel. Normál körülmények között ezt az időtúllépést soha nem szabad elérni.