See the element.
Copy its selector.
Inspect an element on your page and review its CSS selector, XPath, and Playwright output. Copy the format you need, with the target still in view.
Free extension for desktop Chrome. Try it before signing up.
[data-testid="save-team"]The selector and the element, side by side.
- 01Inspect the target.
- 02Review its selectors.
- 03Copy and verify.
Pick the element.
See what identifies it.
Choose a button in the sample, switch formats, and copy its selector. The selected element stays in view.
Team settings
- Workspace
- Acme Studio
- Team plan
- 3 seats Annual billing
Choose Add seat, Save changes, or Manage billing.
Save changes
SELECTED ELEMENT[data-testid="save-team"]data-testid="save-team"An explicit test attribute. Keep it unique within the scope of your test.
Confirm the target and match count again on your own page.
This example lets you inspect three sample buttons. Use the extension to inspect your own page.
Know what
you’re matching.
A CSS selector is a pattern that identifies HTML elements. It can match a tag, class, ID, attribute, or relationship between elements.
A selector may find one element, several, or none. Check the match in the page state that matters to your work.
Explore the CSS selector referenceA few patterns worth knowing
QUICK REFERENCE- Type
buttonEvery button element.
- Class
.primaryElements with the primary class.
- ID
#save-teamThe element with this ID.
- Attribute
[data-testid="save-team"]Elements with this exact attribute value.
- Descendant
.dialog buttonButtons anywhere inside .dialog.
- State
button:disabledButtons that are currently disabled.
From the live page
to your next check.
- 01
Inspect the element
Open the extension on your page and choose the button, field, or other element you want to work with.
- 02
Review the alternatives
Compare the CSS selector and XPath in Alternative Selectors. Find CSS-based Playwright output in Test Automation.
- 03
Copy, then verify
Check that the selector finds the intended element in your app. In a test, verify the action and the result that follows.
Go from a match
to a useful test.
Choose a Playwright locator
Compare role, test ID, and CSS approaches in a changing sample page.
02Keep test IDs intentional
Give your team a clearer contract between the UI and its tests.
03Investigate a flaky test
Work through timing, state, data, network, and locator checks.
Before you
copy and paste.
How do I copy a CSS selector in Chrome?
You can inspect an element in Chrome DevTools and use Copy selector from its context menu. With Samelogic, select an element on the page, review Alternative Selectors, and copy the CSS selector or XPath you want to use.
What is the difference between CSS selectors and XPath?
CSS selectors match elements by patterns such as a class, ID, attribute, or position. XPath uses expressions to navigate the document tree. Use the format supported by your tool and verify that it finds the intended element.
What does the Playwright output include?
The extension provides CSS-based Playwright output for the selected element. It is a starting point to review in your test. You still need to confirm the target, add the relevant actions and assertions, and run the test.
Will a copied selector stay reliable?
That depends on what the selector uses and how the page changes. Generated classes, changing IDs, and position-based paths can be fragile. Prefer attributes your team intentionally maintains, check the match count, and verify the behavior in your test.
Can I try it without an account?
Yes. You can try the desktop Chrome extension before signing up. The example on this page also works without an account. Saving and team features have separate account and plan requirements.
Can the extension inspect every page?
Chrome restricts extensions on some pages, including its internal pages and the Chrome Web Store. Frames, shadow DOM, and dynamic page content can also affect inspection and selector behavior. Check the target in the page and tool where you plan to use it.
Your page.
Your next selector.
Inspect an element and review its selectors with our extension.