Playwright

Skill bg-szy/TOP-SKILLS/skills/superskills/playwright

全球最大的 Claude Code 技能聚合库 · 收录 3900+ 来自 12+ 来源的技能，提供在线搜索与趋势分析看板 / The world's largest Claude Code skill aggregation hub — 3900+ skills from 12+ sources with online search and trend dashboard

Install

npx -y skills add bg-szy/TOP-SKILLS --skill playwright

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

End-to-end testing with Playwright — generate, run, and debug E2E tests.

SKILL.md

2.5 KB, as published. Nobody here has run it

Playwright E2E Testing

Generate and run Playwright end-to-end tests for web applications.

Prerequisites

npx playwright --version

If not installed:

npm init playwright@latest
# or add to existing project:
npm install -D @playwright/test && npx playwright install

Workflow

1. Analyze

Read the source files for the page/component to test. Understand routes, interactive elements, and expected behaviors.

2. Generate Test File

Create a test file following the project's existing patterns and directory structure.

import { test, expect } from '@playwright/test';

test.describe('Feature Name', () => {
  test.beforeEach(async ({ page }) => {
    // Setup: navigate, authenticate, seed data
  });

  test('should do expected behavior', async ({ page }) => {
    // Arrange
    // Act
    // Assert
  });
});

3. Run Tests

npx playwright test <file>           # Run specific test file
npx playwright test --headed          # With visible browser
npx playwright test --ui              # Playwright UI mode
npx playwright test --trace on        # Capture trace for debugging

4. Debug Failures

Read error output carefully
Use --trace on and open trace viewer: npx playwright show-trace trace.zip
Take screenshots on failure: await page.screenshot({ path: 'debug.png' })
Use page.pause() for step-by-step debugging in headed mode

Capabilities

Navigation: page.goto(), URL assertions, redirect verification
Forms: page.fill(), page.selectOption(), page.check(), multi-step wizards
Assertions: expect(page).toHaveURL(), expect(locator).toBeVisible(), toHaveText()
Screenshots: page.screenshot(), full-page, element-level
Visual regression: expect(page).toHaveScreenshot() with thresholds
Accessibility: @axe-core/playwright, ARIA role selectors, keyboard navigation
Network: page.route() for mocking, page.waitForResponse() for API calls

Tips

Use data-testid attributes for stable selectors
Prefer user-visible text and ARIA roles over CSS selectors
Use test.step() for complex multi-step flows
Set baseURL in playwright.config.ts
Use page.waitForResponse() for async navigation
Place test files alongside existing test patterns in the project