DevTools · Live debugging

Chrome DevTools XPath Guide ($x, Elements search)

Quickly validate XPath in Chrome. Use $x() in the console, search with // in Elements, and copy XPath from inspected nodes. Pair these tricks with the XPath playground to refine locators before committing tests.

Open playground Selenium guide Cheat sheet

$x() console workflow

Open DevTools (F12) → Console.
Run $x("//button[text()='Login']"). Hover results to highlight in the DOM.
Inspect length to confirm match count; click items in the array to jump to Elements panel.
Iterate quickly by editing the XPath string and re-running.

Use this for quick checks; rely on the XPath playground to view paths, code snippets, and formatted results.

Elements panel search

Press Ctrl+F (⌘+F on macOS) in Elements.
Prefix with // to search via XPath; use CSS otherwise.
Results are highlighted in the DOM tree—great for verifying dynamic IDs.
Use //div[contains(@class,'toast')] to locate transient notifications.

Copying selectors

Right-click → Copy → Copy XPath for a starting point.
Refine with contains()/starts-with() to remove brittle indexes.
Copy selector (CSS) can be used as a fallback when XPath is unnecessary.
Paste into the playground to confirm match counts and generate code.

Tips & gotchas

$x("//button[text()='Save']") returns a NodeList. Inspect length to confirm matches.
In Elements panel, press Ctrl+F (⌘+F) and prefix with // to search via XPath directly.
Right-click an element → Copy → Copy XPath for a quick starting selector (refine afterward).
Use :scope in CSS queries inside DevTools if a simple CSS selector suffices—mix with XPath when needed.
Wrap text selectors with normalize-space() to match trimmed button labels.

For advanced debugging (network waits, frame switching, screenshots), complement DevTools with your Selenium/Playwright test runner.