skills.rest
rinchsan
rinchsanCOMMUNITY
Explore all skills by this author →
𝕏@rinchsanGitHub

e2e-testing

Implements Playwright E2E test suites with Page Object Model, CI configuration, and flaky test handling.

5|Updated Jul 8, 2019
Search Tags:#typescript#ci/cd#test automation#flaky tests#playwright#e2e testing#page object model
One-click install
npx skills add https://github.com/rinchsan/dotfiles --skill e2e-testing-rinchsan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: e2e-testing
Source: https://github.com/rinchsan/dotfiles/tree/main/.claude/skills/e2e-testing
Command: npx skills add https://github.com/rinchsan/dotfiles --skill e2e-testing-rinchsan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test.

What problem does it solve? Writing stable end-to-end tests is hard: tests break due to race conditions, network timing, and animations, and teams struggle to organize test files, manage artifacts, and integrate suites into CI pipelines. ## Core Features & Use Cases - Page Object Model Patterns: Structure tests with reusable page classes using Playwright locators and data-testid selectors. - Configuration & CI Integration: Set up playwright.config.ts with retries, reporters (HTML, JUnit, JSON), multi-browser projects, and webServer bootstrapping. - Flaky Test Management: Quarantine unstable tests with test.fixme/test.skip, reproduce flakiness with --repeat-each, and fix common causes like arbitrary timeouts. - Use Case: A team adding E2E coverage to a web app can scaffold an organized tests/ directory, configure cross-browser CI runs, and capture screenshots, traces, and videos on failure for debugging. ## Quick Start Write a Playwright E2E test suite for my login and search pages using the Page Object Model with CI-ready configuration.

Frequently Asked Questions about e2e-testing

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

FAQPage Schema
How do I structure Playwright tests with Page Object Model?▼

Create a class per page that exposes locators (e.g., page.locator('[data-testid="search-input"]')) and action methods like goto() and search(). Tests then instantiate the page class in beforeEach and call its methods, keeping selectors out of test logic.

How to fix flaky Playwright tests in CI?▼

Replace arbitrary waits like page.waitForTimeout with condition-based waits such as waitForResponse or locator auto-waiting. Reproduce flakiness locally with --repeat-each=10, and quarantine unstable tests using test.fixme or test.skip with a linked issue.

Does Playwright support testing across multiple browsers?▼

Yes, Playwright supports Chromium, Firefox, and WebKit through projects in playwright.config.ts. You can also define mobile viewports like Pixel 5 using device descriptors from @playwright/test.

How do I capture screenshots and videos on Playwright test failure?▼

Set screenshot: 'only-on-failure', video: 'retain-on-failure', and trace: 'on-first-retry' in the use block of playwright.config.ts. You can also capture manual screenshots with page.screenshot() into an artifacts directory.

Why does my Playwright click fail during animations?▼

Clicks fail when elements move during CSS animations. Wait for the element to reach a stable visible state with locator.waitFor({ state: 'visible' }) and networkidle before clicking, instead of clicking immediately.

Related Skills

Explore More Software Engineering Skills→
hffmnnjhffmnnj
39

playwright-testing

Automate end-to-end UI testing for web applications with Playwright.

Community
Intermediate
clfigueiredoclfigueiredo
5

agent-e2e-runner

Generates, maintains, and runs end-to-end tests using Agent Browser with Playwright fallback.

Community
Intermediate
mohitmishra786mohitmishra786

test

Generate unit, integration, and end-to-end tests with Pytest, Jest, Playwright, and k6.

Community
Advanced
JaiminVadadoriyaJaiminVadadoriya
1

playwright-migration

Map Cypress or Selenium commands to Playwright for incremental migration.

Community
Advanced