Claude Code Plugins

Community-maintained marketplace

Feedback
0
0

Use this skill to determine the correct data-testid selector for Playwright or end-to-end tests.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name collect-selector
description Use this skill to determine the correct data-testid selector for Playwright or end-to-end tests.

Collect Selector

Purpose

Determine the correct data-testid for a UI component following a strict priority order.

Logic to collect data-testid

  1. Priority 1: playwrightId
    • If component has playwrightId="some-value"
    • Use in test: [data-testid="some-value"]
    • Example:
  2. Priority 2: data-testid
    • If component has data-testid="some-value" (and no playwrightId)
    • Use in test: [data-testid="some-value"]
    • Example:
  3. Priority 3: Text Content
    • If no playwrightId or data-testid exists
    • Use in test: element's visible text
    • Example: → test uses text="Submit Form"
  4. Priority 4: Auto create playwrightId
    • If nothing above exists please add playwrightId using relevant value for the component Simple Summary: // Component has playwrightId:
// Test uses: [data-testid="my-element"] // Component has only data-testid: // Test uses: [data-testid="my-element"]

Key Rule: Always use [data-testid="..."] in tests, whether the component has playwrightId or data-testid!

Output Format

Return a simple string containing the resolved data-testid value.

If no match is found, return: "undefined-testid"