Can I test different screen sizes?

Yes, the skill includes built-in support for resizing the viewport to specific mobile (375x667), tablet (768x1024), and desktop (1200x800) dimensions.

Do I need to write Playwright scripts?

No, you can provide natural language instructions and Claude will use the Playwright MCP tools to execute the necessary browser actions on your behalf.

What happens if a test fails?

Claude can capture screenshots, retrieve console logs, and analyze the accessibility tree to identify exactly why a component or workflow failed to execute.

How does this skill interact with my application?

The skill uses Playwright MCP tools to launch a browser and navigate to your application's URL, allowing Claude to interact with elements like a real user.

Does this work with Microfrontends?

Absolutely. It is specifically configured to identify Module Federation loading errors and integration issues common in microfrontend architectures.

Playwright E2E Testing

Name: Playwright E2E Testing
Author: usmanali4073

byusmanali4073

•

보안 및 테스팅

Automates end-to-end browser testing for React microfrontends to ensure UI reliability and cross-device responsiveness.

The Playwright E2E Testing skill empowers Claude to perform comprehensive automated browser testing on React-based applications and microfrontends. By leveraging Playwright MCP tools, it enables developers to simulate complex user workflows, validate CRUD operations, and detect frontend regressions across mobile, tablet, and desktop viewports. It is specifically designed to handle the complexities of modern frontend architectures, providing deep visibility into console errors, network failures, and Module Federation loading issues before code reaches production.

주요 기능

01Multi-device responsive testing for mobile, tablet, and desktop layouts

02Visual state capture via screenshots and accessibility tree snapshots

031 GitHub stars

04Real-time detection of JavaScript exceptions and network failures

05Validation of Microfrontend and Module Federation loading sequences

06Automated UI workflow simulation including clicks, typing, and form submissions

사용 사례

01Validating complex multi-step user journeys like authentication and checkout flows

02Performing full regression testing after implementing new UI features or bug fixes

03Verifying cross-breakpoint layout integrity before major production deployments

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add usmanali4073/stylemate-plugins playwright-e2e-testing

For use in Claude.ai and ChatGPT

Download Skill