API

Test API provided by vitest-environment-web-ext

Overview

vitest-environment-web-ext injects some convenient methods into the test context, allowing you to quickly access various parts of the browser extension.

context

The Playwright context of the test environment, which can be used to create custom pages or perform more low-level operations.

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

test('custom test', async () => {
  const newPage = await context.newPage()
  await newPage.goto('https://example.com')
  expect(await newPage.title()).toBe('Example')
})

browser

getPopupPage()

Gets the popup page of the browser extension.

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()
  
  const content = await popupPage.textContent('body')
  expect(content).toContain('Hello')
})

getSidePanelPage()

Gets the side panel page of the browser extension.

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

test('side panel should display correctly', async () => {
  const sidePanelPage = await browser.getSidePanelPage()
  
  const title = await sidePanelPage.title()
  expect(title).toBeTruthy()
})

getManifest()

Gets the manifest.json content of the browser extension.

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

test('manifest should contain correct configuration', async () => {
  const manifest = await browser.getManifest()
  
  expect(manifest.name).toBe('My Extension')
  expect(manifest.version).toBe('1.0.0')
  expect(manifest.manifest_version).toBe(3)
})

If you have other needs, feel free to submit an Issue or Pull Request to help improve this project.

Edit this page
Configuration Options
Configuration options for vitest-environment-web-ext
Manifest
CRXJS parses the manifest file to discover the entry files used by your extension.