skills.rest
chrysaliscat
chrysaliscatCOMMUNITY
Explore all skills by this author →
GitHub

Playwright Skill

Generate and debug Playwright E2E tests for Vue.js and React applications.

1|Updated Jan 27, 2026
Search Tags:#debugging#react#test generation#playwright#e2e testing#web automation#vue.js
One-click install
npx skills add https://github.com/chrysaliscat/designgraduation --skill playwright-skill-chrysaliscat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Playwright Skill
Source: https://github.com/chrysaliscat/designgraduation/tree/main/.agent/skills/playwright-skill
Command: npx skills add https://github.com/chrysaliscat/designgraduation --skill playwright-skill-chrysaliscat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides expert guidance to streamline the process of writing, executing, and debugging end-to-end tests for web applications using Playwright.

Core Features & Use Cases

  • E2E Test Generation: Create robust test suites for modern web applications.
  • Locator Strategies: Emphasizes user-facing locators for resilient tests.
  • Debugging Tools: Leverages traces, screenshots, and logs for effective troubleshooting.
  • Use Case: Debug a failing login test by analyzing Playwright's trace viewer to pinpoint the exact step where the failure occurred.

Quick Start

Use the Playwright skill to generate a test for the login flow of a Vue.js application.

Frequently Asked Questions about Playwright Skill

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

FAQPage Schema
How do I write Playwright tests for React applications?▼

To write Playwright tests for React, generate E2E test suites utilizing user-facing locators. This approach ensures tests interact with elements exactly as users do, creating resilient test scenarios for web applications.

Why does my Playwright e2e testing fail and how do I debug flaky tests?▼

Debug flaky e2e tests by analyzing Playwright traces, screenshots, and logs. Using the trace viewer helps pinpoint the exact step where a failure occurred, streamlining the troubleshooting process for web automation.

Can I use Playwright for Vue.js web automation and test generation?▼

Playwright supports Vue.js web automation and test generation. You can generate robust end-to-end test suites specifically designed for Vue.js applications to ensure reliable web automation behavior.

What is the best way to create resilient Playwright tests?▼

The best way to create resilient Playwright tests is by emphasizing user-facing locators. This strategy prevents tests from breaking due to underlying DOM changes and improves overall e2e testing stability.

How do I debug a failing login test using Playwright trace viewer?▼

Debug a failing login test by analyzing Playwright's trace viewer to pinpoint the exact step where the failure occurred. This method leverages detailed execution traces for effective e2e test troubleshooting.

Related Skills

Explore More Software Engineering Skills→
JaiminVadadoriyaJaiminVadadoriya
1

playwright-skill

Guide Playwright automated web testing across E2E, API, component, visual, accessibility, and security tests.

Community
Advanced
xxihxxih
1

e2e-testing

Execute Playwright web app tests and generate HTML reports with CI/CD compatibility.

Community
Advanced
cslsoftwarescslsoftwares

developer-web-testing-debugging

Automate Vue.js testing and debugging with Vitest, Playwright, and Sentry.

Community
Advanced
linaproailinaproai
147

playwright-cli

Automate browser interactions and generate Playwright test code via CLI.

Official
Intermediate