Odkaz na konfiguraci prohlížeče

Konfiguraci prohlížeče můžete upravit aktualizací pole test.browser ve vašem konfiguračním souboru. Příklad základního konfiguračního souboru:

import { defineConfig } from 'vitest/config';

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

Další příklady konfigurace naleznete v článku "Config Reference".

WARNING

Všechny možnosti uvedené na této stránce se nacházejí uvnitř vlastnosti test v konfiguraci:

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

browser.enabled

• Typ: boolean
• Výchozí: false
• CLI: --browser, --browser.enabled=false

Ve výchozím nastavení spouští všechny testy v prohlížeči. Upozorňujeme, že --browser funguje pouze v případě, že máte alespoň jednu položku v browser.instances.

browser.instances

• Typ: BrowserConfig
• Výchozí: [{ browser: name }]

Definuje více konfigurací prohlížeče. Každá konfigurace musí mít definované alespoň pole browser. Konfigurace podporuje nastavení pro vaše poskytovatele:

• Konfigurace Playwright
• Konfigurace WebdriverIO

TIP

Pro lepší typovou bezpečnost při používání vestavěných poskytovatelů byste měli ve svém konfiguračním souboru odkazovat na jeden z těchto typů (podle použitého poskytovatele):

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

Kromě toho můžete také specifikovat většinu možností projektu (které nejsou označeny ikonou *) a některé z možností browser, jako je browser.testerHtmlPath.

WARNING

Každá konfigurace prohlížeče dědí možnosti z hlavní konfigurace:

export default defineConfig({
  test: {
    setupFile: ['./root-setup-file.js'],
    browser: {
      enabled: true,
      testerHtmlPath: './custom-path.html',
      instances: [
        {
          // bude mít oba soubory pro nastavení: "root" a "browser"
          setupFile: ['./browser-setup-file.js'],
          // implicitně zdědí "testerHtmlPath" z kořenové konfigurace
          // testerHtmlPath: './custom-path.html',
        },
      ],
    },
  },
})

Během vývoje Vitest podporuje pouze jednu nehlavičkovou konfiguraci. Projekt s hlavičkou můžete omezit sami zadáním headless: false v konfiguraci, poskytnutím příznaku --browser.headless=false, nebo filtrováním projektů pomocí příznaku --project=chromium.

Další příklady najdete v průvodci "Multiple Setups".

Seznam dostupných možností browser:

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

Ve výchozím nastavení Vitest vytvoří pole s jedním prvkem, který používá hodnotu pole browser.name jako název prohlížeče. Všimněte si, že toto chování bude odstraněno ve Vitest 4.

Vitest interně transformuje tyto instance do samostatných testovacích projektů sdílejících jeden Vite server pro lepší výkon mezipaměti.

browser.name zastaralé

• Typ: string
• CLI: --browser=safari

ZASTARALÉ

Toto API je zastaralé a bude odstraněno ve Vitest 4. Místo toho použijte možnost browser.instances.

Spustí všechny testy v konkrétním prohlížeči. Možné možnosti u různých poskytovatelů:

• webdriverio: firefox, chrome, edge, safari
• playwright: firefox, webkit, chromium
• vlastní: libovolný řetězec, který bude předán poskytovateli

browser.headless

• Typ: boolean
• Výchozí: process.env.CI
• CLI: --browser.headless, --browser.headless=false

Spouští prohlížeč v režimu headless (bez grafického rozhraní). Pokud spouštíte Vitest v CI, bude ve výchozím nastavení povolena.

browser.isolate

• Typ: boolean
• Výchozí: true
• CLI: --browser.isolate, --browser.isolate=false

Spouští každý test v samostatném iframe.

browser.testerHtmlPath

• Typ: string

Cesta k vstupnímu HTML souboru. Může být relativní k rootu projektu. Tento soubor bude zpracován transformIndexHtml hookem.

browser.api

• Typ: number | { port?, strictPort?, host? }
• Výchozí: 63315
• CLI: --browser.api=63315, --browser.api.port=1234, --browser.api.host=example.com

Konfigurace možností pro Vite server, který servíruje kód v prohlížeči. Neovlivňuje test.api. Ve výchozím nastavení Vitest přiřazuje port 63315, aby se zabránilo konfliktům s vývojovým serverem, což umožňuje paralelní spuštění obou.

browser.provider

• Typ: 'webdriverio' | 'playwright' | 'preview' | string
• Výchozí: 'preview'
• CLI: --browser.provider=playwright

Cesta k poskytovateli, který se použije při spouštění testů v prohlížeči. Vitest poskytuje tři poskytovatele, kterými jsou preview (výchozí), webdriverio a playwright. Vlastní poskytovatelé by měli být exportováni pomocí default exportu a mít tuto podobu:

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>;
}

POKROČILÉ API

API pro vlastní poskytovatele je vysoce experimentální a může se měnit mezi jednotlivými patchi. Pokud potřebujete pouze spouštět testy v prohlížeči, použijte místo toho možnost browser.instances.

browser.providerOptions zastaralé

• Typ: BrowserProviderOptions

ZASTARALÉ

Toto API je zastaralé a bude odstraněno ve Vitest 4. Místo toho použijte možnost browser.instances.

Možnosti, které budou předány poskytovateli při volání metody provider.initialize.

import { defineConfig } from 'vitest/config';

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

TIP

Pro lepší typovou bezpečnost při používání vestavěných poskytovatelů byste měli ve svém konfiguračním souboru odkazovat na jeden z těchto typů (podle použitého poskytovatele):

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

browser.ui

• Typ: boolean
• Výchozí: !isCI
• CLI: --browser.ui=false

Vitest UI by mělo být vloženo do stránky. Ve výchozím nastavení se UI iframe vkládá během vývoje.

browser.viewport

• Typ: { width, height }
• Výchozí: 414x896

Výchozí viewport pro iframe.

browser.locators

Možnosti pro vestavěné lokátory prohlížeče.

browser.locators.testIdAttribute

• Typ: string
• Výchozí: data-testid

Atribut používaný k nalezení prvků pomocí lokátoru getByTestId.

browser.screenshotDirectory

• Typ: string
• Výchozí: __screenshots__ v adresáři testovacího souboru

Cesta k adresáři snímků obrazovky relativně k hlavnímu adresáři.

browser.screenshotFailures

• Typ: boolean
• Výchozí: !browser.ui

Vitest by měl pořizovat snímky obrazovky, pokud test selže.

browser.orchestratorScripts

• Typ: BrowserScript[]
• Výchozí: []

Vlastní skripty, které se vkládají do HTML orchestrátoru před inicializací testovacích iframe. Tento HTML dokument pouze konfiguruje iframes a váš kód ve skutečnosti neimportuje.

src a content skriptu budou zpracovány Vite pluginy. Skript by měl být poskytnut v následujícím tvaru:

export interface BrowserScript {
  /**
   * Pokud je poskytnut "content" a typ je "module", bude to jeho identifikátor.
   *
   * Pokud používáte TypeScript, můžete zde například přidat příponu `.ts`.
   * @default `injected-${index}.js`
   */
  id?: string;
  /**
   * Obsah JavaScriptu, který má být vložen. Tento řetězec je zpracován Vite pluginy, pokud je typ "module".
   *
   * Můžete použít `id` k poskytnutí nápovědy Vite ohledně přípony souboru.
   */
  content?: string;
  /**
   * Cesta ke skriptu. Tato hodnota je Vite rozpoznána, takže to může být node modul nebo cesta k souboru.
   */
  src?: string;
  /**
   * Zda by měl být skript načten asynchronně.
   */
  async?: boolean;
  /**
   * Typ skriptu.
   * @default 'module'
   */
  type?: string;
}

browser.testerScripts

• Typ: BrowserScript[]
• Výchozí: []

ZASTARALÉ

Toto API je zastaralé a bude odstraněno ve Vitest 4. Místo toho použijte pole browser.testerHtmlPath.

Vlastní skripty, které se vkládají do HTML testeru před inicializací testovacího prostředí. To je užitečné pro vložení polyfillů, které jsou vyžadovány pro implementaci Vitest v prohlížeči. Téměř ve všech případech se doporučuje použít setupFiles namísto této možnosti.

src a content skriptu budou zpracovány Vite pluginy.

browser.commands

• Typ: Record<string, BrowserCommand>
• Výchozí: { readFile, writeFile, ... }

Vlastní příkazy, které lze importovat během testování v prohlížeči z modulu @vitest/browser/commands.

browser.connectTimeout

• Typ: number
• Výchozí: 60_000

Časový limit v milisekundách. Jestliže připojení k prohlížeči trvá déle, testovací sada selže.

INFO

Toto je čas, který by měl prohlížeč potřebovat k navázání WebSocket připojení se serverem Vitest. Za normálních okolností by tento časový limit neměl být nikdy překročen.