skills.rest
jjmendezrodriguez
jjmendezrodriguezCOMMUNITY
Explore all skills by this author →
GitHub

e2etesting

Implements Playwright E2E testing for TypeScript/React apps with page object models and CI integration.

Updated Apr 16, 2026
Search Tags:#playwright#e2e testing#page object model#ci integration#auth reuse#flaky test triage
One-click install
npx skills add https://github.com/jjmendezrodriguez/jm-claude-plugin --skill e2etesting
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: e2etesting
Source: https://github.com/jjmendezrodriguez/jm-claude-plugin/tree/main/skills/e2etesting
Command: npx skills add https://github.com/jjmendezrodriguez/jm-claude-plugin --skill e2etesting

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

End-to-end tests often become slow, flaky, or hard to maintain, so teams struggle to confidently validate critical user journeys like login, checkout, and payment.

Core Features & Use Cases

  • Playwright setup for TypeScript/React: Establishes a consistent playwright.config.ts baseline with sensible retries, traces, screenshots, and multi-browser projects (Chromium/Firefox/WebKit).
  • Maintainable Page Object Models (POMs): Separates page locators and user-intent methods from spec logic to reduce selector refactors across the suite.
  • CI-ready execution and artifacts: Provides a GitHub Actions workflow that runs E2E tests and uploads failure artifacts for fast debugging.
  • Flake prevention and triage: Uses a structured approach to diagnose common causes (assertion timing, network races, shared backend state), emphasizing fixing root causes over “retry-only” work.
  • Auth reuse via storageState: Avoids logging in on every test by persisting authenticated sessions for auth-heavy suites.

Quick Start

Set up Playwright E2E by initializing the default project, then create an e2e/ folder with playwright.config.ts, pages/ (POMs), and specs/, and wire the suite into CI so failures upload trace/screenshot/video artifacts.

Frequently Asked Questions about e2etesting

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

FAQPage Schema
How do I set up Playwright E2E testing for a TypeScript and React application?▼

Playwright E2E testing for TypeScript and React apps is set up by creating a playwright.config.ts file with sensible retries, traces, and multi-browser projects, alongside dedicated folders for page object models and test specs.

What is the best way to prevent flaky Playwright E2E tests in CI?▼

Preventing flaky Playwright tests involves using a structured triage approach to diagnose root causes like assertion timing and network races, configuring trace and screenshot policies, and fixing underlying issues rather than just adding retries.

How do I reuse authentication state across Playwright E2E tests?▼

Auth state is reused across Playwright E2E tests by persisting authenticated sessions with the storageState feature, which avoids logging in on every test and significantly speeds up execution for auth-heavy suites.

Can I run Playwright E2E tests across multiple browsers like Chromium, Firefox, and WebKit?▼

Yes, you can run Playwright E2E tests across Chromium, Firefox, and WebKit by defining multi-browser projects within your playwright.config.ts file to ensure consistent critical user-flow coverage.

How do I maintain Playwright page object models to reduce selector refactors?▼

Maintainable Playwright page object models are achieved by strictly separating page locators and user-intent methods from the spec logic, which isolates selector changes and reduces widespread refactors across the test suite.

How do I upload Playwright failure artifacts in a GitHub Actions CI workflow?▼

Playwright failure artifacts are uploaded in GitHub Actions by adding CI workflow steps to install browsers, run the E2E tests deterministically, and automatically upload trace, screenshot, and video files for fast debugging.

Related Skills

Explore More Software Engineering Skills→
wibus-weewibus-wee
6

frontend-development

Define frontend development guidelines for Wails 3 with React and TypeScript.

Community
Intermediate
skyasu2skyasu2
2

playwright-triage

Analyze Playwright test-results to classify E2E failures and generate Markdown diagnosis reports.

Community
Advanced
FortiumPartnersFortiumPartners

jest

Execute and generate Jest tests for JavaScript and TypeScript projects.

Official
Intermediate
JaiminVadadoriyaJaiminVadadoriya
1

playwright-migration

Map Cypress or Selenium commands to Playwright for incremental migration.

Community
Advanced