Find Element Strategies

Context:

Before we perform any operations like click, set text etc. on web elements, we will need to identify the element on the web page. As we mentioned before, “identifying” means identifying it in the DOM and being able to specify our search criteria for the element so that we can find a unique match.

The search criteria is generally referred to as selector/locator. The selectors can be any(or multiple) of the following:

  • tag_name
  • id
  • name
  • class
  • link_text
  • xpath
  • css
  • custom attribute

 

Pre-requisites:

You have completed the section “Setup First Script” and have your environment ready.

Using Single Selector

For example the below element has a unique name in the entire DOM, hence we can use its name=”firstname” to identify it and further interact with it. We will be seeing more examples as we proceed.

Selector_element

Using Multiple Selectors

We might be in situations where we would like to use multiple attributes for the HTML element (again we are interchangeably using the words selectors, locators, attribute etc.) to uniquely locate it too. Below we can use use both class:”login” and title:”Login….” to identify the login button [This might be in situations where lets hypothetically say there was another element on the page with class:”login]

Selector_multiple_element

Using Regular Expressions

For folks who are comfortable using regular expressions, you must be aware how powerful and flexible this capability can add to the overall search. I am big fan of regular expressions too, because if you had taken the 101 class for language parsers, you would realize that parsers are based on regex matches. Anyways, below is example code where we locate login element using a regular expression. It is beyond the scope of this post to talk about all options of regular expressions, however the below is expressing a locator where we know some words in the search title and the rest we do not [represented by ‘*’]

Agenda:

Identify different types of HTML elements like text_field, link, button, checkbox etc

1. Text Field

 

2. Link

 

 

3. Radio

 

4. Checkbox

 

5. Select or Drop down

 

6. Button

7. div

Entire Cucumber Feature:

Step Definitions Code: