pw-to-vitest

Converts Playwright test files and drivers to Vitest Browser API format.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/kunai-consulting/qwik-design-system --skill pw-to-vitest
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pw-to-vitest
Source: https://github.com/kunai-consulting/qwik-design-system/tree/main/.ruler/skills/pw-to-vitest
Command: npx skills add https://github.com/kunai-consulting/qwik-design-system --skill pw-to-vitest

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the conversion of Playwright test files and drivers into the Vitest Browser API format, streamlining the migration of component tests.

Core Features & Use Cases

  • Automated Conversion: Transforms .test.ts and .driver.ts files to Vitest's .browser.tsx format.
  • Pattern Adaptation: Adjusts Playwright's interaction and assertion patterns to Vitest's equivalent APIs.
  • Use Case: When migrating the component test suite for @qds.dev/ui from Playwright to Vitest, use this Skill to convert existing tests in libs/components/src/ to the new framework.

Quick Start

Use the pw-to-vitest skill to convert the Playwright test file '/path/to/your/component.test.ts' to Vitest format.

Frequently Asked Questions about pw-to-vitest

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

FAQPage Schema
How do I migrate Playwright tests to Vitest?

To migrate Playwright tests to Vitest, you convert `.test.ts` and `.driver.ts` files into Vitest's `.browser.tsx` format. This process adapts Playwright's interaction and assertion patterns to the Vitest Browser API.

What is the best way to convert Playwright component tests to Vitest browser mode?

Converting Playwright component tests to Vitest browser mode involves transforming test file structures, imports, locators, and setup interactions into the Vitest Browser API format. This specifically targets component test suites for migration.

Can I use the Vitest Browser API to replace Playwright interaction patterns?

Yes, the Vitest Browser API replaces Playwright interaction patterns by adapting file structures, imports, locators, and assertion logic. It transforms existing test files into the `.browser.tsx` format required for Vitest browser mode.

How do I handle Playwright driver files when migrating to Vitest?

When migrating to Vitest, Playwright `.driver.ts` files are converted alongside `.test.ts` files into the `.browser.tsx` format. This conversion adapts your existing test setup and interaction drivers to the Vitest Browser API.

Does converting Playwright assertions to Vitest require changing file imports?

Yes, converting Playwright assertions to Vitest requires changing file imports and adapting test setup patterns. The migration process adjusts imports, locators, and assertions to match the Vitest Browser API format.

When should I migrate component tests from Playwright to Vitest?

You should migrate component tests from Playwright to Vitest when streamlining your testing framework, specifically targeting directories like `libs/components/src/`. This migration converts existing test files and drivers to the Vitest Browser API.