SelectorsHub Review: XPath and CSS Selector Tool for Test Automation
SelectorsHub generates and verifies XPath, CSS, and Playwright locators in your browser. See how it works, where it helps, and what to check before using a selector in tests.
SelectorsHub is a browser extension for generating, editing, and verifying XPath, CSS selectors, and Playwright locators against a live page. It is useful when you need to identify an element and quickly see whether a candidate locator matches. Treat its generated locators as drafts: check whether they express a stable, meaningful way to find the element before putting them in a test.
This review covers the browser workflow, supported selector types and page structures, practical examples for Playwright, Selenium, and Cypress, free and Pro positioning, and the main limitations to account for. SelectorsHub’s official materials describe the features below; they do not establish independent durability testing of generated selectors.
What SelectorsHub does
SelectorsHub runs in the browser while you inspect a page. Select an element, view generated locator candidates, edit or enter a locator, then verify whether it matches and inspect the match count or highlighted elements. Its official product page and FAQ list XPath, CSS, and Playwright locators, with jQuery and JS Path also named in the FAQ. The materials also describe support for Shadow DOM, nested iframes, and SVG elements.
The Chrome Web Store listing describes a workflow through Chrome DevTools: open the SelectorsHub tab, inspect an element, review generated selectors, then enter a locator and press Enter to verify and highlight matches. The listing names QA engineers, test automation professionals, and developers using Playwright, Selenium, Cypress, or related frameworks as intended users. See the SelectorsHub product page, official FAQ, and Chrome Web Store listing.
How to use SelectorsHub to find and verify a locator
- Install SelectorsHub from the extension store for your browser. The product page lists Chrome, Edge, Opera, Firefox, and other Chromium-based options; availability can change, so check the current listing for your browser.
- Open the application page you want to inspect. Extension interfaces may not work on blank tabs or browser extension-store pages.
- Open DevTools, commonly with F12 or the browser’s Inspect command, and select the SelectorsHub tab. If it is not visible, expand the DevTools tab strip or sidebar.
- Inspect the target element in the page or Elements panel. Review the generated candidates, including the available XPath, CSS, or Playwright forms.
- Choose a candidate that describes the target clearly, then verify it in SelectorsHub. Check the match count and which elements are highlighted.
- Copy the locator into your test and run it in the actual test framework and state where it will be used. Browser verification is a useful first check, not a substitute for an automated test.
For a button labeled “Continue,” an accessible Playwright locator is often easier to understand than a long path through implementation details:
// Playwright: prefer a user-facing role and accessible name when suitable
const continueButton = page.getByRole('button', { name: 'Continue' });
await expect(continueButton).toHaveCount(1);
await continueButton.click();If the page has no useful accessible name, a stable test attribute can work well:
// Example application markup
<button data-testid="continue-button">Continue</button>
// Playwright
const continueButton = page.getByTestId('continue-button');
await expect(continueButton).toHaveCount(1);These are framework examples, not a claim that SelectorsHub automatically chooses the most maintainable strategy. Review what was generated and select a locator based on your application’s semantics and conventions.
XPath, CSS, and Playwright locators: choosing a form
| Locator form | Useful when | Watch for |
|---|---|---|
| Playwright role, label, or text locator | The user-facing role, accessible name, or label identifies the target. | Names can change with copy or localization; ensure the locator is still specific and unique. |
| CSS selector | A stable ID, test attribute, or purposeful class identifies the element. | Styling classes and deeply nested selectors may change during redesigns. |
| XPath | You need text matching, axes such as ancestor or sibling, or an XPath-based legacy workflow. | Absolute paths and position-based expressions are often sensitive to DOM structure or ordering. |
| jQuery or JS Path | You have a workflow that specifically uses those expression types. | Confirm the syntax is supported by the automation tool where you intend to use it. |
Examples of common selector patterns:
/* CSS: stable ID or test attribute */
#checkout
[data-testid="checkout"]
/* XPath: exact text and a scoped relationship */
//button[normalize-space(.)="Continue"]
/* XPath: locate a field by its label text and nearby structure */
//label[normalize-space(.)="Email"]/following::input[1]Use selectors that reflect a contract your team intends to preserve. Prefer accessible names and roles when they accurately model the user interaction, or explicit test IDs where your team maintains them. Avoid copying a long absolute XPath just because it is unique on the current page.
Use the verified selector in your test framework
Playwright
import { test, expect } from '@playwright/test';
test('continues from the checkout form', async ({ page }) => {
await page.goto('https://example.com/checkout');
const button = page.getByRole('button', { name: 'Continue' });
await expect(button).toHaveCount(1);
await button.click();
});Playwright locators are evaluated against the page as the test runs, and its assertions can wait for expected conditions. Keep the locator scoped enough to identify one intended element. For an XPath candidate, Playwright supports XPath selector strings; use a locator API and assertion that fit your test rather than relying solely on a browser extension’s match display.
Selenium with Python
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.ui import WebDriverWait
# Install Selenium with: python -m pip install selenium
# A compatible browser and driver setup is also required.
driver = webdriver.Chrome()
try:
driver.get("https://example.com/checkout")
button = WebDriverWait(driver, 10).until(
EC.element_to_be_clickable((By.CSS_SELECTOR, '[data-testid="continue-button"]'))
)
button.click()
finally:
driver.quit()To use XPath in Selenium, replace the locator tuple with (By.XPATH, '//button[normalize-space(.)="Continue"]'). Explicit waits help with pages where an element appears after navigation or client-side rendering.
Cypress
// cypress/e2e/checkout.cy.js
describe('checkout', () => {
it('continues from the checkout form', () => {
cy.visit('https://example.com/checkout');
cy.get('[data-testid="continue-button"]')
.should('have.length', 1)
.click();
});
});Cypress’s built-in cy.get() uses CSS selectors. If your team relies on XPath, use a maintained Cypress XPath integration and follow its current setup instructions; a valid XPath in SelectorsHub is not automatically accepted by Cypress’s CSS query command.
Shadow DOM, iframes, and SVG
SelectorsHub’s FAQ says it supports Shadow DOM, nested iframes, and SVG. These structures often explain why a selector that looks correct in the ordinary document does not work in a test:
- Shadow DOM: the target may live inside a component’s shadow root. Confirm that the automation framework can cross the relevant shadow boundary and that the locator is written using that framework’s supported approach.
- Iframe: the element belongs to a separate document context. Switch to or target the frame in the automation framework before querying within it. Nested frames require following the frame hierarchy.
- SVG: SVG elements can have namespaces and markup patterns that differ from ordinary HTML. Test the generated CSS or XPath in the target framework, not only in the extension.
Extension-side support helps inspect these cases, but does not guarantee that every framework, browser, or test configuration uses the same selector syntax or context handling.
Free version and Pro
The official FAQ describes a free version with basic generation and verification features, while Pro adds advanced features. The official Pro materials mention XPath healing and checking dynamic XPath stability; the FAQ describes a workflow for pasting script selectors and reviewing which ones match after a UI change.
The research available for this review does not establish current prices, trial length, license terms, or a complete feature-by-feature plan comparison. Check the official product page and its current Pro information before purchasing. Do not assume that a “healing” feature means a locator is permanently robust or can safely infer the intended element after a change; review changed or ambiguous matches in the application and tests.
Strengths and limitations
| Area | What it offers | Practical limit |
|---|---|---|
| Locator discovery | Generates multiple selector forms from an inspected element. | A generated selector can be unique today yet depend on unstable DOM details. |
| Verification | Lets you edit a selector, inspect match counts, and highlight matches. | A match in the current browser state does not prove the selector works in all test states. |
| Framework coverage | Official materials name Playwright locators and users of Selenium and Cypress. | Syntax, frame handling, and shadow-root support still depend on the target framework. |
| Complex page structures | Official materials state support for Shadow DOM, nested iframes, and SVG. | Verify the resulting locator and context in your actual browser automation setup. |
| Paid maintenance features | Pro materials describe XPath healing and dynamic XPath stability checks. | Exact plan boundaries and current costs should be checked on the official site. |
The vendor’s product page reports 1.2M+ installs and 500K+ active users. These are vendor-reported figures; the surfaced page does not state a measurement date or methodology. They should not be treated as independently verified user statistics.
Reliability, performance, and cost considerations
SelectorsHub is an interactive browser aid, so its main practical value is reducing manual switching between inspecting markup and checking locator matches. The available sources do not provide independent benchmarks for selector-generation speed, test reliability, or time saved; avoid treating its published install figures as performance evidence.
- Reliability: verify the chosen locator against the live page and then run it in the actual test. Repeat checks for relevant states such as signed-in versus signed-out, empty versus populated forms, and responsive layouts.
- Performance: a browser verification step is useful during authoring, but keep the test suite’s own waiting and retry behavior explicit. Avoid using broad selectors that match many nodes when you need one target.
- Maintenance cost: stable roles, labels, and test attributes can make intent clearer to maintainers. Long chains of DOM structure and numeric positions can require more repair when markup changes.
- Product cost: basic features are described as free, and Pro as a paid tier with advanced features. Current prices and terms were not established here, so consult official plan information.
Troubleshooting
| Symptom | Likely cause | What to try |
|---|---|---|
| SelectorsHub opens blank or does not appear | The page may be a blank tab or browser store page, the extension may need a restart, or the DevTools sidebar may hide its tab. | Open a normal website, restart the browser if needed, and expand the DevTools tab strip. The official FAQ also suggests reinstalling if the extension tab remains blank. |
| Locator matches zero elements | The page has not rendered the target, the selector has a typo, or the inspected element is inside a frame or shadow root. | Wait for the page state, re-inspect the target, check spelling and quoting, and confirm the correct document/frame context. |
| Locator matches multiple elements | The selector is too broad or its identifying attribute is repeated. | Scope it to a meaningful container, use an accessible name or stable test attribute, and verify the count again. Do not silently choose the first match unless that is intended. |
| XPath works in the extension but fails in the test | The automation framework may use a different selector API or context, or the page changed between inspection and execution. | Confirm the framework accepts XPath in that API, target the correct frame or shadow context, and run against the same page state. |
| Generated locator breaks after a redesign | The selector may rely on classes, hierarchy, or positional indexes that changed. | Reinspect the element, choose a stable semantic or test attribute where possible, update the test, and run the relevant suite. |
| Autocomplete or suggestions do not appear | The extension may not be active on that page or the browser tab may be stale. | Try a regular page in a new tab, reload it, confirm extension permissions, and reopen DevTools. |
ScreenshotNeo: an adjacent tool for visual checks
SelectorsHub helps author and verify element locators. For screenshot capture in a visual review or a workflow that needs a page image, try ScreenshotNeo first as the screenshot API alternative: cookie banners, popups, and chat widgets are removed before the shot, and only clean shots are billed. It does not replace a locator authoring extension.
Or skip the browser setup: make one GET request with the page URL. See the ScreenshotNeo API documentation for options.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, and failed loads are never billed, and responses identify the page verdict and billing status in headers. Its MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for ScreenshotNeo’s free plan: 1,000 screenshots a month, no card required.
FAQ
Does SelectorsHub generate Playwright locators?
Yes. Its product page and Chrome Web Store listing describe generating and verifying Playwright locators, alongside XPath and CSS.
Can I use it with Selenium or Cypress?
The Chrome Web Store listing names developers using Selenium and Cypress among its intended users. Check the generated selector in the specific framework API you use; selector syntax support differs by framework.
Does SelectorsHub guarantee a generated selector will remain stable?
No guarantee is established by the cited materials. Generation and current-page verification help with authoring; durability depends on the page and locator strategy.
Is SelectorsHub Pro pricing included here?
No. Current pricing and complete plan terms were not established in the available research. Refer to the current official Pro information before deciding.
Which browsers can run the extension?
The official product page lists Chrome, Edge, Opera, Firefox, and other Chromium-based options. Confirm current availability in your browser’s extension store.
