CSS Selector & XPath Finder

Copy CSS Selector, XPath, and DOM context for faster QA handoffs. Record browser bugs with replayable steps and screenshots.

Find and copy CSS selectors, XPath, and JavaScript paths from any webpage. Inspect exact elements, check selector stability, capture screenshots and DOM context, and preserve technical evidence for automated tests and browser bugs. CSS Selector & XPath Finder is a Chrome extension built by Samelogic for QA engineers, software testers, test automation engineers, and frontend developers. Use it to inspect page elements, generate browser-test locators, and give engineering the context needed to reproduce and investigate failures. CSS Selector Finder and Generator Select any element on a webpage to generate and copy its CSS selector. - Copy a CSS selector from any website or web application - Generate a CSS selector for the selected element - Review selector stability before using it in a test - Identify selectors that depend on dynamic IDs or classes - Inspect the exact element behind a selector - Capture the element and surrounding DOM context - Save an element screenshot or full-page screenshot - Copy the element’s JavaScript path - Save captures locally or sync them to your workspace Use CSS Selector & XPath Finder when you need a CSS selector finder, CSS selector generator, or CSS selector Chrome extension for browser testing and test automation. XPath Finder and Generator Select an element to find, generate, and copy its XPath. - Generate XPath for elements on any webpage - Copy XPath for Playwright or Selenium tests - Compare an element’s XPath with its CSS selector - Inspect the DOM structure behind an XPath - Review the page context before using the locator - Preserve screenshots and technical evidence for failed elements Use the extension as an XPath finder, XPath generator, or XPath helper for automated browser testing. Playwright Locators and Selectors Inspect elements and review locators before committing automated tests. - Review a Playwright locator against the exact page element - Copy CSS selectors for Playwright tests - Use captured XPath with Playwright - Review Playwright selectors for stability - Identify brittle selectors generated from dynamic page attributes - Investigate locators that stop matching after a deployment - Preserve the page state surrounding a failed test step - Give QA and engineering the same element reference Unlike Playwright Codegen, which records browser actions and generates test code, CSS Selector & XPath Finder focuses on inspecting individual elements, reviewing locator stability, and preserving the technical context around them. Use both tools together when you want a generated browser flow plus closer control over locator selection and failure evidence. Selenium CSS Selectors and XPath Use captured locators in Selenium tests and browser automation. - Copy a Selenium CSS selector from any element - Generate and copy Selenium XPath - Compare CSS selectors and XPath before choosing a locator - Inspect the element when a Selenium locator stops matching - Capture screenshots and DOM context for failed Selenium tests - Share the exact affected element with another tester or developer Browser Bug Reporting A selector identifies an element, but it does not explain what happened before a browser failure or how to reproduce it. When an issue requires more than one action, intentionally start a Bug Replay and follow the browser path that triggers the problem. Bug Replay captures: - The browser interaction sequence - Affected page elements - CSS selectors and XPath - Element and full-page screenshots - DOM and page context - Generated reproduction steps - The final browser state Review the evidence and save it as a replayable test artifact. Share it with QA, engineering, product, or support, or export the bug report to Jira or Linear. Exploratory Testing and Browser Testing Use CSS Selector & XPath Finder during manual QA, exploratory testing, regression testing, and browser debugging. - Inspect exact elements on websites and web applications - Find CSS selectors and XPath without searching the DOM manually - Document UI regressions and intermittent browser failures - Capture technical evidence while reproducing a bug - Create clear bug reports with exact reproduction steps - Give engineering the selectors and DOM context behind an issue - Hand failed test evidence to an AI coding agent - Reduce repeated clarification between QA and engineering How It Works 1. Select an element on the webpage. 2. Copy its CSS selector, XPath, or JavaScript path. 3. Review the selector’s stability. 4. Capture the element, screenshot, and DOM context. 5. Use the locator in Playwright or Selenium. 6. Start Bug Replay when the issue requires a complete browser path. 7. Reproduce the failure. 8. Review, save, and share the replayable test artifact. Use it alongside Playwright Codegen when a generated test needs a more stable locator, clearer element context, or reproducible evidence explaining why a step failed. More Than a Selector Generator A CSS selector or XPath tells you where an element is. It does not tell you whether the page was in the expected state, what happened before the failure, or why an automated test stopped working. CSS Selector & XPath Finder preserves the locator together with the affected element, screenshot, DOM context, and browser path. Engineering receives more than a selector string. They can see: - Which element was affected - Where it appeared on the page - Which selector identified it - What actions happened before the failure - How to reproduce the issue More Than a Screen Recorder Bug Replay is intentional QA capture, not passive session replay. You decide when recording begins, reproduce the issue, review the evidence, and share only the relevant browser context. Unlike a basic screen recorder, each replay remains connected to the affected page elements and selectors. Engineering gets the exact element, technical context, and reproduction path instead of video alone. Share Replayable Test Artifacts Sign in to sync captures to your workspace and share them with your team. Instead of sending: “I think this is the affected element.” Send: “This is the exact element. Here is its CSS selector, XPath, screenshot, DOM context, and the browser path that reproduces the failure.” Find the element. Copy the CSS selector or XPath. Review the locator. Record the browser bug. Give engineering the evidence needed to reproduce and fix it.