Playwright E2E testing patterns. An agent skill from Gentleman-Programming/Gentleman-Skills.

Apache-2.0Auto-check passedTesting & QA

Install Playwright

skills CLI
$ npx skills add Gentleman-Programming/Gentleman-Skills --skill playwright -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Gentleman-Programming/Gentleman-Skills playwright --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ 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-src

Use ~/.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/

Facts

Skill name
playwright
GitHub stars
657
Token cost
~2.3k tokens
SKILL.md length
410 words
Files
1
Skills in repo
23
Repo updated
First seen
Licence
Apache-2.0

At a glance

Playwright E2E testing patterns. An agent skill from Gentleman-Programming/Gentleman-Skills.

  • Works in 7 steps: Navigate to target page → Take snapshot to see page structure and… → Interact with forms/elements to verify… → …
  • Tasks that involve End-to-end testing
  • SKILL.md covers MCP Workflow (MANDATORY If…, File Structure, Selector Priority (REQUIRED) and Scope Detection (ASK IF…, plus 7 more sections
  • Calls npx

What it does

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.

When your agent uses it

  • Tasks that involve End-to-end testing
  • Tasks that involve Browser testing

Example prompts

  • “/playwright”

Requirements

  • Node.js

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

  1. Navigate to target page
  2. Take snapshot to see page structure and elements
  3. Interact with forms/elements to verify exact user flow
  4. Take screenshots to document expected states
  5. Verify page transitions through complete flow (loading, success, error)
  6. Document actual selectors from snapshots (use real refs and labels)
  7. Only after exploring create test code with verified selectors

What it can do on your machine

Read from SKILL.md and the folder at commit c8036a3. It shows what the files ask for, not the result of running them.

  • Tool permissions

    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.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    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.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

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.

Always · name and description, kept in context so the agent knows when to use it
~29
When it runs · the whole SKILL.md, loaded when a task matches
~2.3k

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.

Safety

Auto-check passed

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.

SKILL.md

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.

Download SKILL.mdSave it as .claude/skills/playwright/SKILL.md (or your agent's skills folder).
name
playwright
description
Playwright E2E testing patterns. Trigger: When writing E2E tests - Page Objects, selectors, MCP workflow.
license
Apache-2.0
metadata.author
gentleman-programming
metadata.version
1.1

MCP Workflow (MANDATORY If Available)

⚠️ If you have Playwright MCP tools, ALWAYS use them BEFORE creating any test:

  1. Navigate to target page
  2. Take snapshot to see page structure and elements
  3. Interact with forms/elements to verify exact user flow
  4. Take screenshots to document expected states
  5. Verify page transitions through complete flow (loading, success, error)
  6. Document actual selectors from snapshots (use real refs and labels)
  7. Only after exploring create test code with verified selectors

If MCP NOT available: Proceed with test creation based on docs and code analysis.

Why This Matters:

  • ✅ Precise tests - exact steps needed, no assumptions
  • ✅ Accurate selectors - real DOM structure, not imagined
  • ✅ Real flow validation - verify journey actually works
  • ✅ Avoid over-engineering - minimal tests for what exists
  • ✅ Prevent flaky tests - real exploration = stable tests
  • ❌ Never assume how UI "should" work

File Structure

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 documentation

File 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)

Selector Priority (REQUIRED)

typescript
// 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

Scope Detection (ASK IF AMBIGUOUS)

User SaysAction
"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:

  • "Create a test for user sign-up" → ONE test only
  • "Generate E2E tests for login page" → Full suite
  • "Add a test to verify form validation" → ONE test to existing spec

Page Object Pattern

typescript
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");
  }
}
Show full SKILL.md (184 more words)Show less

Page Object Reuse (CRITICAL)

Always check existing page objects before creating new ones!

typescript
// ✅ 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:

  • Check tests/ for existing page objects first
  • Import and reuse existing pages
  • Create page objects only when page doesn't exist
  • If test requires multiple pages, ensure all page objects exist (create if needed)

Refactoring Guidelines

Move to BasePage when:
  • ✅ Navigation helpers used by multiple pages (waitForPageLoad(), getCurrentUrl())
  • ✅ Common UI interactions (notifications, modals, theme toggles)
  • ✅ Verification patterns repeated across pages (isVisible(), waitForVisible())
  • ✅ Error handling that applies to all pages
  • ✅ Screenshot utilities for debugging
Move to helpers.ts when:
  • ✅ Test data generation (generateUniqueEmail(), generateTestUser())
  • ✅ Setup/teardown utilities (createTestUser(), cleanupTestData())
  • ✅ Custom assertions (expectNotificationToContain())
  • ✅ API helpers for test setup (seedDatabase(), resetState())
  • ✅ Time utilities (waitForCondition(), retryAction())

Before (BAD):

typescript
// 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):

typescript
// 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!",
  };
}

Test Pattern with Tags

typescript
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:

  • Priority: @critical, @high, @medium, @low
  • Type: @e2e
  • Feature: @signup, @signin, @dashboard
  • Test ID: @SIGNUP-E2E-001, @LOGIN-E2E-002

Test Documentation Format ({page-name}.md)

markdown
### 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:

  • ❌ NO general test running instructions
  • ❌ NO file structure explanations
  • ❌ NO code examples or tutorials
  • ❌ NO troubleshooting sections
  • ✅ Focus ONLY on specific test case
  • ✅ Keep under 60 lines when possible

Commands

bash
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 folder

Keywords

playwright, 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

Files

Just SKILL.md in curated/playwright of Gentleman-Programming/Gentleman-Skills.

Open the folder on GitHubat commit c8036a3

Compare with similar skills

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.

Playwright compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Playwright this skillGentleman-Programming/Gentleman-Skills657—~2.3kAutomated safety check: PassApache-2.0
Playwright E2E Testsonyx-dot-app/onyx32k1 repos~2.8kAutomated safety check: NotesCustom licence
E2E VerificationChorus-AIDLC/Chorus1.2k—~1.5kAutomated safety check: NotesAGPL-3.0
Playwright Testingchongdashu/vibejam-starter-pack149—~2.2kAutomated safety check: PassNone
Frontend Playwright E2Eansible/ansible-ui113—~2.5kAutomated safety check: NotesApache-2.0
Playwright POM Discoverycomet-ml/opik22k—~4.4kAutomated safety check: PassApache-2.0

Similar skills

  • Playwright E2E Tests

    onyx-dot-app/onyx

    Write and maintain Playwright end-to-end tests for the Onyx application.

    32k GitHub starsUsed in 1 repo~2.8k tokens
    Testing & QAAuto-check: notes
  • E2E Verification

    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…

    1.2k GitHub stars~1.5k tokensUpdated today
    Testing & QAAuto-check: notes
  • Playwright Testing

    chongdashu/vibejam-starter-pack

    Plan, implement, and debug frontend tests: unit/integration/E2E/visual/a11y.

    149 GitHub stars~2.2k tokensUpdated 5 mo ago
    Testing & QAAuto-check passed
  • Frontend Playwright E2E

    ansible/ansible-ui

    Write, run, and debug Playwright E2E / integration / live tests.

    113 GitHub stars~2.5k tokensUpdated yesterday
    Testing & QAAuto-check: notes
  • Procedure for choosing stable selectors when building Page Object Models for the Opik E2E suite by exploring the live UI with the Playwright MCP.

    22k GitHub stars~4.4k tokensUpdated today
    Testing & QAAuto-check passed
  • Dev Webtest

    classmethod/tsumiki

    This skill should be used when the user asks to "dev-webtest", "Webテスト", "画面の動作確認", "E2Eテスト", "web test", "visual check", "モンキーテスト", "アクセシビリティチェック", "レスポンシブテスト", "フォームテスト".

    974 GitHub stars~4.2k tokensUpdated 2 mo ago
    Testing & QAAuto-check passed

More from Gentleman-Programming/Gentleman-Skills

All 23 skills in this repo
  • Elixir Antipatterns

    Gentleman-Programming/Gentleman-Skills

    Core catalog of 8 critical Elixir/Phoenix anti-patterns covering error handling, separation of concerns, Ecto queries, and testing.

    657 GitHub stars~2.1k tokensUpdated 6 mo ago
    Auto-check passed
  • Skill Creator

    Gentleman-Programming/Gentleman-Skills

    Creates new AI agent skills following the Agent Skills spec.

    657 GitHub stars~1.1k tokensUpdated 6 mo ago
    Auto-check: notes
  • Angular Architecture

    Gentleman-Programming/Gentleman-Skills

    Angular architecture: Scope Rule, project structure, file naming, style guide.

    657 GitHub stars~823 tokensUpdated 6 mo ago
    Auto-check passed
  • Angular Core

    Gentleman-Programming/Gentleman-Skills

    Angular core patterns: standalone components, signals, inject, control flow, zoneless.

    657 GitHub stars~1.1k tokensUpdated 6 mo ago
    Auto-check passed
  • Angular Forms

    Gentleman-Programming/Gentleman-Skills

    Angular forms: Signal Forms (experimental) and Reactive Forms.

    657 GitHub stars~687 tokensUpdated 6 mo ago
    Auto-check passed
  • Angular Performance

    Gentleman-Programming/Gentleman-Skills

    Angular performance: NgOptimizedImage, @defer, lazy loading, SSR.

    657 GitHub stars~703 tokensUpdated 6 mo ago
    Auto-check passed

Categories

Questions about Playwright

What does Playwright do?

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.

When should I use Playwright?

Playwright fits situations like: tasks that involve End-to-end testing; tasks that involve Browser testing.

How do I install Playwright in Claude Code?

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.

How do I install Playwright in Codex?

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.

Can I use Playwright in Cursor, Gemini CLI or GitHub Copilot?

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.

What does Playwright need to run?

Going by SKILL.md and its folder, Playwright needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Playwright access the network?

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.

Is Playwright safe to install?

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.

What licence does Playwright use?

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.

How many tokens does Playwright use?

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.

What are the alternatives to Playwright?

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.

Who maintains Playwright?

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.