Guide · Agent skill
How to use the End-to-End Testing with Playwright agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The e2e-testing skill gives an AI agent a reference guide for writing end-to-end tests with Playwright, which drive a real web browser the way a user would. It is for developers and QA engineers who want a Playwright test suite that is organised, stable and reports its results in CI. After reading this guide you will know how to install the skill, ask for it in plain language, and use the patterns it covers. The source guide is written in Spanish; this page explains it in English.
End-to-End Testing with Playwrightaffaan-m/ECC · MIT Download the skill Quick start
- 1Download and unzip the skill. Download the ZIP for e2e-testing from this page and unzip it. The folder should contain SKILL.md.
- 2Place it in the skills folder. Move the folder to ~/.claude/skills/ for personal use, or to .claude/skills/ inside your project. Alternatively, upload it under Settings → Capabilities → Skills in the Claude apps.
- 3Confirm your project prerequisites. Make sure Node.js and npm are installed, Playwright (@playwright/test) and its browser binaries are set up, and your web app runs locally or at a BASE_URL.
- 4Ask for a specific task. Describe what you want in plain language and mention Playwright, for example a Page Object Model for one page of your app.
- 5Review and run the code yourself. The skill supplies code and guidance only. Review what the agent writes, then run npx playwright test in your project.
- 6Add CI if needed. If you use GitHub Actions, adapt the workflow example so it runs the tests and uploads the playwright-report folder.
What the e2e-testing skill makes the agent do
A skill is a folder containing a SKILL.md file with instructions the agent reads when a task matches it. This one holds patterns for Playwright end-to-end tests: how to lay out test files, how to structure a Page Object Model, how to configure Playwright, how to handle flaky tests, how to collect artifacts and how to run the tests in GitHub Actions.
The skill only supplies guidance and code examples. It does not run tests itself, and it does not run scripts or use the network. Running anything still requires your own project and a browser.
- Suggests a folder layout with e2e, auth, features, api, fixtures and a playwright.config.ts
- Shows a Page Object Model class built on data-testid locators
- Shows a playwright.config.ts with Chrome, Firefox, Safari-style WebKit and Pixel 5 projects
- Covers quarantining flaky tests, retries and repeated runs
- Covers screenshots, traces, video, a test report template and a GitHub Actions workflow
Install the e2e-testing skill
Download the ZIP for the skill from this page and unzip it. For a personal setup, put the unzipped folder in ~/.claude/skills/. To limit it to a single project, put it in that project's .claude/skills/ folder instead.
If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal use: ~/.claude/skills/
- Single project: .claude/skills/ inside the project
- Claude apps: Settings → Capabilities → Skills
Set up what the skill expects
The skill assumes a working Node.js and npm setup, Playwright (@playwright/test) with its browser binaries, and a web application running locally or at a BASE_URL. The config example reads BASE_URL from the environment and falls back to http://localhost:3000.
If you want the CI example, you also need GitHub Actions. The skill is specific to Playwright; it does not cover Cypress or Selenium.
- Node.js and npm
- Playwright (@playwright/test) and browser binaries
- A running web app, or a BASE_URL pointing at one
- GitHub Actions, only for the CI workflow example
npx playwright test tests/search.spec.ts --repeat-each=10Trigger the skill with natural requests
You do not need a special command. Describe the task in plain words and mention Playwright, so the agent matches the skill. Name the feature, the page or the problem you are facing.
Good requests are specific. Say what you want built, fixed or checked, and which project or test file it concerns.
- Write Playwright tests for the login and logout flow using a Page Object Model
- Our search test passes locally but fails in CI about one time in five. Help me find the cause using Playwright patterns
- Set up a playwright.config.ts that runs Chromium, Firefox, WebKit and a mobile Chrome project
- Add a GitHub Actions workflow that runs Playwright and uploads the HTML report
Stabilise flaky tests and collect artifacts
The skill recommends replacing fixed waits with locators that auto-wait and with waits for a specific network response. To find instability, it suggests repeating a test many times or retrying it. To keep a known-bad test out of the way, it shows test.fixme and conditional test.skip with a reason that references an issue.
For debugging, the config sets traces to on-first-retry, screenshots to only-on-failure, and video to retain-on-failure. The skill also shows how to take explicit screenshots in a test.
- Use page.locator(...).click() instead of page.click(...) so Playwright waits for the element
- Avoid page.waitForTimeout with a fixed delay; wait for a response or a visible state instead
- Quarantine a test with test.fixme and a note that links to the issue
await page.screenshot({ path: 'artifacts/after-login.png' })What people use it for
- Building a Page Object Model and first tests for a search page in a web app
- Setting up a multi-browser Playwright config for Chromium, Firefox, WebKit and a mobile profile
- Diagnosing a test that fails only sometimes, using repeated runs and retries
- Adding a GitHub Actions workflow that runs E2E tests and keeps the HTML report for 30 days
Frequently asked questions
How do I install the e2e-testing agent skill?
Download the ZIP from this page and unzip it. Place the folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder. In the Claude apps, you can instead upload it under Settings → Capabilities → Skills.
What do I need before using the e2e-testing skill?
You need Node.js and npm, Playwright (@playwright/test) with its browser binaries, and a web app running locally or at a BASE_URL. GitHub Actions is only needed for the CI example.
Is the e2e-testing skill free?
The source is licensed under MIT. The skill itself does not run tests or call external services, and the source does not mention any fees.
Does the skill run my Playwright tests?
No. It only provides guidance and code examples. The agent would still need your project, Playwright and a browser to execute anything.
Does this skill work with Cypress or Selenium?
No. The patterns are specific to Playwright, and the skill does not cover Cypress or Selenium.
What should I do about flaky Playwright tests?
The skill suggests repeating the test with npx playwright test with --repeat-each, retrying it with --retries, replacing fixed waits with specific waits, and quarantining the test with test.fixme while you fix it.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are building or repairing a Playwright suite for a web app and want a structured reference for test layout, Page Object Model, cross-browser config, flaky test handling and CI artifacts. Pick something else if you use Cypress, Selenium or another framework, or if you want an agent that runs tests for you rather than one that supplies guidance.
Download the skill