Step · Target

Find page elements using XPath or selectors. This page covers target patterns, shortcuts, and examples for steps.

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 step Target field.

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 step runs against 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 step runs against 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 step runs against 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 step is applied to each matched element.

Find By Position

To target the top-most element at specific viewport coordinates, use Position::x,y.

Notes:

Coordinates use viewport pixels (same behavior as document.elementFromPoint(x, y)).
Coordinates are affected by page scroll and zoom.
If no element is present at that point, retry behavior follows your step settings.
ClickAt::x,y and ElementFromPoint::x,y are still supported for backward compatibility.

Examples:

Position::395,452
Position::120.5,300

Dynamic XPath

loop-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[<loopRepeat>]/td[1]/button.
step-repeat: iterate over columns or repeated targets within a row. Example: //table/tr[1]/td[<stepRepeat>]/button.
session-count: refer to the current session number. Example: //table/tr[1]/td[<sessionCount>]/button.