Tarayıcı Yapılandırma Referansı

Tarayıcı yapılandırmasını, yapılandırma dosyanızda test.browser alanını güncelleyerek değiştirebilirsiniz. Basit bir yapılandırma dosyası örneği:

import { defineConfig } from 'vitest/config';

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

Farklı yapılandırma örnekleri için lütfen "Yapılandırma Referansı" makalesini inceleyin.

WARNING

Bu sayfada listelenen tüm seçenekler yapılandırma içindeki bir test özelliği içinde yer alır:

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

browser.enabled

• Tip: boolean
• Varsayılan: false
• CLI: --browser, --browser.enabled=false

Tüm testler varsayılan olarak bir tarayıcı içinde çalıştırılır. --browser seçeneğinin yalnızca en az bir browser.instances öğeniz varsa çalıştığını unutmayın.

browser.instances

• Tip: BrowserConfig
• Varsayılan: [{ browser: name }]

Birden fazla tarayıcı kurulumunu tanımlar. Her yapılandırmanın en az bir browser alanı içermesi gerekir. Yapılandırma, sağlayıcı yapılandırmalarını destekler:

• Playwright Yapılandırma
• WebdriverIO Yapılandırma

TIP

Yerleşik sağlayıcıları kullanırken daha iyi tip güvenliği sağlamak için, yapılandırma dosyanızda (kullandığınız sağlayıcıya göre) bu tiplerden birine referans vermelisiniz:

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

Buna ek olarak, proje seçeneklerinin çoğunu (* simgesiyle işaretlenmemiş olanlar) ve browser.testerHtmlPath gibi bazı browser seçeneklerini de belirtebilirsiniz.

WARNING

Her tarayıcı yapılandırması, seçenekleri kök yapılandırmadan devralır:

export default defineConfig({
  test: {
    setupFile: ['./root-setup-file.js'],
    browser: {
      enabled: true,
      testerHtmlPath: './custom-path.html',
      instances: [
        {
          // hem "root" hem de "browser" kurulum dosyalarına sahip olacak
          setupFile: ['./browser-setup-file.js'],
          // kök yapılandırmadan "testerHtmlPath" değerini örtük olarak alır
          // testerHtmlPath: './custom-path.html',
        },
      ],
    },
  },
})

Geliştirme sırasında Vitest, yalnızca bir başsız modda olmayan yapılandırmayı destekler. Görsel arayüzlü projeyi (başsız modda çalışmayan projeyi), yapılandırmada headless: false belirterek veya --browser.headless=false bayrağını sağlayarak veya --project=chromium bayrağıyla projeleri filtreleyerek kendiniz sınırlayabilirsiniz.

Daha fazla örnek için "Çoklu Kurulumlar" kılavuzuna bakın.

Mevcut browser seçeneklerinin listesi:

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

Varsayılan olarak, Vitest, browser.name alanını browser olarak kullanarak tek bir öğe içeren bir dizi oluşturur. Bu davranışın Vitest 4 ile kaldırılacağını unutmayın.

Vitest, arka planda bu örnekleri, daha iyi önbellekleme performansı için tek bir Vite sunucusunu paylaşan ayrı test projelerine dönüştürür.

browser.name kullanımdan kaldırıldı

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

KULLANIMDAN KALDIRILDI

Bu API kullanımdan kaldırılmıştır ve Vitest 4'te kaldırılacak. Lütfen bunun yerine browser.instances seçeneğini kullanın.

Tüm testleri belirli bir tarayıcıda çalıştırın. Farklı sağlayıcılardaki olası seçenekler:

• webdriverio: firefox, chrome, edge, safari
• playwright: firefox, webkit, chromium
• özel: sağlayıcıya iletilecek herhangi bir dize

browser.headless

• Tip: boolean
• Varsayılan: process.env.CI
• CLI: --browser.headless, --browser.headless=false

Tarayıcı headless modunda çalıştırılır. Vitest'i CI'da çalıştırıyorsanız, varsayılan olarak etkinleştirilecektir.

browser.isolate

• Tip: boolean
• Varsayılan: true
• CLI: --browser.isolate, --browser.isolate=false

Her test ayrı bir iframe'de çalıştırılır.

browser.testerHtmlPath

• Tip: string

HTML giriş noktasına giden bir yol. Projenin köküne göreceli olabilir. Bu dosya transformIndexHtml kancasıyla işlenecektir.

browser.api

• Tip: number | { port?, strictPort?, host? }
• Varsayılan: 63315
• CLI: --browser.api=63315, --browser.api.port=1234, --browser.api.host=example.com

Tarayıcıda kod sunan Vite sunucusu için seçenekler yapılandırılır. test.api seçeneğini etkilemez. Varsayılan olarak, Vitest, geliştirme sunucusuyla çakışmaları önlemek için 63315 numaralı bağlantı noktasını atar ve her ikisini de paralel çalıştırmanıza olanak tanır.

browser.provider

• Tip: 'webdriverio' | 'playwright' | 'preview' | string
• Varsayılan: 'preview'
• CLI: --browser.provider=playwright

Tarayıcı testleri çalıştırılırken kullanılacak sağlayıcının yolu. Vitest, preview (varsayılan), webdriverio ve playwright olmak üzere üç sağlayıcı sunar. Özel sağlayıcılar default dışa aktarma kullanılarak dışa aktarılmalı ve şu şekilde olmalıdır:

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

GELİŞMİŞ API

Özel sağlayıcı API'si oldukça deneyseldir ve yamalar arasında değişebilir. Yalnızca bir tarayıcıda test çalıştırmanız gerekiyorsa, bunun yerine browser.instances seçeneğini kullanın.

browser.providerOptions kullanımdan kaldırıldı

• Tip: BrowserProviderOptions

KULLANIMDAN KALDIRILDI

Bu API kullanımdan kaldırılmıştır ve Vitest 4'te kaldırılacak. Lütfen bunun yerine browser.instances seçeneğini kullanın.

provider.initialize çağrılırken sağlayıcıya iletilecek seçenekler.

import { defineConfig } from 'vitest/config';

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

TIP

Yerleşik sağlayıcıları kullanırken daha iyi tip güvenliği sağlamak için, yapılandırma dosyanızda bu tiplerden birine (kullandığınız sağlayıcı için) başvurmalısınız:

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

browser.ui

• Tip: boolean
• Varsayılan: !isCI
• CLI: --browser.ui=false

Vitest UI'ın sayfaya enjekte edilip edilmeyeceği. Varsayılan olarak, geliştirme sırasında UI iframe'i enjekte edilir.

browser.viewport

• Tip: { width, height }
• Varsayılan: 414x896

Varsayılan iframe'in görüntü alanı.

browser.locators

Yerleşik tarayıcı bulucuları için seçenekler.

browser.locators.testIdAttribute

• Tip: string
• Varsayılan: data-testid

getByTestId bulucusuyla öğeleri bulmak için kullanılan öznitelik.

browser.screenshotDirectory

• Tip: string
• Varsayılan: Test dosyası dizinindeki __screenshots__

Ekran görüntüleri dizininin root'a göre yolu.

browser.screenshotFailures

• Tip: boolean
• Varsayılan: !browser.ui

Test başarısız olursa Vitest'in ekran görüntüsü alıp almayacağı.

browser.orchestratorScripts

• Tip: BrowserScript[]
• Varsayılan: []

Test iframe'leri başlatılmadan önce düzenleyici HTML'ye enjekte edilmesi gereken özel komut dosyaları. Bu HTML belgesi yalnızca iframe'leri kurar ve kodunuzu gerçekten içe aktarmaz.

Komut dosyasının src ve content özellikleri Vite eklentileri tarafından işlenecektir. Komut dosyası aşağıdaki şekilde sağlanmalıdır:

export interface BrowserScript {
  /**
   * "content" sağlanırsa ve tür "module" ise, bu onun tanımlayıcısı olacaktır.
   *
   * TypeScript kullanıyorsanız, buraya örneğin `.ts` uzantısını ekleyebilirsiniz.
   * @default `injected-${index}.js`
   */
  id?: string;
  /**
   * Enjekte edilecek JavaScript içeriği. Bu dize, tür "module" ise Vite eklentileri tarafından işlenir.
   *
   * Vite'a dosya uzantısı hakkında bir ipucu vermek için `id` kullanabilirsiniz.
   */
  content?: string;
  /**
   * Komut dosyasına giden yol. Bu değer Vite tarafından çözülür, bu nedenle bir düğüm modülü veya bir dosya yolu olabilir.
   */
  src?: string;
  /**
   * Komut dosyasının eşzamansız olarak yüklenip yüklenmeyeceği.
   */
  async?: boolean;
  /**
   * Komut dosyası türü.
   * @default 'module'
   */
  type?: string;
}

browser.testerScripts

• Tip: BrowserScript[]
• Varsayılan: []

KULLANIMDAN KALDIRILDI

Bu API kullanımdan kaldırılmıştır ve Vitest 4'te kaldırılacak. Lütfen bunun yerine browser.testerHtmlPath alanını kullanın.

Test ortamı başlatılmadan önce test HTML'sine enjekte edilecek özel komut dosyaları. Bu, Vitest tarayıcı uygulaması için gerekli polyfill'leri enjekte etmek için kullanışlıdır. Çoğu durumda bunun yerine setupFiles kullanılması önerilir.

Komut dosyası src ve content Vite eklentileri tarafından işlenecektir.

browser.commands

• Tip: Record<string, BrowserCommand>
• Varsayılan: { readFile, writeFile, ... }

Tarayıcı testleri sırasında @vitest/browser/commands'dan içe aktarılabilen özel komutlar.

browser.connectTimeout

• Tip: number
• Varsayılan: 60_000

Milisaniye olarak zaman aşımı. Tarayıcıya bağlantı daha uzun sürerse, test paketi başarısız olur.

INFO

Bu, tarayıcının Vitest sunucusuyla WebSocket bağlantısını kurması gereken süreyi ifade eder. Normal koşullarda, bu zaman aşımına asla ulaşılmamalıdır.