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.

主要功能

Multi-device responsive testing for mobile, tablet, and desktop layouts
Visual state capture via screenshots and accessibility tree snapshots
1 GitHub stars
Real-time detection of JavaScript exceptions and network failures
Validation of Microfrontend and Module Federation loading sequences
Automated UI workflow simulation including clicks, typing, and form submissions

使用场景

Validating complex multi-step user journeys like authentication and checkout flows
Performing full regression testing after implementing new UI features or bug fixes
Verifying cross-breakpoint layout integrity before major production deployments

关于

主要功能

Multi-device responsive testing for mobile, tablet, and desktop layouts
Visual state capture via screenshots and accessibility tree snapshots
1 GitHub stars
Real-time detection of JavaScript exceptions and network failures
Validation of Microfrontend and Module Federation loading sequences
Automated UI workflow simulation including clicks, typing, and form submissions

使用场景

Validating complex multi-step user journeys like authentication and checkout flows
Performing full regression testing after implementing new UI features or bug fixes
Verifying cross-breakpoint layout integrity before major production deployments