skills.rest
djankies
djankiesCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

using-browser-mode

Configure and run Vitest browser mode tests with Playwright, WebDriverIO, or Preview providers.

Updated Nov 21, 2025
Search Tags:#vitest#testing#playwright#browser
One-click install
npx skills add https://github.com/djankies/claude-configs --skill using-browser-mode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: using-browser-mode
Source: https://github.com/djankies/claude-configs/tree/main/vitest-4/skills/using-browser-mode
Command: npx skills add https://github.com/djankies/claude-configs --skill using-browser-mode

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Teaches Vitest browser mode setup, configuration, and testing patterns.

Core Features & Use Cases

  • Provider setup: Playwright/Webdriver providers and multiple browsers.
  • Browser APIs & tests: page, userEvent, and element assertions in a real browser.
  • Use Case: run UI tests in headless Chromium across browsers.

Quick Start

Configure a browser-powered Vitest project and write a simple UI test.

Frequently Asked Questions about using-browser-mode

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run UI tests in a real browser with Vitest?▼

Vitest browser mode executes UI tests in real browser environments like Chromium, enabling testing of browser-specific code and components. Configure a provider (Playwright or WebDriverIO), then write tests using page and userEvent APIs to interact with actual DOM elements and verify UI behavior across multiple browsers.

What's the difference between Vitest browser mode and regular testing?▼

Browser mode runs tests in real browser instances rather than Node.js, letting you test actual browser APIs, visual rendering, and user interactions. This is essential for UI component testing, visual regression checks, and scenarios where jsdom or happy-dom don't accurately simulate browser behavior.

Can I run Vitest browser tests across multiple browsers?▼

Yes, Vitest browser mode supports multi-browser runs through Playwright and WebDriverIO providers. Configure your provider options to specify which browsers (Chromium, Firefox, WebKit) to test against, and Vitest will instantiate and run your tests in each.

How do I configure Vitest for browser testing with Playwright?▼

Set up Vitest browser mode by installing Playwright, configuring the provider in your Vitest config, and specifying browser context options like viewport and traces. Then import vitest/browser APIs in your tests to access page and userEvent for browser-based assertions.

What setup do I need before starting browser mode tests?▼

Install Vitest and a browser provider (Playwright or WebDriverIO). Configure the provider in your Vitest config file with browser selection and context options, then structure your tests to import from vitest/browser for access to page and userEvent APIs.

Does Vitest browser mode work for component testing and visual regression?▼

Yes, Vitest browser mode handles component tests, visual regression checks, and functional UI testing. It provides real browser rendering and interaction APIs, making it suitable for comprehensive UI validation across different browsers and viewport sizes.

Related Skills

Explore More Software Engineering Skills→
Dragoon0xDragoon0x
4

qa

Generate stack-matched Playwright smoke tests with runner scripts.

Community
Intermediate
u9401066u9401066

project-tester

Run Python pytest and Node.js npm test suites and generate structured reports.

Community
Intermediate
AutumnsGroveAutumnsGrove
26

webapp-testing

Automate end-to-end web testing across Chromium, Firefox, and WebKit with Playwright.

Community
Advanced
williamzujkowskiwilliamzujkowski
17

e2e-testing

Automate end-to-end web app testing with Playwright or Cypress in CI/CD pipelines.

Community
Intermediate