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.

Install Dependencies

npm

pnpm

bun

yarn

npm i -D vitest-environment-web-ext

Configure Vitest

vitest.config.ts

import { defineConfig } from 'vitest/config'

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

Type Definitions

To enable better type checking and IntelliSense, you need to configure the types.

tsconfig.json

{
  "compilerOptions": {
    "types": ["vitest-environment-web-ext/types"]
  }
}

Update `package.json`

package.json

{
  "scripts": {
    "test": "vitest"
  }
}

Write Tests

test/extension.test.ts

import { expect, test } from 'vitest'

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

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