Playwright Adapter

Use the Playwright adapter to launch Chromium, Firefox, or WebKit and capture screenshots.

Configuration

// visnap.config.ts|js
adapters: {
  browser: {
    name: "@visnap/playwright-adapter",
    options: {
      launch: { browser: 'chromium', headless: true },
      context: { colorScheme: 'light', reducedMotion: 'reduce' },
      // navigation: { 
      //   baseUrl: 'http://localhost:3000', 
      //   waitUntil: 'load', 
      //   timeoutMs: 30000,
      //   networkIdleFallbackDelayMs: 1000,
      //   networkIdleTimeoutDivisor: 10
      // },
      // screenshot: {
      //   waitForElementTimeoutMs: 2000  // Wait up to 2 seconds for element to appear
      // },
      // interaction: {
      //   defaultTimeoutMs: 5000,
      //   settleTimeMs: 100
      // },
      // injectCSS: '* { animation: none !important; transition: none !important; }',
      // performance: { blockResources: ['.map'], reuseContext: true, disableAnimations: true },
    }
  }
}

Options

Options are provided under adapters.browser.options.

`launch.browser`

Type: "chromium" | "firefox" | "webkit" | string
Required: No

Choose which browser to use for testing. Use chromium for fastest execution, firefox for cross-browser testing, or webkit for Safari compatibility.

`launch.headless`

Type: boolean
Default: true
Required: No

Headless mode runs faster and more reliably. Set to false only when you need to see the browser for debugging.

`launch.channel`

Type: string
Required: No

Use a specific browser channel like "chrome" or "msedge" instead of the default browser.

`context.colorScheme`

Type: "light" | "dark"
Required: No

Test your app in light or dark mode. Useful for components that change appearance based on user preferences.

`context.reducedMotion`

Type: "reduce" | "no-preference"
Required: No

Test accessibility features by emulating users who prefer reduced motion.

`context.storageStatePath`

Type: string
Required: No

Path to a saved login session. Use this to test authenticated pages without logging in each time.

`navigation.baseUrl`

Type: string
Required: No

Base URL for resolving relative paths in your test cases. Useful when testing multiple environments.

`navigation.waitUntil`

Type: "load" | "domcontentloaded" | "networkidle"
Required: No

When to consider a page fully loaded. Use networkidle for pages with lots of dynamic content.

`navigation.timeoutMs`

Type: number (>0)
Required: No

How long to wait for page navigation before timing out. Increase for slow-loading pages.

`navigation.networkIdleFallbackDelayMs`

Type: number (>0)
Default: 1000
Required: No

Fallback delay when networkidle state fails to be detected. Use this to fine-tune network idle detection behavior.

`navigation.networkIdleTimeoutDivisor`

Type: number (>0)
Default: 10
Required: No

Divisor used to calculate the fallback delay when network idle detection times out. Adjust this if you need more or less time during network idle fallback.

`screenshot.waitForElementTimeoutMs`

Type: number (>0)
Default: 2000
Required: No

Timeout for waiting for the screenshot target element to appear on the page before capturing the screenshot. Increase for slow-loading elements.

`interaction.defaultTimeoutMs`

Type: number (>0)
Default: 5000
Required: No

Default timeout for all interaction actions (clicks, fills, hovers, etc.). Individual interactions can override this with their own timeout.

`interaction.settleTimeMs`

Type: number (≥0)
Default: 100
Required: No

Wait time (in milliseconds) after interactions complete before capturing the screenshot. This ensures DOM updates and animations have settled.

`injectCSS`

Type: string
Required: No

Custom CSS to inject for stabilizing screenshots. See Screenshot Stabilization for examples.

`performance.blockResources`

Type: string[]
Required: No

Block specific resources to speed up testing. Use patterns like ['.map', 'analytics'] to block source maps or tracking scripts.

`performance.reuseContext`

Type: boolean
Required: No

Reuse browser sessions between tests for faster execution. May cause issues with tests that modify global state.

`performance.disableAnimations`

Type: boolean
Required: No

Disable CSS animations and transitions to prevent flaky tests from moving elements.

Performance Optimization

Browser Selection

Choose the right browser for your needs:

Chromium - Fastest execution, best for most testing
Firefox - Cross-browser compatibility testing
WebKit - Safari compatibility testing

Memory Management

For large test suites, consider these optimizations:

Use performance.reuseContext: true to reuse browser sessions
Block unnecessary resources with performance.blockResources
Lower runtime.maxConcurrency in your global config

Screenshot Stabilization

Prevent flaky tests with these techniques:

Disable animations globally:

injectCSS: `
  * { 
    animation: none !important; 
    transition: none !important; 
  }
`

Hide dynamic content:

injectCSS: `
  .timestamp { display: none !important; }
  .user-avatar { background: #ccc !important; }
  .loading-spinner { opacity: 0 !important; }
`

For detailed stabilization techniques, see Screenshot Stabilization.

On this page