Interacting with the Elements in the page | Performing actions like click, type, select etc

In the Previous Tutorial, we wrote a script where we located all elements in Automation Practice page on which we wanted to perform some actions. We explored the following –

• Method to find an element
• Different WebDriver locators to pass as a parameter to find an element –
  • linkText
  • id
  • className
  • xpath
  • cssSelector
  • name
  • partialLinkText
  • tagName

In this tutorial, we would continue that script and will learn to perform actions on those elements.

If you followed the Previous Tutorial correctly you should have following lines of code by now –

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.By;
 
public class SubmitForm {
 public static void main(String[] args) {
 System.setProperty("webdriver.chrome.driver", "C:\\teachmeselenium\\chromedriver.exe");
 WebDriver driver = new ChromeDriver();
 driver.manage().window().maximize();
 driver.get("https://cosmocode.io/automation-practice/");
 
 WebElement lnkReload = driver.findElement(By.linkText("Click here to reload this page"));
        
        WebElement inpFirstName = driver.findElement(By.id("firstname"));
 WebElement inpLastName = driver.findElement(By.className("lastname"));
 WebElement rdoGender = driver.findElement(By.xpath("//input[@value='Male']"));
 WebElement chkLanguage=driver.findElement(By.cssSelector("input[value=java]"));
 WebElement lstAge = driver.findElement(By.name("age"));
 WebElement btnSubmit = driver.findElement(By.id("submit_htmlform"));
 
 WebElement lnkPartialText = driver.findElement(By.partialLinkText("i-wont-change"));
 
 
 }
}

from selenium import webdriver

chrome_driver_path = "C:\teachmeselenium\chromedriver.exe"
driver = webdriver.Chrome(chrome_driver_path)
driver.maximize_window()
driver.get("https://cosmocode.io/automation-practice");
reload = driver.find_element_by_link_text("Click here to reload this page")
first_name = driver.find_element_by_id("firstname"))
last_name = driver.find_element_by_class_name("lastname")
gender = driver.find_element_by_xpath("//input[@value='Male']")
language=driver.find_element_by_css_selector("input[value=java]")
age = driver.find_element_by_name("age")
submit = driver.find_element_by_id("submit_htmlform")
partial_link_text = driver.find_element_by_partial_link_text("i-wont-change"))

Please keep opened Automation Practice page in a new browser window. We are going to perform actions on its elements that we located as per above lines of codes.

click() Method – Clicking on a link

• Let us start our automation activity by clicking on the link – ‘Click here to reload this page’. It is located at the beginning of the form on the page.
• If you remember we already got that element – ‘lnkReload’ in the above code snippet.
• This is how we can perform click operation on that element:

lnkReload.click();

Let us insert the above line of code after the code-block that finds that element by calling findElement on lnkReload.

sendKeys() Method – Typing text into an input box

• As we can see we have two input boxes on the page – First Name and Last Name field.
• We have located First Name and Last Name elements that is referred by inpFirstName and inpLastName WebElement in the Previous Tutorial.
• This is how we can ask WebDriver to type some text into an input box:

inpFirstName.sendKeys("TestFirstName"); inpLaststName.sendKeys("TestLastName");

first_name.send_keys("TestFirstName")
last_name.send_keys("TestLastName")

• The sendKeys() method takes a String argument that it types into the target input-box.
• Let us insert above lines of code after the code where we located these WebElement – inpFirstName, inpLastName

Select Radio item

• As we can see we had located the target radio item that is referred by rdoGender WebElement
• For selecting a radio item we just need to perform click operation on it.

rdoGender.click();

Let us insert above lines of code after the code where we located that rdoGender WebElement.

Selecting an item from the drop-down list

• First, we need to locate that element as we have done so far.
• Next, we need to create an object of Select and pass the element found in the previous step.
• Finally, we will use that Select object to select an item from the list.

In the Automation Practice page, there is a drop-down list to select ‘Age’.

We already have a WebElement that refers to that element – lstAge. Now we will instantiate (create an object of) Select and pass the WebElement that we got in the previous step.

Java

Python

Select selectAge = new Select(lstAge);

Holy Shit. eclipse is showing some error for Select.

Why don’t you move the mouse over the red line for both Select keyword and check if eclipse is suggesting you something? Let me guide you through a screenshot:

from selenium.webdriver.support.ui import Select

select = Select(age);

• Next, we will use selectAge object to select age.
• Inspect the Select box. As we can see this object has only tag ‘select’. It doesn’t have any properties like id, class, name etc

<select name="age">
   <option value="Yet to born">Not Born</option>
   <option value="Under 20">Under 20</option>
   <option value="20 to 29">Under 30</option>
   <option value="30 to 39">Under 40</option>
   <option value="40 to 50">Under 50</option>
   <option value="Over 50">Above 60</option>
   <option value="Ghost">Not Defined</option>
</select>

selectByVisibleText

selectAge.selectByVisibleText("Under 30");

select.select_by_visible_text("Under 30")

selectByValue

selectAge.selectByValue("20 to 30");

select.select_by_value("20 to 29")

selectByIndex

selectAge.selectByIndex(2); //Index starts from 0

select_by_index(2) #Index starts from 0

Assignment for you:

• Try to get all options in the list box and print them to console.
• Verify the selected option.

Clicking on a Button

• We have filled the form. Now its time to submit it.
• As we can see there is a ‘Submit’ button. We already have btnSubmit element from the Previous Tutorial.

btnSubmit.click();

Let us include the above line of code after the line where we refer that WebElement btnSubmit.

Are you nuts? There is one more item on the page. Check next to the ‘Submit’ button there is a link with link text some-random-text-xyz-GoToHomepage-some-random-digit-123.

Oh yeah… I guess we referred that WebElement by lnlPartialText. Let us click on it:

driver.findElement(By.partialLinkText("GoToHomepage")).click();

driver.find_element_by_partial_link_text("GoToHomepage")).click()

Oh, my goodness. You seem to have merged two lines of code into one. Earlier in the first line, we used to get the WebElement and then in the next line we performed the action on it.

Yes, buddy. We can do this way as well. In fact, this is the conventional way. Why don’t you try this for all steps?

• We are done with scripting. Let us quit() the driver at the end of the code so that it closes the browser once the execution is over.

Complete Code

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;

public class ScriptClass {
	
	public static void main(String[] args) {
		System.setProperty("webdriver.chrome.driver", "C:\\teachmeselenium\\chromedriver.exe");
		WebDriver driver = new ChromeDriver();
        driver.manage().window().maximize();
        driver.get("https://cosmocode.io/automation-practice");

        WebElement lnkReload;
        lnkReload = driver.findElement(By.linkText("Click here to reload this page"));
        lnkReload.click();

        WebElement inpFirstName = driver.findElement(By.id("firstname"));
        inpFirstName.sendKeys("TestFirstName");
        WebElement inpLastName = driver.findElement(By.className("lastname"));
        inpLastName.sendKeys("TestLastName");

        WebElement rdoGender = driver.findElement(By.xpath("//input[@value='Male']"));
        rdoGender.click();

        WebElement chkLanguage=driver.findElement(By.cssSelector("input[value=java]"));
        chkLanguage.click();

        WebElement lstAge = driver.findElement(By.name("age"));
        Select selectAge = new Select(lstAge);
        selectAge.selectByVisibleText("Under 30");

        driver.findElement(By.id("submit_htmlform")).click();

        driver.findElement(By.partialLinkText("i-wont-change")).click();

        driver.quit();
		
	}
	
}

from selenium import webdriver

chrome_driver_path = "C:\teachmeselenium\chromedriver.exe"
driver = webdriver.Chrome(chrome_driver_path)
driver.maximize_window()
driver.get("https://cosmocode.io/automation-practice");

reload = driver.find_element_by_link_text("Click here to reload this page")
reload.click()

first_name = driver.find_element_by_id("firstname"))
first_name.send_keys("TestFirstName");

last_name = driver.find_element_by_class_name("lastname")
last_name.send_keys("TestLastName");

gender = driver.find_element_by_xpath("//input[@value='Male']")
gender.click();

language=driver.find_element_by_css_selector("input[value=java]")
language.click();

age = driver.find_element_by_name("age")
select = Select(age);
select.select_by_visible_text("Under 30")

submit = driver.find_element_by_id("submit_htmlform")
submit.click()

partial_link_text = driver.find_element_by_partial_link_text("i-wont-change")
driver.find_element_by_partial_link_text("GoToHomepage")).click();

All set dude. Save this project and run it.

Take help from This Previous Tutorial if you missed how to run a Java Project.

Great. You made my life easier by demonstrating all WebDriver locators.

Wait, buddy. I rarely spoon-fed. There is one more WebDriver locator that I deliberately skipped – tag name. Why don’t you try to google it?

Try to figure out a use case where you can use it and write the code.

Summary

We learned about all 8 WebDriver locators in this and Previous Tutorial –

• linkText
• id
• className
• xpath
• cssSelector
• name
• partialLinkText
• tagName

We also learned to perform the following operations on elements –

1. click
2. sendKeys
3. select

We are done with automating user interactions. I would strongly recommend not to move forward until you are 100% comfortable with this concept and syntax. You would be spending most of your Selenium time dealing with it.

One of the major reason for automation scripts failure is due to synchronization issues. We will handle it by using Waits in the Next Tutorial.