skills.rest
ducthang-hub
ducthang-hubCOMMUNITY
Explore all skills by this author →
GitHub

playwright-setup-ai-kit

Configure Playwright MCP tooling and generate test configuration files.

Updated May 11, 2026
Search Tags:#typescript#vscode#browser automation#mcp#playwright#end-to-end testing#test setup
One-click install
npx skills add https://github.com/ducthang-hub/nw-ai-kit --skill playwright-setup-ai-kit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-setup-ai-kit
Source: https://github.com/ducthang-hub/nw-ai-kit/tree/main/.agents/skills/playwright-setup-ai-kit
Command: npx skills add https://github.com/ducthang-hub/nw-ai-kit --skill playwright-setup-ai-kit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents setup failures and missing Playwright MCP tooling by guiding you through installing Playwright, configuring the Playwright test MCP server, and creating the required config and seed test files.

Core Features & Use Cases

  • Playwright + dependencies setup: Ensures @playwright/test is present, installs dependencies, and runs npx playwright install so the browser binaries are available.
  • MCP server configuration: Creates or fixes .vscode/mcp.json with a playwright-test server entry using the correct relative cwd for portability.
  • Test configuration + seed spec: Generates playwright.config.ts and tests/seed.spec.ts (with URL handling) to support deterministic seeded page setup and navigation validation.

Quick Start

Tell the assistant to set up Playwright MCP in your repo and verify it by running the three required MCP tool calls for setup, navigation, and page interaction.

Frequently Asked Questions about playwright-setup-ai-kit

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

FAQPage Schema
How do I configure the Playwright MCP server in VS Code for test automation?▼

Configuring the Playwright MCP server involves creating a .vscode/mcp.json file with a playwright-test server entry using a deterministic relative cwd, which ensures reliable automated browser test execution in VS Code.

Why does my Playwright MCP setup fail or require a VS Code reload to activate?▼

Playwright MCP setup fails when the .vscode/mcp.json configuration is missing or has an incorrect working directory, preventing the MCP server from activating properly without manually reloading your VS Code environment.

How do I fix Playwright navigation errors caused by baseURL or cwd mismatches?▼

To fix Playwright navigation errors caused by baseURL or cwd mismatches, generate a playwright.config.ts file and a seed test spec using full URLs to ensure deterministic page setup and reliable navigation validation.

What's the best way to validate that my Playwright MCP tooling is working correctly?▼

The best way to validate Playwright MCP tooling is to start your app on localhost:4200 and run three mandatory MCP tool calls that test setup, navigation, and page interaction to confirm reliable browser automation.

Do I need to install @playwright/test separately before setting up the MCP server?▼

Yes, you need to install @playwright/test as a dependency, run npx playwright install for browser binaries, and then configure the .vscode/mcp.json file to ensure the Playwright MCP server has everything required to function.

Related Skills

Explore More Software Engineering Skills→
MakisuoMakisuo
1.6k

clickhousectl-local-dev

Install and configure a local ClickHouse environment with clickhousectl.

Community
Intermediate
AutumnsGroveAutumnsGrove
26

webapp-testing

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

Community
Advanced
AllBeingsFutureAllBeingsFuture
9

allbeingsfuture/skills@mcp-installer

Install and configure MCP servers via npm, pip, or uvx.

Community
Advanced
vrcmsvrcms
1

browser-qa

Automate visual testing and UI interaction verification for web applications.

Community
Advanced