Free QA tool · 100% in-browser

XPath & CSS Selector Generator for Playwright, Selenium & Cypress

Paste an HTML snippet, click any element, and get robust, validated locators — plus a full Page Object class and a CSV export of every interactive element. Faster than SelectorsHub, works without a browser extension, and never sends your HTML to a server.

No signup, no upload Live match validation POM export ready

1. Paste HTML

2. Click an element

Loading…

3. Generated locators

Each locator is validated against your DOM. Prefer best over fragile.

Runs entirely in your browser

Uses the native DOMParser API — no upload, no signup, no tracking. Safe for pasting internal app HTML you couldn't send to a cloud selector tool.

Live selector validation

Every generated XPath and CSS selector is executed against your DOM so you know exactly how many elements it matches before you commit it to a test.

Framework-native output

Playwright getByRole / getByTestId, Selenium By.xpath, Cypress cy.get(), plus full Page Object classes for Playwright TypeScript, Selenium Java and Cypress JavaScript.

How to generate XPath and CSS selectors in 4 steps

1
Paste your HTML snippet
Copy the HTML for the section you're automating from Chrome DevTools (right-click element → Copy → Copy outerHTML) and paste it into the tool.
2
Click the target element
The interactive element tree shows every parsed node. Click the input, button, link, or container you want a locator for.
3
Pick the best-tagged locator
The tool ranks each locator as best / good / fragile and shows a live match count. Prefer data-testid, getByRole with a name, or a stable id.
4
Copy or export
Copy a single locator, generate a full Page Object class for your framework, or bulk-export all interactive elements as CSV.

Locator strategy: which selector should you use?

The most common cause of flaky end-to-end tests is a fragile locator. Use this ranking when you pick from the generated list:

Priority	Strategy	Why	Playwright
1	data-testid	Added by devs for tests — survives design refactors.	getByTestId()
2	ARIA role + accessible name	Enforces accessibility and matches user intent.	getByRole()
3	Label / placeholder text	Stable if UX doesn't rewrite copy.	getByLabel() / getByPlaceholder()
4	Stable id	Fine when ids aren't hashed by build tools.	locator('#id')
5	CSS attribute selector	Good for name/type combos on inputs.	locator('input[name=...]')
6	XPath contains-text	Use when nothing else is stable.	locator('xpath=...')
7	Absolute XPath	Last resort — breaks on any DOM shuffle.	avoid

How this compares to SelectorsHub, ChroPath & Chrome DevTools

Feature	This tool	SelectorsHub	ChroPath	DevTools
No install (any OS/Chromebook)	Yes	No	No	No
Playwright getByRole / getByTestId output	Yes	Partial	No	No
Bulk CSV export of all elements	Yes	No	No	No
Full Page Object class generator	Yes	No	No	No
Works on pasted HTML (offline app)	Yes	No	No	No
100% client-side (privacy)	Yes	Extension	Extension	Local

Level up your automation

Robust locators are the #1 predictor of a stable automation suite. Deepen your skills with these guides:

Frequently asked questions

1.Is this XPath and CSS selector generator really free?

Yes — 100% free with no signup, no ads, and no upload. The tool runs entirely in your browser using the native DOMParser API, so your HTML never leaves your machine. That makes it safe for pasting internal app markup that you couldn't send to a hosted competitor like SelectorsHub Cloud.

2.Which locator should I use in Playwright?

Prefer Playwright's user-facing locators first: page.getByRole(), page.getByTestId(), page.getByLabel(), page.getByPlaceholder(). Fall back to CSS or XPath only when the app has no accessible names, roles, or test IDs. The tool tags these best-practice locators as 'best' and demotes fragile absolute XPaths to 'fragile'.

3.Does the selector generator support Selenium, Cypress, and WebdriverIO?

Yes. Every CSS and XPath output works directly in Selenium (Java, Python, C#, Ruby, JS), Cypress cy.get(), WebdriverIO $() / $$(), TestCafe Selector(), and Puppeteer page.$(). The Playwright locators are Playwright-specific but easily translate to Selenium 4's By.xpath / By.cssSelector.

4.Why is my absolute XPath marked 'fragile'?

Absolute XPaths like /html/body/div[2]/form/input[1] hard-code the DOM path from <html> down. Any refactor — adding a wrapper div, reordering sections, a CSS framework upgrade — breaks them. Use them only as a debugging aid; ship relative XPaths, attribute-based CSS, or getByRole in production suites.

5.Can I paste an entire page's HTML?

Yes, but very large DOMs (10,000+ nodes) may slow down the interactive tree. For big pages, paste only the section you're automating — a form, a modal, a table. The Page Object generator and Bulk Export both work on whatever you paste.

6.Does it work with iframes and Shadow DOM?

The generator parses whatever HTML you paste, including iframe markup and open Shadow DOM. But at runtime you still need to switch frames (driver.switchTo().frame() in Selenium, page.frameLocator() in Playwright) or pierce shadow roots — the locators themselves are correct, the framework handles the traversal.

7.What makes this different from SelectorsHub or ChroPath?

Three things: (1) it's a web tool, not a browser extension — no install, works on any OS or Chromebook; (2) Bulk Export gives you a CSV of every interactive element on the page in one click, useful for scaffolding Page Objects; (3) the Page Object generator emits ready-to-commit Playwright, Selenium, or Cypress class files instead of one selector at a time.

8.Does it generate Playwright Page Object Model classes?

Yes. Switch to the Page Object tab and pick your framework (Playwright + TypeScript, Selenium + Java, or Cypress + JavaScript). The tool auto-names locators from data-testid, id, aria-label, or placeholder attributes and emits a full class you can drop into pages/LoginPage.ts.

Found this useful? Share it with your QA team — every share helps us keep this tool free and ad-free.