playwright

Test Next.js applications with Playwright for reliable end-to-end coverage.

Updated Jan 4, 2026
One-click install
npx skills add https://github.com/rahmatullahboss/multi-store-saas --skill playwright-rahmatullahboss
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright
Source: https://github.com/rahmatullahboss/multi-store-saas/tree/main/.agents/skills/playwright
Command: npx skills add https://github.com/rahmatullahboss/multi-store-saas --skill playwright-rahmatullahboss

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of writing, reviewing, and debugging end-to-end tests for Next.js applications using Playwright. It addresses challenges related to test reliability, speed, and maintainability in complex web environments.

Core Features & Use Cases

  • Test Architecture Optimization: Guides on creating isolated, parallel, and robust test setups for Next.js apps.
  • Locator Strategies: Promotes stable, role-based, and data-testid selectors to enhance test stability.
  • Waiting & Assertions: Implements auto-retry assertions and best practices for synchronization.
  • Authentication & State Management: Reuses authentication states to reduce overhead and enable role-based testing.
  • Mocking & Network Control: Enables API response mocking, HAR replay, and network condition simulation for deterministic tests.
  • Next.js Specific Testing: Verifies hydration, server components, app router behaviors, and server actions.
  • Performance Optimization: Utilizes sharding, headless mode, and server reuse to speed up test runs.
  • Debugging & CI: Facilitates trace viewing, screenshot capture, inspector tool, and CI reporter configuration.

Quick Start

Use the playwright skill to improve test reliability by applying auto-wait assertions, mocking network requests, and managing authentication states for Next.js apps.

Frequently Asked Questions about playwright

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

FAQPage Schema
How do I test Next.js server hydration and app router behaviors with Playwright?

To test Next.js server hydration and app router behaviors with Playwright, implement specialized guidelines that verify server components and hydration states. This ensures robust application functionality.

What's the best way to mock API responses for deterministic Playwright e2e testing?

The best way to mock API responses for deterministic Playwright e2e testing involves utilizing network control features like API response mocking and HAR replay. This Skill guides configuring these simulations to ensure stable test environments.

Why does my Playwright test fail due to selector reliability in Next.js?

Playwright tests fail due to selector reliability when using unstable element selectors. This Skill promotes stable, role-based, and data-testid selectors combined with auto-retry assertions to enhance test stability and synchronization.

How do I optimize Playwright test performance and speed in CI pipelines?

Optimize Playwright test performance in CI pipelines by utilizing sharding, headless mode, and server reuse to speed up test runs. This Skill outlines configurations for trace viewing and CI reporters to ensure stable pipelines.

Can I reuse authentication states to reduce overhead in Playwright end-to-end tests?

Yes, you can reuse authentication states to reduce overhead and enable role-based testing in Playwright. This Skill provides strategies for managing authentication states to create isolated, parallel, and robust test setups.