Action · Element Finder

Find page elements using XPath or selectors—quick tips, patterns, and examples.

On this page

Quickly copy an XPath with DevTools:

Right‑click the target element (button, link, input) and choose Inspect.
In the Elements panel, ensure the element is highlighted.
Right‑click the highlighted node and choose Copy → Copy XPath.
Paste the XPath into the Element Finder.

XPath

XPath locates an element by its position and attributes in the DOM tree. See examples below.

Note

Chrome (Chromium) supports XPath 1.0. The examples below use XPath 1.0 syntax and show which elements are selected.

//div/a[1]

<div>
  <a>One</a> 👈 selected
  <a>Two</a>
</div>

//div/a[last()]

<div>
<a>First</a>
<a>Middle</a>
<a>Last</a> 👈 selected
</div>

//div/a[last()-1]

<div>
<a>First</a>
<a>Middle</a> 👈 selected
<a>Last</a>
</div>

//div/a[position() > 2]

<div>
<a>First</a>
<a>Second</a>
<a>Third</a> 👈 selected <a>Fourth</a> 👈 selected
</div>

//a[@href] (attribute present)

<div>
<a>First</a>
<a>Second</a>
<a href="#">Third</a> 👈 selected
<a>Fourth</a>
</div>

//a[@href='google'] (attribute equals)

<div>
<a>First</a>
<a href="#">Second</a>
<a href="google">Third</a> 👈 selected
<a>Fourth</a>
</div>

//button[@id='1'] (match by id)

<div>
<a>First</a>
<button type="button" id="1">Click me</button> 👈 selected
<a href="#">Second</a>
<a href="dhruv-techapps.github.io">Third</a>
<a>Fourth</a>
</div>

//a[@data-rank < 3] (numeric comparison)

<div>
<a data-rank="1">Primary</a> 👈 selected <a data-rank="2">Secondary</a> 👈 selected
<a data-rank="3">Warning</a>
<a data-rank="4">Info</a>
</div>

//button[contains(@class,'me')] (substring match)

<div>
<button type="button" id="1">Primary</button>
<button class="me second">Secondary</button> 👈 selected <button class="me warning">Warning</button> 👈 selected
<button class="me-too done">Me Too</button> 👈 selected (substring match)
</div>

//button[contains(concat(' ', normalize-space(@class), ' '), ' me ')] (safe class match)

<div>
<button class="me second">Secondary</button> 👈 selected
<button class="me-too done">Me Too</button>
</div>

//button[contains(text(),'Me')] (text contains)

<div>
<button type="button" id="1">Primary</button>
<button class="me second">Secondary</button>
<button class="me warning">Warning</button>
<button class="me-too done">Me Too</button> 👈 selected
</div>

//button[starts-with(normalize-space(.), 'Sign')] (text starts-with)

<div>
<button>Sign in</button> 👈 selected <button>Signup</button> 👈 selected
<button>Log out</button>
</div>

//span[contains(@class,'badge')][number(translate(normalize-space(.),' %','')) >= 50] (numeric text greater than or equal to 50)

<div>
<span class="badge">55 %</span> 👈 selected <span class="badge">50 %</span> 👈 selected
<span class="badge">45 %</span>
<span class="badge">43 %</span>
</div>

//label[normalize-space(text())='Email']/following-sibling::input[1] (following sibling)

<div>
<label>Email</label>
<input type="email" /> 👈 selected
<input type="text" />
</div>

//input[@id='street']/parent::* (parent)

<div>
<div class="field">
  👈 selected
  <input id="street" type="text" />
</div>
</div>

//button[@type='submit']/ancestor::form (ancestor)

<form>
👈 selected
<button type="submit">Send</button>
</form>

//li[@class='active']/preceding-sibling::li[1] (preceding sibling)

<ul>
<li>One</li>
👈 selected
<li class="active">Two</li>
<li>Three</li>
</ul>

//div//button (descendant of div)

<div>
<section><button>Ok</button> 👈 selected</section>
</div>

//button[@type='submit'][contains(@class,'primary')][not(@disabled)] (combined conditions)

<div>
<button type="submit" class="primary">Save</button> 👈 selected
<button type="submit" class="primary" disabled>Save</button>
<button class="primary">Not submit</button>
</div>

Chat with us on

if you find it difficult to craft an XPath or have suggestions.

Get element by ID

When an element has an id attribute (for example, id="idValue"), you can target it with #idValue.

Notes:

IDs are intended to be unique. If duplicates exist, the first match is selected.

Referring to the HTML below: - #inputEmail targets id="inputEmail". - #inputPassword targets id="inputPassword".

<main class="form-signin">
  <form>
    <label for="inputEmail">Email address</label>
    <input type="email" id="inputEmail" class="form-control" /> 👈 selected
    <label for="inputPassword">Password</label>
    <input type="password" id="inputPassword" class="form-control" /> 👈 selected
    <button class="btn btn-primary" type="submit">Sign in</button>
  </form>
</main>

Get elements by class name

When an element has a class list (for example, class="class-1 class-2"), target it with ClassName::class-1 class-2.

Notes:

This selector can match multiple elements. The action is applied to each match.

Referring to the HTML below:

ClassName::form-control targets class="form-control" inputs.
ClassName::btn btn-primary targets class="btn btn-primary" buttons.

<main class="form-signin">
  <form>
    <label for="inputEmail">Email address</label>
    <input type="email" id="inputEmail" class="form-control"> 👈 selected
    <label for="inputPassword">Password</label>
    <input type="password" id="inputPassword" class="form-control"> 👈 selected
    <button class="btn btn-primary" type="submit">Sign in</button> 👈 selected
  </form>
</main>

Get elements by name

When an element has a name attribute (for example, name="email"), target it with Name::email.

Notes:

This selector can match multiple elements. The action is applied to each match.

Referring to the HTML below:

Name::email targets name="email".
Name::password targets name="password".

<main class="form-signin">
  <form>
    <label for="inputEmail">Email address</label>
    <input type="email" id="inputEmail" class="form-control" name="email"> 👈 selected
    <label for="inputPassword">Password</label>
    <input type="password" id="inputPassword" class="form-control" name="password"> 👈 selected
    <button class="btn btn-primary" type="submit">Sign in</button>
  </form>
</main>

Get elements by tag name

To target all elements of a given tag, use TagName::tagNameOfElement.

Notes:

This selector matches all elements with the specified tag. The action is applied to each match.

Referring to the HTML below:

TagName::main targets <main>.
TagName::form targets <form>.
TagName::input targets <input>.
TagName::label targets <label>.
TagName::button targets <button>.

<main class="form-signin">
  <form>
    <label for="inputEmail">Email address</label>
    <input type="email" id="inputEmail" class="form-control" name="email">
    <label for="inputPassword">Password</label>
    <input type="password" id="inputPassword" class="form-control" name="password">
    <button class="btn btn-primary" type="submit">Sign in</button>
  </form>
</main>

Query Selector (single)

To target a specific element by CSS selector, use querySelector::selector.

Notes:

Selects the first matching element. If multiple elements match, only the first is used.

Referring to the HTML below:

querySelector::main.form-signin targets <main class="form-signin">.
querySelector::form targets <form>.
querySelector::input[type="email"] targets <input type="email">.
querySelector::input[type="password"] targets <input type="password">.
querySelector::label[for] targets <label for="…">.
querySelector::button.btn.btn-primary targets <button class="btn btn-primary">.

<main class="form-signin">
  <form>
    <label for="inputEmail">Email address</label>
    <input type="email" id="inputEmail" class="form-control" name="email">
    <label for="inputPassword">Password</label>
    <input type="password" id="inputPassword" class="form-control" name="password">
    <button class="btn btn-primary" type="submit">Sign in</button>
  </form>
</main>

Query Selector All (multiple)

Important: Works like Query Selector, but selects all matching elements instead of only the first one. The action is applied to each matched element.

Dynamic XPath

batch-repeat: iterate over rows using a placeholder in the XPath. For example, to click the button in each row: base XPath //table/tr[1]/td[1]/button → //table/tr[<batchRepeat>]/td[1]/button.
action-repeat: iterate over columns or repeated targets within a row. Example: //table/tr[1]/td[<actionRepeat>]/button.
session-count: refer to the current session number. Example: //table/tr[1]/td[<sessionCount>]/button.