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:
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]
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*
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 *
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