skills.rest
sudat
sudatCOMMUNITY
Explore all skills by this author →
GitHub

e2e-testing

Executes Playwright MCP-based E2E tests for Next.js and React (Vite) projects with automatic port conflict resolution and data-load synchronization.

Updated Jan 5, 2026
Search Tags:#automation#testing#ci/cd#react#next.js#playwright#e2e testing
One-click install
npx skills add https://github.com/sudat/req-manager --skill e2e-testing-sudat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: e2e-testing
Source: https://github.com/sudat/req-manager/tree/main/.cursor/skills/e2e-testing
Command: npx skills add https://github.com/sudat/req-manager --skill e2e-testing-sudat

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill automates End-to-End (E2E) testing for Next.js and React (Vite) projects, ensuring application stability after code changes by handling common issues like port conflicts and data loading delays.

Core Features & Use Cases

  • Project Type Detection: Automatically identifies Next.js or Vite projects.
  • Port Conflict Resolution: Checks for and resolves port conflicts, reusing existing servers or starting new ones.
  • E2E Test Execution: Uses Playwright MCP to navigate, interact with, and screenshot web applications.
  • Data Load Synchronization: Ensures tests wait for data to load before proceeding, preventing flaky tests.
  • Use Case: After deploying a new feature to a Next.js e-commerce site, run this Skill to verify that product pages load correctly, the add-to-cart button functions, and the checkout process is uninterrupted.

Quick Start

Execute end-to-end tests for the current project using Playwright MCP, ensuring all data loads before taking screenshots.

Frequently Asked Questions about e2e-testing

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

FAQPage Schema
How do I automate E2E testing for a Next.js or React app without running into port conflicts?▼

You can automate E2E testing for Next.js and React Vite projects using Playwright MCP, which detects project types and automatically resolves port conflicts by checking, reusing, or restarting servers before executing tests.

Why are my Playwright E2E tests flaky when navigating and filling forms before the page loads?▼

Flaky E2E tests often occur when actions run before data fully loads. This testing skill prevents flakiness by enforcing data load synchronization, ensuring tests wait for data to appear before interacting with the UI.

Can I run E2E tests automatically to verify a Next.js e-commerce checkout process after deploying new features?▼

Yes, you can execute E2E tests for Next.js e-commerce sites to verify product pages, add-to-cart buttons, and checkout processes. The skill navigates the app, interacts with elements, and takes screenshots for visual confirmation.

What is the best way to troubleshoot failing End-to-End tests in a React Vite application?▼

The best way to troubleshoot failing E2E tests is to use the structured reporting and troubleshooting guidance provided by the testing skill, which identifies common issues like server port conflicts and data synchronization failures during execution.

Does this E2E testing approach work with both Next.js and Vite projects?▼

Yes, this approach supports both Next.js and React Vite projects. It automatically detects the project type during execution and manages the local development server accordingly to ensure proper test synchronization.

How do I capture screenshots during automated Playwright E2E tests for my React application?▼

You can capture screenshots during E2E testing by using Playwright MCP to navigate through the application, wait for data to load, and automatically capture the UI state at specific interaction points for reporting.

Related Skills

Explore More Software Engineering Skills→
MakisuoMakisuo
1.6k

clickhousectl-local-dev

Install and configure a local ClickHouse environment with clickhousectl.

Community
Intermediate
Rosetears520Rosetears520
2

ci-cd-and-automation

Configure GitHub Actions CI/CD pipelines with automated quality gates.

Community
Intermediate
nanorepublicananorepublica
61

Testing Unit Tests

Standardize unit-test coding practices across Claude Code projects.

Community
Basic
williamzujkowskiwilliamzujkowski
17

e2e-testing

Automate end-to-end web app testing with Playwright or Cypress in CI/CD pipelines.

Community
Intermediate