Can I use this for applications that don't use GraphQL?

Yes, while it includes specialized GraphQL patterns, the core principles of POM, fixtures, and scenario design are applicable to any web application tested with Playwright.

What is the 3-stage scenario classification?

It prioritizes testing by Happy Path (essential flows), Edge Cases (boundary values and empty states), and Error Cases (network failures and permission issues) to ensure comprehensive coverage.

Does it support MUI (Material UI) components?

Yes, it includes specific selector strategies optimized for MUI components like DataGrids, Selects, and Dialogs, which often have complex internal DOM structures.

What is the benefit of using the POM pattern in this skill?

The Page Object Model (POM) abstracts UI elements and interactions into reusable classes, making tests easier to maintain and read when the application's UI structure changes.

How does this skill handle GraphQL mocking?

It uses Playwright’s native page.route() functionality to intercept network requests, allowing you to simulate API responses for both success and error states without needing an external mock server.

Playwright E2E Test Patterns

Name: Playwright E2E Test Patterns
Author: xxziiko

byxxziiko

0•

セキュリティとテスト

Provides standardized patterns and templates for high-quality Playwright E2E testing, including Page Object Models and GraphQL mocking.

This skill equips Claude with specialized patterns and templates for authoring professional-grade E2E tests using Playwright. It emphasizes the Page Object Model (POM) for maintainability, advanced GraphQL mocking strategies using page routing, and comprehensive fixture setups. Designed for developers and QA engineers, it facilitates the creation of robust test scenarios—ranging from happy paths to complex edge cases—within domain-specific contexts like Order Management (OMS) and Warehouse Management (WMS). It also includes specialized selectors for MUI (Material UI) components to ensure reliable element targeting in modern React applications.

主な機能

013-stage test scenario design (Happy Path, Edge Case, Error Case)

020 GitHub stars

03Advanced GraphQL mocking using Playwright's page.route()

04MUI-specific selector patterns for complex UI components

05Structured Page Object Model (POM) patterns for UI abstraction

06Custom Fixtures for authentication and shared test data

ユースケース

01Implementing reusable Page Objects for large-scale enterprise management systems

02Mocking GraphQL API responses to test frontend error handling and edge cases

03Scaffolding a new E2E test suite for complex web applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xxziiko/subagent playwright-test-patterns

For use in Claude.ai and ChatGPT

主な機能

013-stage test scenario design (Happy Path, Edge Case, Error Case)

020 GitHub stars

03Advanced GraphQL mocking using Playwright's page.route()

04MUI-specific selector patterns for complex UI components

05Structured Page Object Model (POM) patterns for UI abstraction

06Custom Fixtures for authentication and shared test data

ユースケース

01Implementing reusable Page Objects for large-scale enterprise management systems

02Mocking GraphQL API responses to test frontend error handling and edge cases

03Scaffolding a new E2E test suite for complex web applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xxziiko/subagent playwright-test-patterns

For use in Claude.ai and ChatGPT