What is the Page Object Model (POM) pattern used here?

The POM pattern organizes locators and interaction logic into reusable classes, separating the page structure from the actual test assertions to make the suite more maintainable.

How does visual testing work with this skill?

By adding a @visual tag to test titles, the skill generates component-level screenshots with strict pixel comparison, ensuring UI consistency without the flakiness of full-page snapshots.

Does this skill support API mocking?

Yes, it includes a mockApi utility that allows you to intercept network requests and provide static JSON responses, ensuring your E2E tests remain deterministic and fast.

Can I integrate these tests into my CI/CD pipeline?

Absolutely. The skill provides a comprehensive GitHub Actions workflow template that supports test sharding, artifact uploading, and automated report merging.

Playwright E2E & Visual Testing

Name: Playwright E2E & Visual Testing
Author: yusuftayman

byyusuftayman

•

安全与测试

Generates robust Playwright E2E tests and Page Object Model classes with integrated visual regression testing capabilities.

This skill empowers developers to automate the creation of end-to-end tests using the Playwright CLI and the Page Object Model (POM) pattern. It streamlines the entire testing lifecycle—from initial URL exploration and element snapshotting to the generation of structured test specs and Page Object classes. By emphasizing component-level visual regression testing via the @visual tag and providing deterministic API mocking utilities, this skill ensures the creation of stable, high-quality test suites that are easy to maintain and seamlessly integrate into modern CI/CD pipelines.

主要功能

01Interactive URL exploration and element snapshotting via playwright-cli

02Pre-configured GitHub Actions workflow for parallelized E2E execution

03Deterministic test data through built-in API mocking utilities

04Automated Page Object Model (POM) class and locator generation

05Component-level visual regression testing using the @visual tag

0611 GitHub stars

使用场景

01Rapidly bootstrapping a new E2E test suite for a web application

02Refactoring existing test logic into a maintainable Page Object structure

03Implementing stable, non-flaky visual regression checks for UI components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yusuftayman/playwright-cli-agents e2e

For use in Claude.ai and ChatGPT

Download Skill