Playwright E2E Tests
onyx-dot-app/onyx
Write and maintain Playwright end-to-end tests for the Onyx application.
Playwright E2E testing patterns. An agent skill from Gentleman-Programming/Gentleman-Skills.
$ npx skills add Gentleman-Programming/Gentleman-Skills --skill playwright -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Gentleman-Programming/Gentleman-Skills playwright --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Gentleman-Programming/Gentleman-Skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/curated/playwright .claude/skills/playwright && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "playwright" agent skill from https://github.com/Gentleman-Programming/Gentleman-Skills/tree/main/curated/playwright into .claude/skills/playwright/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Gentleman-Programming/Gentleman-Skills/tree/main/curated/playwrightType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Gentleman-Programming/Gentleman-Skills --skill playwright -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Gentleman-Programming/Gentleman-Skills playwright --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Gentleman-Programming/Gentleman-Skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/curated/playwright .agents/skills/playwright && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "playwright" agent skill from https://github.com/Gentleman-Programming/Gentleman-Skills/tree/main/curated/playwright into .agents/skills/playwright/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Gentleman-Programming/Gentleman-Skills --skill playwright -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Gentleman-Programming/Gentleman-Skills playwright --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Gentleman-Programming/Gentleman-Skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/curated/playwright .cursor/skills/playwright && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "playwright" agent skill from https://github.com/Gentleman-Programming/Gentleman-Skills/tree/main/curated/playwright into .cursor/skills/playwright/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Gentleman-Programming/Gentleman-Skills.git --path curated/playwright--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Gentleman-Programming/Gentleman-Skills --skill playwright -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Gentleman-Programming/Gentleman-Skills playwright --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Gentleman-Programming/Gentleman-Skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/curated/playwright .gemini/skills/playwright && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "playwright" agent skill from https://github.com/Gentleman-Programming/Gentleman-Skills/tree/main/curated/playwright into .gemini/skills/playwright/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Gentleman-Programming/Gentleman-Skills playwrightInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Gentleman-Programming/Gentleman-Skills --skill playwright -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Gentleman-Programming/Gentleman-Skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/curated/playwright .github/skills/playwright && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "playwright" agent skill from https://github.com/Gentleman-Programming/Gentleman-Skills/tree/main/curated/playwright into .github/skills/playwright/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Gentleman-Programming/Gentleman-Skills --skill playwright -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Gentleman-Programming/Gentleman-Skills playwright --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Gentleman-Programming/Gentleman-Skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/curated/playwright .opencode/skills/playwright && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "playwright" agent skill from https://github.com/Gentleman-Programming/Gentleman-Skills/tree/main/curated/playwright into .opencode/skills/playwright/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
playwrightPlaywright E2E testing patterns. An agent skill from Gentleman-Programming/Gentleman-Skills.
Playwright is an agent skill from Gentleman-Programming/Gentleman-Skills. Playwright E2E testing patterns. Trigger: When writing E2E tests - Page Objects, selectors, MCP workflow.
Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Testing & QA, covering End-to-end testing and Browser testing. It works with Playwright and Model Context Protocol. The repository describes itself as: Community-driven AI agent skills for Claude Code, OpenCode, and other AI assistants. Curated patterns and community contributions. The licence is Apache-2.0.
7 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit c8036a3. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Shell commands in SKILL.md call:
npxFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Playwright loads about 2.3k tokens when it runs. Until then it costs about 29 tokens; SKILL.md has 410 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from Gentleman-Programming/Gentleman-Skills at commit c8036a3, republished under its Apache-2.0 licence (© Gentleman-Programming). 410 words, ~2,306 tokens.
.claude/skills/playwright/SKILL.md (or your agent's skills folder).⚠️ If you have Playwright MCP tools, ALWAYS use them BEFORE creating any test:
If MCP NOT available: Proceed with test creation based on docs and code analysis.
Why This Matters:
tests/
├── base-page.ts # Parent class for ALL pages
├── helpers.ts # Shared utilities
└── {page-name}/
├── {page-name}-page.ts # Page Object Model
├── {page-name}.spec.ts # ALL tests here (NO separate files!)
└── {page-name}.md # Test documentationFile Naming:
sign-up.spec.ts (all sign-up tests)sign-up-page.ts (page object)sign-up.md (documentation)sign-up-critical-path.spec.ts (WRONG - no separate files)sign-up-validation.spec.ts (WRONG)// 1. BEST - getByRole for interactive elements
this.submitButton = page.getByRole("button", { name: "Submit" });
this.navLink = page.getByRole("link", { name: "Dashboard" });
// 2. BEST - getByLabel for form controls
this.emailInput = page.getByLabel("Email");
this.passwordInput = page.getByLabel("Password");
// 3. SPARINGLY - getByText for static content only
this.errorMessage = page.getByText("Invalid credentials");
this.pageTitle = page.getByText("Welcome");
// 4. LAST RESORT - getByTestId when above fail
this.customWidget = page.getByTestId("date-picker");
// ❌ AVOID fragile selectors
this.button = page.locator(".btn-primary"); // NO
this.input = page.locator("#email"); // NO| User Says | Action |
|---|---|
| "a test", "one test", "new test", "add test" | Create ONE test() in existing spec |
| "comprehensive tests", "all tests", "test suite", "generate tests" | Create full suite |
Examples:
import { Page, Locator, expect } from "@playwright/test";
// BasePage - ALL pages extend this
export class BasePage {
constructor(protected page: Page) {}
async goto(path: string): Promise<void> {
await this.page.goto(path);
await this.page.waitForLoadState("networkidle");
}
// Common methods go here (see Refactoring Guidelines)
async waitForNotification(): Promise<void> {
await this.page.waitForSelector('[role="status"]');
}
async verifyNotificationMessage(message: string): Promise<void> {
const notification = this.page.locator('[role="status"]');
await expect(notification).toContainText(message);
}
}
// Page-specific implementation
export interface LoginData {
email: string;
password: string;
}
export class LoginPage extends BasePage {
readonly emailInput: Locator;
readonly passwordInput: Locator;
readonly submitButton: Locator;
constructor(page: Page) {
super(page);
this.emailInput = page.getByLabel("Email");
this.passwordInput = page.getByLabel("Password");
this.submitButton = page.getByRole("button", { name: "Sign in" });
}
async goto(): Promise<void> {
await super.goto("/login");
}
async login(data: LoginData): Promise<void> {
await this.emailInput.fill(data.email);
await this.passwordInput.fill(data.password);
await this.submitButton.click();
}
async verifyCriticalOutcome(): Promise<void> {
await expect(this.page).toHaveURL("/dashboard");
}
}Always check existing page objects before creating new ones!
// ✅ GOOD: Reuse existing page objects
import { SignInPage } from "../sign-in/sign-in-page";
import { HomePage } from "../home/home-page";
test("User can sign up and login", async ({ page }) => {
const signUpPage = new SignUpPage(page);
const signInPage = new SignInPage(page); // REUSE
const homePage = new HomePage(page); // REUSE
await signUpPage.signUp(userData);
await homePage.verifyPageLoaded(); // REUSE method
await homePage.signOut(); // REUSE method
await signInPage.login(credentials); // REUSE method
});
// ❌ BAD: Recreating existing functionality
export class SignUpPage extends BasePage {
async logout() { /* ... */ } // ❌ HomePage already has this
async login() { /* ... */ } // ❌ SignInPage already has this
}Guidelines:
tests/ for existing page objects firstBasePage when:waitForPageLoad(), getCurrentUrl())isVisible(), waitForVisible())helpers.ts when:generateUniqueEmail(), generateTestUser())createTestUser(), cleanupTestData())expectNotificationToContain())seedDatabase(), resetState())waitForCondition(), retryAction())Before (BAD):
// Repeated in multiple page objects
export class SignUpPage extends BasePage {
async waitForNotification(): Promise<void> {
await this.page.waitForSelector('[role="status"]');
}
}
export class SignInPage extends BasePage {
async waitForNotification(): Promise<void> {
await this.page.waitForSelector('[role="status"]'); // DUPLICATED!
}
}After (GOOD):
// BasePage - shared across all pages
export class BasePage {
async waitForNotification(): Promise<void> {
await this.page.waitForSelector('[role="status"]');
}
}
// helpers.ts - data generation
export function generateUniqueEmail(): string {
return `test.${Date.now()}@example.com`;
}
export function generateTestUser() {
return {
name: "Test User",
email: generateUniqueEmail(),
password: "TestPassword123!",
};
}import { test, expect } from "@playwright/test";
import { LoginPage } from "./login-page";
test.describe("Login", () => {
test("User can login successfully",
{ tag: ["@critical", "@e2e", "@login", "@LOGIN-E2E-001"] },
async ({ page }) => {
const loginPage = new LoginPage(page);
await loginPage.goto();
await loginPage.login({ email: "user@test.com", password: "pass123" });
await expect(page).toHaveURL("/dashboard");
}
);
});Tag Categories:
@critical, @high, @medium, @low@e2e@signup, @signin, @dashboard@SIGNUP-E2E-001, @LOGIN-E2E-002### E2E Tests: {Feature Name}
**Suite ID:** `{SUITE-ID}`
**Feature:** {Feature description}
---
## Test Case: `{TEST-ID}` - {Test case title}
**Priority:** `{critical|high|medium|low}`
**Tags:**
- type → @e2e
- feature → @{feature-name}
**Description/Objective:** {Brief description}
**Preconditions:**
- {Prerequisites for test to run}
- {Required data or state}
### Flow Steps:
1. {Step 1}
2. {Step 2}
3. {Step 3}
### Expected Result:
- {Expected outcome 1}
- {Expected outcome 2}
### Key verification points:
- {Assertion 1}
- {Assertion 2}
### Notes:
- {Additional considerations}Documentation Rules:
npx playwright test # Run all
npx playwright test --grep "login" # Filter by name
npx playwright test --ui # Interactive UI
npx playwright test --debug # Debug mode
npx playwright test tests/login/ # Run specific folderplaywright, e2e, testing, page object model, selectors, end-to-end, mcp
© Gentleman-Programming, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in curated/playwright of Gentleman-Programming/Gentleman-Skills.
Open the folder on GitHubat commit c8036a3
Playwright next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Playwright this skillGentleman-Programming/Gentleman-Skills | 657 | — | ~2.3k | Automated safety check: Pass | Apache-2.0 | |
| Playwright E2E Testsonyx-dot-app/onyx | 32k | 1 repos | ~2.8k | Automated safety check: Notes | Custom licence | |
| E2E VerificationChorus-AIDLC/Chorus | 1.2k | — | ~1.5k | Automated safety check: Notes | AGPL-3.0 | |
| Playwright Testingchongdashu/vibejam-starter-pack | 149 | — | ~2.2k | Automated safety check: Pass | None | |
| Frontend Playwright E2Eansible/ansible-ui | 113 | — | ~2.5k | Automated safety check: Notes | Apache-2.0 | |
| Playwright POM Discoverycomet-ml/opik | 22k | — | ~4.4k | Automated safety check: Pass | Apache-2.0 |
onyx-dot-app/onyx
Write and maintain Playwright end-to-end tests for the Onyx application.
Chorus-AIDLC/Chorus
A skill your agent uses when manually verifying a Chorus frontend change in a real browser — finding local login credentials, driving the running dev server with the Playwright MCP, logging in…
chongdashu/vibejam-starter-pack
Plan, implement, and debug frontend tests: unit/integration/E2E/visual/a11y.
ansible/ansible-ui
Write, run, and debug Playwright E2E / integration / live tests.
comet-ml/opik
Procedure for choosing stable selectors when building Page Object Models for the Opik E2E suite by exploring the live UI with the Playwright MCP.
classmethod/tsumiki
This skill should be used when the user asks to "dev-webtest", "Webテスト", "画面の動作確認", "E2Eテスト", "web test", "visual check", "モンキーテスト", "アクセシビリティチェック", "レスポンシブテスト", "フォームテスト".
Gentleman-Programming/Gentleman-Skills
Core catalog of 8 critical Elixir/Phoenix anti-patterns covering error handling, separation of concerns, Ecto queries, and testing.
Gentleman-Programming/Gentleman-Skills
Creates new AI agent skills following the Agent Skills spec.
Gentleman-Programming/Gentleman-Skills
Angular architecture: Scope Rule, project structure, file naming, style guide.
Gentleman-Programming/Gentleman-Skills
Angular core patterns: standalone components, signals, inject, control flow, zoneless.
Gentleman-Programming/Gentleman-Skills
Angular forms: Signal Forms (experimental) and Reactive Forms.
Gentleman-Programming/Gentleman-Skills
Angular performance: NgOptimizedImage, @defer, lazy loading, SSR.
Works with
Categories
Playwright E2E testing patterns. An agent skill from Gentleman-Programming/Gentleman-Skills. Playwright is an agent skill from Gentleman-Programming/Gentleman-Skills. Playwright E2E testing patterns.
Playwright fits situations like: tasks that involve End-to-end testing; tasks that involve Browser testing.
Run `npx skills add Gentleman-Programming/Gentleman-Skills --skill playwright -a claude-code`. Or copy the skill folder (curated/playwright in Gentleman-Programming/Gentleman-Skills) into .claude/skills/playwright in your project. Claude Code loads it when a task matches its description.
Run `npx skills add Gentleman-Programming/Gentleman-Skills --skill playwright -a codex`. Or copy the skill folder (curated/playwright in Gentleman-Programming/Gentleman-Skills) into .agents/skills/playwright in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Gentleman-Programming/Gentleman-Skills --skill playwright -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/playwright, .gemini/skills/playwright, .github/skills/playwright and .opencode/skills/playwright in your project.
Going by SKILL.md and its folder, Playwright needs the command-line tools its instructions call (npx). Our summary lists: Node.js.
SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Playwright is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.3k tokens (SKILL.md is roughly 9.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Playwright: Playwright E2E Tests (onyx-dot-app/onyx, 32k stars), E2E Verification (Chorus-AIDLC/Chorus, 1.2k stars), Playwright Testing (chongdashu/vibejam-starter-pack, 149 stars) and Frontend Playwright E2E (ansible/ansible-ui, 113 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Gentleman-Programming (a GitHub organization) maintains it in Gentleman-Programming/Gentleman-Skills, which has 657 GitHub stars. The repository holds 23 skills in this directory. The repository was last updated on March 28, 2026.
Source: Gentleman-Programming/Gentleman-Skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.