SkillAtlasSkill 详情

playwright-best-practices

This is the open-source content repository behind

审核状态：已审核Quality 72Security 90

复制安装命令

用 Codex 或 Claude 安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它先审查 Skill 页面再帮你安装。

复制前请先查看来源、License 和安全提示。

项目 README

来源文件：README.md

抓取于 2026年8月31日

Skill Store — Marketplace Repository

This is the open-source content repository behind Skill Store. It stores every approved Agent Skill, the records that go with it, and the automated security audits published with each skill.

This repo is a companion to the Skill Store platform, not the place to submit skills. Skills are added through skillstore.io — its review pipeline writes to this repo automatically. Please do not open a pull request here to add a skill; PRs adding skills will be closed. See Contributing a skill below.

Installing a skill

The recommended way to install any skill is the skillstore CLI — one command works for both Claude Code and Codex:

npx skillstore add author/skill-name

For example:

npx skillstore add aiskillstore/code-review

It downloads the skill and drops it into the right skills/ directory for your tool. Claude Code auto-discovers it; for Codex, restart the session.

Prefer to do it by hand, or installing via Claude Web? See the full Installation Guides for every method (CLI, manual, and ZIP upload) and the scope directories (~/.agents/skills/, .claude/skills/, ~/.claude/skills/, .codex/skills/, …).

Contributing a skill

Submit through the platform — not through a pull request:

  1. Go to skillstore.io/submit.
  2. Enter the GitHub repository URL that contains your SKILL.md.
  3. Your submission runs through automated security analysis.
  4. A maintainer reviews and approves it.
  5. On approval, the skill is published here and appears on skillstore.io.

What makes a valid skill

  • SKILL.md — the skill definition (required, per the Agent Skills spec)
  • Supporting files the skill references (optional)
  • LICENSE (recommended)

Security audit

Every submission is scanned automatically before it can be published. The audit flags things like:

  • Dangerous code patterns (eval, exec, raw system commands)
  • File access outside the project scope
  • Network calls to external hosts
  • Obfuscated or minified code
  • Credential / secret handling

Security analysis is report-only: findings inform maintainers and users, but a risk result does not automatically block an otherwise approved skill from being published. See our Security Trust Center for the methodology, limitations, and risk-level definitions.

Live Security Passport example:

Skillstore security

Repository layout

.
├── skills/        # Approved, published skills (one folder each, with SKILL.md)
├── pending/       # Submissions awaiting review
├── packages/
│   ├── cli/       # The `skillstore` CLI (npx skillstore add …)
│   └── skillstore/
├── schemas/       # JSON schemas for skill records
├── scripts/       # Maintenance & scoring scripts
└── .github/workflows/   # Submission, audit, and sync automation

The contents of this repo are maintained by Skill Store's automated pipeline. Manual changes are limited to maintainers.

Links

License

The marketplace catalog is MIT-licensed. Individual skills carry their own licenses — check each skill's LICENSE file.

浏览器与自动化测试与质量内容与创作

低风险

  • 来源需自行核对维护者身份。
  • 未检测到明显脚本安装指令。
  • 可能需要外部 token、网络权限或第三方服务。
  • 未检测到高风险命令。
  • 扫描发现：0 条。

Codex — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库：git clone https://github.com/aiskillstore/marketplace.git
  3. 将 "skills/0xbigboss/playwright-best-practices" 文件夹复制到 Codex 的 skills 目录中。
  4. 重启 Codex 让新的 skill 生效。

Codex — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Codex 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Codex 让新的 skill 生效。

Claude Code — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库：git clone https://github.com/aiskillstore/marketplace.git
  3. 将 "skills/0xbigboss/playwright-best-practices" 文件夹复制到 Claude Code 的 skills 目录中。
  4. 重启 Claude Code 让新的 skill 生效。

Claude Code — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Claude Code 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Claude Code 让新的 skill 生效。

Cursor — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库：git clone https://github.com/aiskillstore/marketplace.git
  3. 将 "skills/0xbigboss/playwright-best-practices" 文件夹复制到 Cursor 的 skills 目录中。
  4. 重启 Cursor 让新的 skill 生效。

Cursor — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Cursor 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Cursor 让新的 skill 生效。

GitHub Copilot — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库：git clone https://github.com/aiskillstore/marketplace.git
  3. 将 "skills/0xbigboss/playwright-best-practices" 文件夹复制到 GitHub Copilot 的 skills 目录中。
  4. 重启 GitHub Copilot 让新的 skill 生效。

GitHub Copilot — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 GitHub Copilot 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 GitHub Copilot 让新的 skill 生效。

Windsurf — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库：git clone https://github.com/aiskillstore/marketplace.git
  3. 将 "skills/0xbigboss/playwright-best-practices" 文件夹复制到 Windsurf 的 skills 目录中。
  4. 重启 Windsurf 让新的 skill 生效。

Windsurf — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Windsurf 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Windsurf 让新的 skill 生效。
查看 SKILL.md 原文
name: playwright-best-practices
description: Use when writing or modifying Playwright tests (.spec.ts, .test.ts with @playwright/test imports).

Playwright Best Practices

CLI Context: Prevent Context Overflow

When running Playwright tests from Claude Code or any CLI agent, always use minimal reporters to prevent verbose output from consuming the context window.

Use --reporter=line or --reporter=dot for CLI test runs. Configure playwright.config.ts to default to minimal reporters when CI or CLAUDE env vars are set — see playwright-patterns.md for the config snippet.

Locator Priority (Most to Least Resilient)

Always prefer user-facing attributes:

  1. page.getByRole('button', { name: 'Submit' }) — accessibility roles
  2. page.getByLabel('Email') — form control labels
  3. page.getByPlaceholder('Search...') — input placeholders
  4. page.getByText('Welcome') — visible text (non-interactive)
  5. page.getByAltText('Logo') — image alt text
  6. page.getByTitle('Settings') — title attributes
  7. page.getByTestId('submit-btn') — explicit test contracts
  8. CSS/XPath — last resort, avoid

Core Rules

  • Web-first assertions: always await expect(locator).toBeVisible(), never expect(await locator.isVisible()).toBe(true) — web-first matchers auto-wait and retry
  • Test isolation: each test creates its own data; never share state between tests
  • Auth state reuse: save authenticated state via setup project + storageState; never log in via UI in every test
  • Fixtures over beforeEach: fixtures encapsulate setup + teardown, run on-demand, and compose

Anti-Patterns

  • page.waitForTimeout(ms) — use auto-waiting locators instead
  • page.locator('.class') — use role/label/testid
  • XPath selectors — fragile, use user-facing attributes
  • Shared state between tests — each test creates own data
  • UI login in every test — use setup project + storageState
  • Manual assertions without await — use web-first assertions
  • Hardcoded waits — rely on Playwright's auto-waiting
  • Default reporter in CI/agent — use --reporter=line or --reporter=dot

Checklist

  • Locators use role/label/testid, not CSS classes or XPath
  • All assertions use await expect() web-first matchers
  • Page objects define locators in constructor
  • No page.waitForTimeout() — use auto-waiting
  • Tests isolated — no shared state
  • Auth state reused via setup project
  • Network mocks set up before navigation
  • Test data created per-test or via fixtures
  • Debug logging added for complex flows
  • Minimal reporter (line/dot) used in CI/agent contexts

See playwright-patterns.md for Page Object Model, fixtures, network mocking, and configuration examples.

发现问题？提交给管理员复核

评分：

评论 (0)

暂无评论，成为第一个评论者吧！