Guide · Agent skill
How to use the Playwright E2E Testing Patterns agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The e2e-testing skill is a set of written conventions that an AI coding agent follows when you ask it to work on Playwright end-to-end tests. Playwright drives real web browsers to check that an app works from a user's point of view. This guide explains what the skill changes, how to install it, how to ask for it in plain language, and what you need before it is useful.
Playwright E2E Testing Patternsaffaan-m/ECC · MIT Download the skill Quick start
- 1Download and unzip the skill. Download the e2e-testing ZIP from this page and unzip it to get the skill folder containing SKILL.md.
- 2Place the skill folder. Copy it to ~/.claude/skills/ for personal use, or to .claude/skills/ inside your project. In the Claude apps, upload the ZIP under Settings → Capabilities → Skills instead.
- 3Prepare your app and Playwright. Make sure you have Node.js and npm, the @playwright/test library, and a web app running locally or at a staging URL.
- 4Ask for the task in plain language. Describe the Playwright work you need, such as writing page objects or fixing flaky tests in CI, and name the pages involved.
- 5Review the generated files. Check the test folders, page objects and playwright.config.ts the agent produces against your project's conventions.
- 6Run the tests and read the artifacts. Run npx playwright test, and if a test fails, open the HTML report, screenshots, videos or traces it saved.
What the skill makes the agent do
Once installed, the agent follows the patterns in the skill's SKILL.md file when it writes or changes Playwright tests. The source covers test folder layout, Page Object Model classes that wrap page elements, a Playwright configuration across several browsers, a GitHub Actions workflow for CI, saving screenshots, videos and traces, and strategies for flaky tests.
The skill's own description says it applies when you are writing Playwright tests, structuring page objects, or fixing flaky E2E runs in CI. The patterns use data-testid selectors and auto-waiting locators, and they avoid fixed sleeps such as waitForTimeout.
- Test folders split into auth, features and api under tests/e2e, with shared fixtures in tests/fixtures
- Page object classes that hold locators and actions for one page
- playwright.config.ts with retries and workers that change when CI is set, plus HTML, JUnit and JSON reporters
- A quarantine approach for flaky tests using test.fixme and conditional test.skip
- A CI workflow that uploads the playwright-report folder even when tests fail
Install the e2e-testing skill
Download the skill ZIP from this page and unzip it. Place the folder in one of two locations. For a personal install available to all your projects, use ~/.claude/skills/. For a single project, put it in that project's .claude/skills/ folder.
In the Claude apps you can instead upload the ZIP under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Trigger the skill with natural requests
You do not need a special command. Describe the task in plain language that matches the skill's description. The agent should pick up the skill when your request involves Playwright tests, page objects, or flaky E2E runs in CI.
Name the app and the goal. The more concrete you are about the page and the failure, the more useful the output.
- Write Playwright tests for the login and registration pages of my app, using page objects.
- Restructure my existing Playwright suite into a Page Object Model layout.
- Our E2E tests pass locally but fail intermittently in GitHub Actions. Help me find the cause.
- Add a GitHub Actions workflow that runs my Playwright tests against our staging URL and saves the report.
Examples of the patterns in the skill
The source shows a page object for a search page. It defines locators in the constructor, a goto method that waits for the page to load, and a search method that waits for the /api/search response instead of sleeping. Tests call these methods and then assert with expect.
For flaky runs, the source recommends repeating a suspect spec to reproduce the problem, and replacing fixed waits with waits for a specific response or a visible element. A failing run can save a screenshot, a video and a trace, which the report template lists as artifacts to review.
npx playwright test tests/search.spec.ts --repeat-each=10
npx playwright test tests/search.spec.ts --retries=3Set up the Playwright configuration and CI
The skill's playwright.config.ts example sets testDir to ./tests/e2e, reads BASE_URL from the environment with http://localhost:3000 as a fallback, and keeps trace on the first retry, screenshots only on failure and video retained on failure. It defines projects for Desktop Chrome, Desktop Firefox, Desktop Safari and Pixel 5.
The CI example runs npm ci, installs browsers with npx playwright install --with-deps, runs npx playwright test with BASE_URL set from a repository variable, and uploads the report. Adjust the Node version and the variable name to match your repository.
- Set the STAGING_URL repository variable if you use the example workflow unchanged
- Review the workers and retries values before relying on them in CI
- run: npx playwright install --with-deps
- run: npx playwright test
env:
BASE_URL: ${{ vars.STAGING_URL }}Requirements and safety notes
You need Node.js and npm, the @playwright/test library, a web application to test (running locally or at a staging URL), and GitHub Actions if you use the provided CI workflow. The skill's source describes no scripts and no network use.
The examples include a mocked wallet provider and a trade test that is skipped when NODE_ENV is production. The source does not describe safeguards for real accounts, real credentials or live payments. Run these tests only against test data or a staging environment, and review any example that touches money or wallets before you use it.
- Runs scripts: no
- Uses network: no
- Use test accounts and staging URLs, not real customer accounts
- Treat the wallet and trade examples as illustrations that need your own safeguards
Tips for getting good results
Give the agent real context: your folder layout, your selectors, and the error text from the failing CI log. The skill's patterns work best when the agent can see how your app is built.
Check generated tests by running them. Use the repeat option from the flaky section before trusting a new test in CI.
- Keep your existing data-testid attributes; the examples depend on them
- Replace any page.waitForTimeout call the agent leaves in place with a condition it can wait for
- Quarantine a flaky test with test.fixme and a linked issue instead of deleting it
- Open the HTML report and trace from the artifacts folder when a CI run fails
What people use it for
- Structuring a new Playwright suite with auth, features and api folders and shared fixtures
- Converting a set of raw page.click and page.fill calls into page object classes
- Diagnosing a test that fails only in GitHub Actions by repeating it and checking its artifacts
- Adding a CI workflow that runs against a staging URL and keeps the report for 30 days
Frequently asked questions
Is the Playwright E2E Testing Patterns skill free?
The skill is listed under the MIT licence, as stated in its SKILL.md. The page does not list a price, and nothing in the source describes a paid tier.
What do I need before I can use this skill?
You need Node.js and npm, the @playwright/test library, a web application to test (running locally or at a staging URL), and GitHub Actions if you want to use the provided CI workflow.
How do I install an agent skill like this one?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps, you can upload the ZIP under Settings → Capabilities → Skills.
Does this skill work with Cypress or Selenium?
No. The patterns are Playwright-specific, so projects that use Cypress, Selenium or another test framework will not get useful output from it.
Why do my Playwright tests pass locally but fail in CI?
The skill's guidance points to race conditions, fixed timeouts and animation timing as common causes. Replacing fixed waits with waits for a specific response or a visible element, and repeating the test to reproduce the failure, are the approaches it describes.
Does the skill run scripts or access the network?
The source states that the skill runs no scripts and uses no network. It contains instructions and example code that the agent writes into your project.
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
This skill suits developers who are writing or restructuring a Playwright suite, or whose E2E tests fail intermittently in CI and need a clear diagnosis approach. It is a poor fit for teams using Cypress, Selenium or another framework, for people without a web app to test, and for anyone planning to run its wallet or trade examples against live systems with real accounts.
Download the skill