skills.rest
jason23452
jason23452COMMUNITY
Explore all skills by this author →
GitHub

playwright-e2e-testing

Installs and configures Playwright end-to-end tests for browser-rendered frontend applications.

Updated Jun 28, 2026
Search Tags:#frontend#browser automation#playwright#e2e testing#ci#chromium#test configuration
One-click install
npx skills add https://github.com/jason23452/my-skill --skill playwright-e2e-testing-jason23452
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-e2e-testing
Source: https://github.com/jason23452/my-skill/tree/main/frontend/playwright-e2e-testing
Command: npx skills add https://github.com/jason23452/my-skill --skill playwright-e2e-testing-jason23452

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test, and includes scripts (resource) components.

What problem does it solve? Setting up end-to-end browser testing across different frontend frameworks requires manual dependency installation, config tuning, dev server wiring, and CI integration, which is repetitive and error-prone. ## Core Features & Use Cases - Automated Playwright Setup: Installs @playwright/test and Chromium, detects the package manager from lockfiles, and adds e2e and e2e:list package scripts. - Framework-Aware Configuration: Generates a playwright.config.ts that detects Nuxt, Next.js, SvelteKit, Astro, Angular, Vite, and generic npm projects with correct ports and web server commands. - Use Case: When a Nuxt 4 project needs smoke tests, this Skill scaffolds the config, a starter home page spec, and verification commands, then runs playwright test --list to confirm the setup. ## Quick Start Add Playwright E2E testing to this project and create a smoke test for the home page.

Frequently Asked Questions about playwright-e2e-testing

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

FAQPage Schema
How do I set up Playwright E2E tests in an existing frontend project?▼

Install @playwright/test as a dev dependency, run playwright install chromium, and create a playwright.config.ts with a webServer block pointing at your dev server. This Skill automates all three steps and adds e2e and e2e:list package scripts.

How to configure Playwright webServer for Nuxt or Next.js?▼

Set the webServer command to the framework dev command, such as nuxt dev or next dev, with host 127.0.0.1 and the framework's default port. The generated config detects the framework from package.json and picks the correct command and port automatically.

Does Playwright work with pnpm, yarn, and bun projects?▼

Yes, Playwright works with any Node package manager. The bootstrap scripts detect pnpm-lock.yaml, yarn.lock, bun.lock, or package-lock.json and use the matching install and exec commands, defaulting to npm when no lockfile signal exists.

Why are my Playwright tests flaky in CI?▼

Flakiness usually comes from missing waits or parallel worker contention. Use web-first assertions, waitForURL, and waitForResponse instead of fixed timeouts, and configure retries and a single worker when process.env.CI is set.

Can Playwright run tests against an already running dev server?▼

Yes, set the PLAYWRIGHT_BASE_URL environment variable to the running server's URL. The config also supports reuseExistingServer outside CI, so it will not start a duplicate dev server when one is already available.

Related Skills

Explore More Software Engineering Skills→
wfvuewfvue
3

integrating-tauri-js-frontends

Configure Tauri v2 frontends for Next.js, Nuxt, Qwik, SvelteKit, or Vite with static output.

Community
Advanced
DatTran26DatTran26

ck:test

Execute unit, integration, e2e, and UI tests with coverage reports.

Community
Advanced
spike-land-aispike-land-ai

javascript-testing-patterns

Design Jest and Vitest testing patterns for JavaScript and TypeScript projects.

Official
Advanced
badhopebadhope

e2e-test

Automate end-to-end user flow testing across Playwright, Cypress, and Selenium.

Community
Advanced