CSS Selector Generator for Playwright, Cypress & Selenium

Playwright, Cypress, Selenium, and CSS Selector Strategies Compared

The selector you choose is the single biggest factor in how often your tests break on legitimate UI changes. A test that fails because a developer renamed a CSS class is a false positive — it costs time, erodes trust in the test suite, and eventually gets deleted. A test that fails because the "Submit" button disappeared from the page is a true positive — exactly what automation is for.

This tool generates selectors from your actual HTML and rates each one by resilience. Paste a snippet, click an element, and get ranked selectors for Playwright, Cypress, Selenium, CSS, and XPath — each labelled Best, Good, OK, or Fragile with a plain-English reason.

Playwright Locator Priority — From Most to Least Resilient

Playwright's official documentation defines a locator priority. Every locator lower on the list breaks more often in practice:

How to Add data-testid to Your Components

The fastest way to make your markup testable is to add data-testid to interactive elements. Name them in kebab-case, scoped to the feature:

<!-- HTML -->
<button data-testid="checkout-place-order">Place order</button>

<!-- React -->
<Button data-testid="checkout-place-order">Place order</Button>

<!-- Vue -->
<button :data-testid="testId">Place order</button>

<!-- Playwright -->
await page.getByTestId('checkout-place-order').click();

<!-- Cypress -->
cy.get('[data-testid="checkout-place-order"]').click();

Keep a naming convention: {feature}-{element}-{role}. This prevents two teams independently creating data-testid="submit" on different forms in the same page. If you use a component library, add testId as a prop passed through to the root element.

CSS Selector Quality — What Makes a Selector Stable

Not all CSS selectors are equal. Their resilience depends on how likely the targeted attribute is to change when a developer touches the component:

XPath — When to Use It and When to Avoid It

XPath is more powerful than CSS but less readable and slower to execute. Use it only when CSS cannot express the relationship you need:

• Parent selection: XPath can find a parent — //label[contains(., 'Email')]/.. selects the container of a label. CSS has no parent selector.
• Text anywhere in subtree: //button[contains(., 'Submit')] matches a button whose text is nested inside a <span>. CSS :has() is an alternative but has limited browser support in older test runners.
• Attribute value matching: //input[starts-with(@id, 'user-')] matches dynamic IDs with a known prefix.

Avoid absolute XPath like /html/body/div[1]/form/div[2]/input — it encodes the full DOM structure and breaks on any layout change. Use relative XPath starting with // and filter by attribute whenever possible.

Cypress Best Practices for Selectors

Cypress's official testing practices mirror Playwright's: prefer attributes that survive refactoring over structural paths. The Cypress team recommends data-cy or data-testid as explicit test hooks:

// Best — dedicated attribute
cy.get('[data-testid="login-btn"]').click();

// Good — ID selector
cy.get('#login-btn').click();

// Good — text match with tag narrowing
cy.contains('button', 'Sign in').click();

// OK — class selector (breaks if styles change)
cy.get('.btn-primary').click();

// Avoid — structural nth-child
cy.get('form > div:nth-child(3) > button').click();

The cy.contains(tag, text) form is more reliable than bare cy.contains(text) because it narrows the match to a specific element type, preventing false matches on other text nodes in the page.

ARIA Roles and Accessible Names — Why They Matter for Tests

When Playwright's getByRole('button', { name: 'Sign in' }) fails to find an element, it usually means one of three things: the element is genuinely missing, the element lost its accessible name (a bug), or the element's ARIA role is wrong (also a bug). This is the key advantage of role-based locators — they make your test suite a passive accessibility audit.

Every HTML element has an implicit ARIA role. Interactive elements have these defaults:

Workflow: From DevTools to Test

1. Open your application and navigate to the page under test.
2. Open DevTools (F12 → Elements), right-click the element you want to test, and choose Copy → Copy outerHTML.
3. Paste the HTML into the input above and click Parse HTML.
4. Click the target element in the tree. Switch between Playwright, Cypress, Selenium, CSS, and XPath tabs to see all available selectors.
5. Pick a Best-rated option if one exists. If not, use a Good-rated selector and consider adding a data-testid to the component to get a Best-rated selector in the future.
6. Click Copy and paste directly into your test file.