Element Selection

A webpage element is essentially a component on a webpage that you would like to interact with. For example, an element could be a section to hide, an area to focus on, a textbox to type into or a button to click.

An element name / unique identifier is required in order to find the right element to interact with.

There are several ways to search for an element such as:

  1. querySelector value (e.g. #id, .class-name)
  2. attribute value (e.g. id, name, value, placeholder)
  3. text (e.g. button text, input text, href text, div text, paragraph text)
  4. label (e.g. checkbox label or drop-down select option)

1. QuerySelector Examples

The querySelector provides the most accurate and most advanced way find an element.

Find the first element in the document with the class "my-class": 

.my-class

Find the element with the id "my-id": 

#my-id

Find the first <p> element with the class "example": 

p.example

Find the first <a> element with the "target" attribute: 

a[target]

Find the first <a> element with the "target" attribute "_blank": 

a[target=_blank]

2. Attribute Value Examples

If the search criteria did not match the querySelector then find the element by the attribute value.

Here is a sample HTML control: 

<input type="text" id="email-id" name="email-me" placeholder="Enter your email address" value="Your Email" />

Find the element with the id "email-id": 

email-id

Find the element with the name "email-me": 

email-me

Find the element with the placeholder text "Enter your email address": 

Enter your email address

Find the element with the placeholder text "Enter your email address" using a wild card (starting with) criteria "Enter your email*": 

Enter your email*

Find the element with the value "Your Email" using the starts with "Your e": 

Your e*

3. Text

Search for a value by inner text. Here is a sample HTML control:

  <button>Sign Up</button>

Find the element by text "Sign Up":

Sign Up

Find the element by text starting with "Sign ": 

Sign *

4. Label

Search for a value label. Here is a sample HTML control:

<input type="checkbox" id="fullpage" />
<label for="fullpage">Show the full page</label>

Find the element by text (e.g. the checkbox element):

Show the full page