skills.rest
jordyvanvorselen
jordyvanvorselenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

playwright-selectors

Refactors Playwright tests to use user-facing selectors like getByRole and getByLabel.

Updated Feb 27, 2026
Search Tags:#testing#web development#refactoring#e2e#playwright#selectors
One-click install
npx skills add https://github.com/jordyvanvorselen/claude-marketplace --skill playwright-selectors-jordyvanvorselen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-selectors
Source: https://github.com/jordyvanvorselen/claude-marketplace/tree/main/plugins/dev/skills/playwright-selectors
Command: npx skills add https://github.com/jordyvanvorselen/claude-marketplace --skill playwright-selectors-jordyvanvorselen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers write more reliable and maintainable Playwright tests by guiding them towards using user-facing, semantic selectors instead of brittle data-testid attributes.

Core Features & Use Cases

  • Selector Prioritization: Provides a clear hierarchy for choosing the best Playwright locators.
  • Disambiguation Strategies: Offers methods to handle cases where multiple elements match a selector.
  • Refactoring Guidance: Outlines constraints and best practices for updating existing tests.
  • Use Case: Refactor existing Playwright tests to use getByRole and getByLabel for improved test stability and accessibility.

Quick Start

Use the playwright-selectors skill to refactor the provided Playwright test code to use user-facing selectors.

Frequently Asked Questions about playwright-selectors

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I refactor Playwright tests to use user-facing selectors?▼

Playwright selector prioritization ranks semantic locators like `getByRole` and `getByLabel` above `data-testid`. This hierarchy guides developers in choosing the most robust and accessible locators for web development testing.

What's the best way to disambiguate Playwright locators when multiple elements match?▼

Disambiguation strategies for Playwright locators involve refining semantic locators to target specific elements among multiple matches. This ensures robust e2e tests by accurately identifying target elements without relying on brittle attributes.

When should I use data-testid instead of getByRole in Playwright e2e tests?▼

Use `data-testid` in Playwright e2e tests only when semantic locators like `getByRole` are insufficient. Refactoring to prioritize user-facing selectors improves accessibility, while documenting remaining `data-testid` usage addresses constraints.

Can I refactor existing Playwright tests without changing the test structure?▼

Yes, you can refactor existing Playwright tests without changing the test structure by replacing `data-testid` with `getByRole` and `getByLabel`. This ensures adherence to constraints while adopting user-facing selectors for better stability.

Related Skills

Explore More Software Engineering Skills→
whitebearditwhitebeardit
12

frontend-qa-friendly

Guide frontend markup to use semantic HTML and data-testid attributes for stable Playwright testing.

Official
Basic
lespacemanlespaceman
4

write-test-code

Generate and refactor Playwright E2E tests from TC-ID specs and exploration outputs.

Community
Advanced
vidzzavidzza

frontend-testing

Guide frontend test development with Vitest and Playwright for unit, E2E, visual, and accessibility testing.

Community
Intermediate
jovermierjovermier
2

playwright-best-practices

Apply Playwright best practices for selectors, waits, accessibility, and responsive testing.

Community
Basic