playwright
Provides comprehensive guidance for Playwright testing including browser automation, test writing, page objects, and cross-browser testing. Use when the user asks about Playwright, needs to write E2E tests, automate browsers, or test web applications across browsers.
- Installs
- 98
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/partme-ai/full-stack-skills --skill playwright- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads playwright automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
When to use this skill
Use this skill whenever the user wants to:
- Write end-to-end browser tests with Playwright (Chromium, Firefox, WebKit)
- Use auto-waiting locators and built-in assertions
- Handle multiple pages, tabs, and browser contexts
- Configure Playwright projects for CI execution with traces and screenshots
- Implement the Page Object Model pattern for maintainable tests
How to use this skill
Workflow
- Initialize Playwright:
npm init playwrightto generate config and sample tests - Write tests using auto-wait locators (
getByRole,getByLabel,getByText) - Run tests:
npx playwright testin headless, headed, or UI mode - Debug failures using traces, screenshots, and the Playwright Inspector
1. Basic Test
import { test, expect } from '@playwright/test';
test('homepage has title', async ({ page }) => {
await page.goto('https://example.com');
await expect(page).toHaveTitle(/Example/);
});
test('login flow', async ({ page }) => {
await page.goto('https://example.com/login');
await page.getByLabel('Username').fill('testuser');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Sign in' }).click();
await expect(page.getByText('Dashboard')).toBeVisible();
});
2. Page Object Model
class LoginPage {
constructor(private page: Page) {}
async login(username: string, password: string) {
await this.page.getByLabel('Username').fill(username);
await this.page.getByLabel('Password').fill(password);
await this.page.getByRole('button', { name: 'Sign in' }).click();
}
}
3. Configuration
// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
testDir: './tests',
retries: 2,
use: {
baseURL: 'https://example.com',
trace: 'on-first-retry',
screenshot: 'only-on-failure',
},
projects: [
{ name: 'chromium', use: { browserName: 'chromium' } },
{ name: 'firefox', use: { browserName: 'firefox' } },
{ name: 'webkit', use: { browserName: 'webkit' } },
],
});
4. Running Tests
npx playwright test # Run all tests headless
npx playwright test --headed # Run with browser visible
npx playwright test --ui # Interactive UI mode
npx playwright show-report # View HTML report
Best Practices
- Prefer role-based locators (
getByRole,getByLabel) over fragile XPath or CSS selectors - Keep tests independent and repeatable; use
beforeEachor fixtures to prepare state - Install browsers and dependencies in CI (
npx playwright install --with-deps) - Retain traces and screenshots on failure for debugging
- Use Playwright's built-in
expectassertions — they auto-retry
Resources
- Official documentation: https://playwright.dev/docs/intro
- API reference: https://playwright.dev/docs/api/class-playwright
- Best practices: https://playwright.dev/docs/best-practices
Keywords
playwright, E2E, end-to-end testing, cross-browser, auto-wait, locators, getByRole, trace, Page Object Model, Chromium, Firefox, WebKit
FAQ
What does the playwright skill do?
Provides comprehensive guidance for Playwright testing including browser automation, test writing, page objects, and cross-browser testing. Use when the user asks about Playwright, needs to write E2E tests, automate browsers, or test web applications across browsers.
How do I install playwright?
Run npx skills add https://github.com/partme-ai/full-stack-skills --skill playwright in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/playwright/ (personal) or .claude/skills/playwright/ (project).
Which AI agents can use playwright?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is playwright safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains playwright?
It is published by partme-ai in partme-ai/full-stack-skills. It has 98 recorded installs.
More from partme-ai/full-stack-skills
electron
partme-ai/full-stack-skills
Build cross-platform desktop applications with Electron, covering main/renderer process architecture, IPC communication, BrowserWindow management, menus, tray icons, packaging, and security best practices. Use when the user asks about Electron, needs to create desktop applications, implement Electron features, or build cross-platform desktop apps.
element-plus-vue3
partme-ai/full-stack-skills
Provides comprehensive guidance for Element Plus Vue 3 component library including installation, components, themes, internationalization, and API reference. Use when the user asks about Element Plus for Vue 3, needs to build Vue 3 applications with Element Plus, or customize component styles.
uniapp-project
partme-ai/full-stack-skills
Provides per-component and per-API examples with cross-platform compatibility details for uni-app, covering built-in components, uni-ui components, and APIs (network, storage, device, UI, navigation, media). Use when the user needs official uni-app components or APIs, wants per-component examples with doc links, or needs platform compatibility checks.
drawio-flowchart
partme-ai/full-stack-skills
Creates flowcharts, swim lane diagrams, and business process diagrams using Draw.io (diagrams.net). Covers standard flowchart shapes (process, decision, start/end), connectors, auto-layout, and export to PNG/SVG/PDF. Use when the user needs to visualize workflows, decision trees, or business processes.
vue3
partme-ai/full-stack-skills
Guidance for Vue 3 using the official guide and API reference. Use when the user needs Vue 3 concepts, patterns, or API details to build components, apps, and tooling.
course-designer
partme-ai/full-stack-skills
Open the skill to read its SKILL.md instructions.
Popular testing & qa skills
tdd
mattpocock/skills
Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.
grilling
mattpocock/skills
Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.
migrate-to-shoehorn
mattpocock/skills
Migrate test files from as type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace as in tests, or needs partial test data.
run-train
lllllllama/rigorpilot-skills
Rigor Train skill for deep learning research repositories. Use when a documented or selected training command should be run conservatively for startup verification, short-run verification, full kickoff, or resume, with command, config, seed, log, checkpoint, status, and metric evidence written to standardized trainoutputs/. Do not use for environment setup, exploratory sweeps, speculative idea implementation, or end-to-end orchestration.
test-driven-development
obra/superpowers
Use when implementing any feature or bugfix, before writing implementation code
finishing-a-development-branch
obra/superpowers
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work