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:

id
name
class
linkText
partiallinkText
tagName
custom attribute
xpath
css

Pre-requisites:

You have completed the section “Set up Env” and have your environment ready with JDK, maven and Eclipse (+plugins)
You have read and understood HTML DOM
You were able to comprehend “Browser Commands” post
You downloaded the project code base for class2 under – https://github.com/machzqcq/CucumberJVMExamples and imported into Eclipse and the structure should look as below

If you have Intellij [which I recommend over Eclipse], then imported project should look something like this.

Syntax:

1	driver.findElementById(selector/locator);

1	driver.findElement(By.id(selector/locator));

Every HTML element in Selenium Java is of type “WebElement”
A WebElement can be compared to an in-memory (DOM) object representation of HTML tag
If the reference of driver is of type “Webdriver”, then we use the second syntax style, otherwise the first style. Both the styles work fine.
To identify a tag (aka. web element) we might need any(multiple) of the following
1. By.id
2. By.name
3. By.linkText
4. By.partialLinkText
5. By.className
6. By.CssSelector
7. By.tagName
8. By.xpath

Selector/Locator:

Lets hit the website “http://www.practiceselenium.com/practice-form.html” . And right click on “firstname” text box and inspect element in Chrome browser.

We can see the HTML representation of the text field “firstname”.
It has attributes name=firstname and type=text
We will use By.name(“firstname”) to identify this element in Selenium
This is the strategy we will follow to identify elements. If there are multiple attributes, then the order of preference can be id < name < class < tagName < className < cssSelector < xpath [We did not mention linkText because it applies only to a link and not all Web Elements]
With this background, lets identify different HTML elements on this page and print its html.

By Name

1 2	WebElement firstName= driver.findElement(By.name(“firstname”)); WebElement lastName = driver.findElement(By.name(“lastname”));

By id

1	WebElement okButton = driver.findElement(By.id(“submit”));

By linkText

1	WebElement about = driver.findElement(By.linkText(“ABOUT”));

By className

1	WebElement div = driver.findElement(By.className(“control-group”));

Retrieve HTML of WebElement

To retrieve the HTML of WebElement we print the attribute “outerHTML” for the element.

To retrieve attributes, we use the method “getAttribute” on the WebElement. We will discuss all the options in the training class, but for now, this should give you enough idea how to retrieve different values out of a HTML tag [aka. WebElement in Selenium language]

Let’s try to identify all elements on the above practiceselenium website and print its html.

The steps are the same as described in the videos and description on “Browser Commands”

Download and import the maven project into Eclipse – https://github.com/machzqcq/CucumberJVMExamples
How to download and import has been explained in detail in “Browser Commands” page video at the bottom
There are two features “WebElements.feature” and “HtmlLocators.feature”
Their corresponding step_definitions are in the files “WebElements.java” and “HtmlLocators.java” [Mapping 1-1 feature to step definition is not a good practice as per cucumber, but for now our focus is to learn selenium java api first, so we can refactor this code later]

Cucumber Features

WebElements.feature

Feature: Demonstrating the usage of web elements

Scenario: Identify text field and print its html

When I open practiceselenium.com website

Then I find first and last name and print the html

Scenario: Identify link field and print its html

When I open practiceselenium.com website

Then I find menu and print the html

Scenario: Identify button field and print its html

When I open practiceselenium.com website

Then I find button and print the html

Scenario: Identify radio button and print its html

When I open practiceselenium.com website

Then I find radio button male and print the html

Scenario: Identify checkbox and print html

When I open practiceselenium.com website

Then I find check box and print the html

Scenario: Identify select list and print html

When I open practiceselenium.com website

Then I find select list and print html

Scenario: Identify another select list and print html

When I open practiceselenium.com website

Then I find another select list and print html

Scenario: Identify a div and print html

When I open practiceselenium.com website

Then I find div and print html

HtmlLocators.feature

Feature: Use html locators

Scenario: Identify html element

When I login to practiceselenium website

Then I access elements and use watir commands

Corresponding step_definitions

package step_definitions;

import java.util.List;

import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.support.ui.Select;

import org.testng.AssertJUnit;

import cucumber.api.java.en.Then;

import cucumber.api.java.en.When;

public class WebElements {

public WebDriver driver;

public WebElements()

{

driver = Hooks.driver;

}

@When(“^I open practiceselenium\.com website$”)

public void i_open_practiceselenium_com_website() throws Throwable {

// Write code here that turns the phrase above into concrete actions

driver.get(“http://www.practiceselenium.com/practice-form.html”);

AssertJUnit.assertEquals(“practice-form”, driver.getTitle());

}

@Then(“^I find first and last name and print the html$”)

public void i_find_first_and_last_name_and_print_the_html() throws Throwable {

// Write code here that turns the phrase above into concrete actions

WebElement firstName= driver.findElement(By.name(“firstname”));

WebElement lastName = driver.findElement(By.name(“lastname”));

System.out.println(“Firstname html “+firstName.getAttribute(“outerHTML”));

System.out.println(“LastName html “+lastName.getAttribute(“outerHTML”));

}

@Then(“^I find menu and print the html$”)

public void i_find_menu_and_print_the_html() throws Throwable {

// Write code here that turns the phrase above into concrete actions

WebElement menuElement = driver.findElement(By.linkText(“Menu”));

System.out.println(“Menu html”+ menuElement.getAttribute(“outerHTML”));

}

@Then(“^I find button and print the html$”)

public void i_find_button_and_print_the_html() throws Throwable {

// Write code here that turns the phrase above into concrete actions

WebElement okButton = driver.findElement(By.id(“submit”));

System.out.println(“Button html”+ okButton.getAttribute(“outerHTML”));

}

@Then(“^I find radio button male and print the html$”)

public void i_find_radio_button_male_and_print_the_html() throws Throwable {

// Write code here that turns the phrase above into concrete actions

WebElement maleRadio = driver.findElement(By.id(“sex-0”));

WebElement femaleRadio = driver.findElement(By.id(“sex-1”));

System.out.println(“Male Radio “+maleRadio.getAttribute(“outerHTML”));

System.out.println(“FeMale Radio “+femaleRadio.getAttribute(“outerHTML”));

}

@Then(“^I find check box and print the html$”)

public void i_find_check_box_and_print_the_html() throws Throwable {

// Write code here that turns the phrase above into concrete actions

WebElement blackTea = driver.findElement(By.id(“tea1”));

WebElement redTea = driver.findElement(By.id(“tea2”));

WebElement oolongTea = driver.findElement(By.id(“tea3”));

System.out.println(“FeMale Radio “+blackTea.getAttribute(“outerHTML”));

System.out.println(“FeMale Radio “+redTea.getAttribute(“outerHTML”));

System.out.println(“FeMale Radio “+oolongTea.getAttribute(“outerHTML”));

}

@Then(“^I find select list and print html$”)

public void i_find_select_list_and_print_html() throws Throwable {

// Write code here that turns the phrase above into concrete actions

Select continentsSelect = new Select(driver.findElement((By.id(“continents”))));

List<WebElement> options = continentsSelect.getOptions();

System.out.println(“Priting all options….”);

for(WebElement e:options)

{

System.out.println(e.getText());

}

@Then(“^I find another select list and print html$”)

public void i_find_another_select_list_and_print_html() throws Throwable {

// Write code here that turns the phrase above into concrete actions

Select anotherSelectList = new Select(driver.findElement((By.id(“selenium_commands”))));

List<WebElement> options = anotherSelectList.getOptions();

System.out.println(“Priting all options….”);

for(WebElement e:options)

{

System.out.println(e.getText());

}

@Then(“^I find div and print html$”)

public void i_find_div_and_print_html() throws Throwable {

// Write code here that turns the phrase above into concrete actions

WebElement divElement = driver.findElement(By.className(“wsb-htmlsnippet-element”));

System.out.println(“div html “+divElement.getAttribute(“outerHTML”));

}

@When(“^I open automationpractice website$”)

public void i_open_automationpractice_website() throws Throwable {

// Write code here that turns the phrase above into concrete actions

driver.get(“http://automationpractice.com”);

AssertJUnit.assertEquals(“practice-form”, driver.getTitle());

}

package step_definitions;

import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.testng.AssertJUnit;

import cucumber.api.java.en.Then;

import cucumber.api.java.en.When;

public class HtmlLocators{

public WebDriver driver;

public HtmlLocators()

{

driver = Hooks.driver;

}

@When(“^I login to practiceselenium website$”)

public void i_login_to_practiceselenium_website() throws Throwable {

// Write code here that turns the phrase above into concrete actions

driver.get(“http://www.practiceselenium.com/”);

AssertJUnit.assertEquals(“Welcome”, driver.getTitle());

}

@Then(“^I access elements and use watir commands$”)

public void i_access_elements_and_use_watir_commands() throws Throwable {

// Write code here that turns the phrase above into concrete actions

WebElement welcomeLink = driver.findElement(By.linkText(“Welcome”));

System.out.println(“Welcome text “+welcomeLink.getText());

System.out.println(“Tag Name “+welcomeLink.getAttribute(“tagName”));

System.out.println(“Href “+welcomeLink.getAttribute(“href”));

System.out.println(“Outer HTML “+welcomeLink.getAttribute(“outerHTML”));

System.out.println(“Inner Html “+welcomeLink.getAttribute(“innerHTML”));

}

Execution Output

Intellij execution output (How to execute explained in previous post)

If you executed WebElements.feature from eclipse plugin, then it should look similar to the below

Eclipse Execution

Command line execution

If you executed “mvn test” from command line, then the output should be 9 scenarios pass, since all .feature files get executed.