Element Finder

Its little tricky but believe me its not that hard to find.

On this page

Follow below steps to get XPath quickly

Right click any button or link or whatever you want to click in webpage and select Inspect.
It will open developer console and highlight that element under Elements Tab
Right click that element and select Copy > Copy XPath.
Thats it you have your XPath of that element now.

XPath

Xpath helps to track down and element using its document chain examples are below

Combine batch-repeat with xpath to iterate over elements one by one. e.g if Xpath of element is like table format and you need to iterate all its row one by one. //table/tr[1]/td[1]/button this xpath will select button of fist row. now replace it will //table/tr[<batchRepeat>]/td[1]/button and under batch repeat add value like 5 or 10 based on number of rows. Now when batch repeat all action one by one it will replace <batchRepeat> value with index from 1 to 10

//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>Forth</a> 👈 selected
</div>

//a[@href]

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

//a[@href='google']

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

//button[@id='1']

<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>Forth</a>
</div>

//a[@id<'3']

<div>
  <a id='1'>Primary</button> 👈 selected
  <a id='2'>Secondary<button> 👈 selected
  <a id='3'>Warning<button>
  <a id='4'>Me Too<button>
</div>

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

<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
</div>

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

<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>

//*[substring(text(), 0, 3)>='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>

Chat with us on if you find difficult to find XPath or you have any better suggestion for me :)

Get Element By Id

If an element tag is having id="idValue" attribute on it you can simply make use of #idValue to target that element. Since element IDs are required to be unique if specified, they’re a useful way to get access to a specific element quickly

Only single element get selected. If there are two element within page with same id first one will be getting selected.

Referring below html section

#inputEmail To target element with id attribute as id="inputEmail"
#inputPassword To target element with id attribute as 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 ClassName

If an element tag is having class="class-1 class-2 class-3" attribute on it you can simply make use of ClassName::class-1 class-2 class-3 to target that element.

More than one element get selected. If there are two element within page with same class name both will be selected and action will be performed on both elements.

Referring below html section

ClassName::form-control To target elements with class attribute as class="form-control"
ClassName::btn btn-primary To target elements with class attribute as class="btn btn-primary"

<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

If an element tag is having name="nameOfElement" attribute on it you can simply make use of Name::nameOfElement to target that element.

More than one element get selected. If there are two element within page with same name both will be selected and action will be performed on both elements.

Referring below html section

Name::email To target elements with name attribute as name="email"
Name::password To target elements with name attribute as 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 specific elements by its tag name you can simply make use of TagName::tagNameOfElement.

More than one element get selected. If there are two element within page with same tag name both will be selected and action will be performed on both elements.

Referring below html section

TagName::main To target elements with tag name as <main>
TagName::form To target elements with tag name as <form>
TagName::input To target elements with tag name as <input>
TagName::label To target elements with tag name as <label>
TagName::button To target elements with tag name as <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

To target specific element by its different attributes you can simply make use of querySelector::selectors.

Single element get selected. If there are two element within page with same selectors first will be selected and action will be performed on it.

Referring below html section

querySelector::main.form-signin To target elements with tag name as <main class="form-signin">
querySelector::form To target elements with tag name as <form>
querySelector::input[type="email"] To target elements with tag name as <input type="email">
querySelector::input[type="password"] To target elements with tag name as <input type="password">
querySelector::label[for] To target elements with tag name as <label for="anything">
querySelector::button.btn.btn-primary To target elements with tag name as <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

Important

Its similar to query selector which selects all matching element rather than selecting first matching element