メニュー
Guides the creation of Playwright E2E tests from planning through implementation. Covers test plan creation, data seeding, Page Object Model development, and test writing with human checkpoints at each stage.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/devclarityai/tests-demo-devclarity --skill e2e-testingコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Explores features to discover stable locators and fixes broken locators in Playwright tests. Two modes — explore (proactive discovery) and fix (reactive repair) — both using playwright-cli for live browser interaction.
Builds the context an AI needs to test an app well - product/area notes and user personas - and writes them into a reusable reference file. Use to turn a thin, generic AI run into a grounded one. Day 1 context live-build of the QA Foundational training.
Turns a feature input (ticket + acceptance criteria, existing cases, a screenshot, observed app behavior, or a recorded walkthrough) into test cases or lighter test scenarios. Use when a tester needs to generate test coverage from any of the "five roads" inputs. Carried from Day 1 of the QA Foundational training; the road-1 input for Day 2.
SKILL.md を表示中
SOC 職業分類に基づく
| name | e2e-testing |
| description | Guides the creation of Playwright E2E tests from planning through implementation. Covers test plan creation, data seeding, Page Object Model development, and test writing with human checkpoints at each stage. |
Before starting, read
.claude/skills/e2e-testing/REFERENCE.mdfor project-specific patterns, application context, POM rules, assertion conventions.
Run these before starting any test work:
# 1. Verify playwright-cli is installed
playwright-cli --version
# 2. Verify Playwright version is 1.59 or higher
npx playwright --version
# 3. Ensure playwright-cli skills are installed
playwright-cli install --skills
# 4. Session name — use -s=<output> for all playwright-cli calls this run
node -e "console.log('e2e-' + Date.now())"
If playwright-cli is not found, install it by running these two commands separately (chaining with && can fail on Windows):
npm install -g @playwright/cli@latest
playwright-cli install --skills
Use the output from step 4 as your -s= value for every playwright-cli call this run.
Create Playwright end-to-end tests for a feature or workflow, from plan through passing tests. Follow this workflow step by step. Stop after each step and check in with the user before proceeding.
E2E Test Progress:
- [ ] Step 1: Create the test plan
- [ ] Step 2: Seed test data (skip if not needed)
- [ ] Step 3: Create/update Page Object Models
- [ ] Step 4: Write the tests
Read and analyze the feature or workflow to be tested. Identify key interaction points, required test data, page objects, and test scenarios.
If the user provides specific test scenarios, use ONLY those. Do not invent additional scenarios.
Present the plan in chat using this structure:
# Test Plan for [Feature]
[Overview]
## Setup Required
- [Entity]: [Quantity], [Attributes], [Relationships]
## POM Modifications & Creations
- [Page Object]: [Changes or new methods needed]
## Test Cases to Implement
- **[Test Case]**: [Description]
- Steps: [Numbered steps]
- Expected Result: [Outcome]
Include exact data requirements — quantities, attributes, relationships. Use timestamps in test identifiers to avoid conflicts. Do NOT write the plan to a file. Document assumptions about existing system state.
-> STOP. Present the plan. Confirm scope, test cases, and data requirements with the user before proceeding.
Skip if the test plan requires no new data. Tell the user immediately and move to Step 3.
-> STOP. Confirm data was created successfully or that this step was skipped. Share a summary of what was seeded.
Read existing POM files to identify what can be reused or extended. Review current locator strategies.
For each page/component in the plan, create or update a POM class.
Use playwright-cli to validate locators against the live app — open a session, navigate to the page, and snapshot to confirm elements exist. If locators need discovery, explore the feature: snapshot before AND after each key interaction (dialogs, dropdowns, forms), then capture a recommended locator for each element. Test reliability — verify each locator selects exactly one element across 2-3 attempts.
# Open a session (reuse the e2e-<n> name from pre-flight for every call)
playwright-cli -s=$SESSION open <url>
playwright-cli -s=$SESSION snapshot
# Interact, then snapshot the new state to capture revealed elements
playwright-cli -s=$SESSION click <element description>
playwright-cli -s=$SESSION snapshot
playwright-cli -s=$SESSION fill <element description> <value>
playwright-cli -s=$SESSION snapshot
# Generate a recommended Playwright locator for an element
playwright-cli -s=$SESSION generate-locator <ref> --raw
# Optionally open the dashboard to review the live page with the user
playwright-cli -s=$SESSION show
playwright-cli -s=$SESSION close
Document assumptions about page state or prerequisites.
Locator priority: getByRole > getByLabel > getByTestId > CSS
(last resort). Never use auto-generated classes (e.g., css-1x2y3z).
Follow the Page Object Pattern in REFERENCE.md for the exact POM template and rules.
-> STOP. Present the POM classes. Review locator strategies and method signatures with the user.
-> STOP. Share test results. Confirm the test passes and covers the intended scenario.
-s=<session> name for every playwright-cli call in a run; close it when done