Configuration Options

Configuration options for vitest-environment-web-ext

Basic Configuration

path

  • Type: string
  • Required: Yes

The path to the browser extension file or directory. Can be a .crx, .xpi file, or a directory containing the extension manifest.

vitest.config.ts
export default defineConfig({
  test: {
    environment: 'web-ext',
    environmentOptions: {
      'web-ext': {
        path: './dist',
      },
    },
  },
})

compiler

  • Type: string | false
  • Default: false

The build command to execute before running tests.

vitest.config.ts
export default defineConfig({
  test: {
    environment: 'web-ext',
    environmentOptions: {
      'web-ext': {
        path: './dist',
        compiler: 'npm run build',
      },
    },
  },
})

Set to false to disable compilation.

autoLaunch
Advanced

  • Type: boolean
  • Default: true

Whether to automatically load and launch the browser extension.

vitest.config.ts
export default defineConfig({
  test: {
    environment: 'web-ext',
    environmentOptions: {
      'web-ext': {
        path: './dist',
        autoLaunch: false,
      },
    },
  },
})

When set to false, you need to manually load the extension.

test/extension.test.ts
import { beforeAll, describe, expect, it } from 'vitest'

describe('browser extension test', () => {
  beforeAll(async () => {
    browser.loadExtension('./dist')
    await browser.launch()
  })

  it('popup should display correctly', async () => {
    const popupPage = await browser.getPopupPage()

    const title = await popupPage.title()
    expect(title).toBeTruthy()
  })
})

Playwright Configuration

playwright.slowMo

  • Type: number
  • Default: 100

Slows down Playwright operations by the specified milliseconds. Useful for debugging tests to observe operations more clearly.

vitest.config.ts
export default defineConfig({
  test: {
    environment: 'web-ext',
    environmentOptions: {
      'web-ext': {
        path: './dist',
        playwright: {
          slowMo: 500,
        },
      },
    },
  },
})

playwright.userDataDir

  • Type: string | boolean
  • Default: false

Browser user data directory cache path.

  • true: Use default path ./.vitest-web-ext-cache
  • string: Use custom path
  • false: Disable caching
vitest.config.ts
export default defineConfig({
  test: {
    environment: 'web-ext',
    environmentOptions: {
      'web-ext': {
        path: './dist',
        playwright: {
          userDataDir: './.vitest-cache',
        },
      },
    },
  },
})

Complete Example

vitest.config.ts
export default defineConfig({
  test: {
    environment: 'web-ext',
    environmentOptions: {
      'web-ext': {
        path: './dist',
        compiler: 'npm run build',
        autoLaunch: true,
        playwright: {
          slowMo: 100,
          userDataDir: true,
        },
      },
    },
  },
})
Edit this page
Quick Start
vitest-environment-web-ext is a Vitest test environment designed specifically for Browser Extensions, enabling end-to-end (E2E) testing of browser extensions. This project is built on Playwright and provides complete testing support for Chrome extensions.
API
Test API provided by vitest-environment-web-ext