Interacting with Web Elements

Everything what you see in a web page is a visual representation of web element. These elements refers to text boxes, checkboxes, buttons, comb boxes and many more that display or require data from the user. Web elements are written in the form of tags within the web page’s HTML code. When we interact with these HTML code, we are interacting with a web element.


In this chapter we will learn how to interact with different web elements.


The most commonly used html elements are as follows:-

  • textbox
  • button
  • hyperlinks
  • radio buttons
  • checkboxes
  • select boxes

To interact with web elements we need to identify that element. This is done with the help of locators. Find the right and unique locator for the element and then use the web element methods to interact with these elements.


There are two methods provided by WebDriver to find the element.

Find Single Element

Using findElement() method of WebDriver, unique single element can be located. Here the expectation is that the locator is unique and will return a single element.

Find List of Elements

Using the findElements() method of WebDriver, more than one element matching the locator can be retrieved. This is when the targeted element is part of a list or with common locator and can't be identified uniquely.



WebElement Methods

Click

As the name of the method indicates, it will click on the located element. This applies to any element. When the click method is executed, the method scrolls into view the element if it is not already pointer-interactable, and clicks its in-view center point. If the element’s center point is obscured by another element, an element click intercepted error is returned. If the element is outside the viewport, an element not interactable error is returned.

Java
C#
Python
Javascript
Copy
WebDriver driver = new ChromeDriver();
driver.get("https://www.testautomationstudio.com/demo/actions/");
driver.manage().window().maximize();
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(30));
// Click on the element
WebElement button1 =driver.findElement(By.id("action1"));
button1.click();
Copy
IWebDriver driver = new ChromeDriver();
driver.Url = "https://www.testautomationstudio.com/demo/actions/";
driver.Manage().Window.Maximize();
driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromSeconds(30);
// Click on the element
IWebElement button1 = driver.FindElement(By.Id("action1"));
button1.Click();
driver.Quit();
Python code coming soon
Javascript code coming soon

Send Keys


The element send keys method types the provided keys into an editable element. Typically, this means an element is an input element of a form with a type as text(TextBox) or an element with a content-editable attribute(eg. textarea). If it is not editable, an invalid element state error is returned. It will also scrolls into view the form control before setting keys into element.

Java
C#
Python
Javascript
Copy
WebDriver driver = new ChromeDriver();
driver.get("https://www.testautomationstudio.com/demo/set/");
driver.manage().window().maximize();
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(30));
WebElement firstName=driver.findElement(By.name("fname"));
//Enter your name
firstName.sendKeys("Automation");
Copy
IWebDriver driver = new ChromeDriver();
driver.Url = "https://www.testautomationstudio.com/demo/set/";
driver.Manage().Window.Maximize();
driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromSeconds(30);
IWebElement firstName = driver.FindElement(By.Name("fname"));
//Enter your name
firstName.SendKeys("Automation");
driver.Quit();
Python code coming soom
Javascript code coming soon

Clear

The clear method resets the content of an element. This requires an element to be editable, and resettable. The element should be of input type text(eg textbox) or an element with a content-editable attribute(eg textarea). If these conditions are not met, an invalid element state error is returned.

Java
C#
Python
Javascript
Copy
WebDriver driver = new ChromeDriver();
driver.get("https://www.testautomationstudio.com/demo/set/");
driver.manage().window().maximize();
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(30));
WebElement firstName=driver.findElement(By.name("fname"));
//Enter your name
firstName.sendKeys("Automation");
//Clear the text field
firstName.clear();
Copy
IWebDriver driver = new ChromeDriver();
driver.Url = "https://www.testautomationstudio.com/demo/set/";
driver.Manage().Window.Maximize();
driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromSeconds(30);
IWebElement firstName = driver.FindElement(By.Name("fname"));
//Enter your name
firstName.SendKeys("Automation");
//Clear the text field
firstName.Clear();
driver.Quit();
Python code coming soon
Javascript code coming soon

getAttribute

The getAttribute method returns the value of a web element's attribute as a string. If there is no attribute, this method will return null. This method is commonly used to get the value of a textbox or any attribute value from an element.

Java
C#
Python
Javascript
Kotlin
Copy
WebDriver driver = new ChromeDriver();
driver.get("https://www.testautomationstudio.com/demo/set/");
driver.manage().window().maximize();
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(30));
WebElement fNameElem = driver.findElement(By.name("fname"));
fNameElem.sendKeys("Automation");
//To get the attribute value
String fName = fNameElem.getAttribute("value");
System.out.println(fName);
Copy
IWebDriver driver = new ChromeDriver();
driver.Url = "https://www.testautomationstudio.com/demo/set/";
driver.Manage().Window.Maximize();
driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromSeconds(30);
IWebElement firstName = driver.FindElement(By.Name("fname"));
//Enter your name
firstName.SendKeys("Automation");
//To get the attribute value
String fName = firstName.GetAttribute("value");
Console.WriteLine(fName);
driver.Quit();
Python code coming soon
Javascript code coming soon
Kotlin code coming soon

getCssValue

This will return the value of a given CSS property.

getTagName

This method will get the tag name of this element. It will return "input" for the element <input name="foo" />.

getText

This method will get the text if the given element, including the sub-elements. Here the element should not be hidden by CSS. This will work on all the elements except the elements with input tags.

Let's take an example of following HTML code we have some text displayed as Transaction completed. If we need to get this text, we can simply use the getText method of the web element.

<p id="status">Transaction completed</p>

The selenium code to get the text from an element is as follows.

Java
C#
Python
Javascript
Kotlin
Copy
WebDriver driver = new ChromeDriver();
driver.get("https://www.testautomationstudio.com/demo/get/");
driver.manage().window().maximize();
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(30));
WebElement userGreet = driver.findElement(By.id("userGreet"));
String userGreetString = userGreet.getText();
System.out.println(userGreetString);
Copy
IWebDriver driver = new ChromeDriver();
driver.Url = "https://www.testautomationstudio.com/demo/get/";
driver.Manage().Window.Maximize();
driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromSeconds(30);
IWebElement userGreet = driver.FindElement(By.Id("userGreet"));
String userGreetString = userGreet.Text;
Console.WriteLine(userGreetString);
driver.Quit();
Python code coming soon
Javascript code coming soon
Kotlin code coming soon

isDisplayed

This method will check if the element is displayed or not. It will return true if the element is displayed else will return false. This operation will work on all elements.

isEnabled

This method will check if the element is enabled. It will return false if the element is disabled else will return true. This operation will work on all elements.

isSelected

This method will determine whether this element is selected or not. This operation only applies to input elements such as checkboxes, options in a select and radio buttons. It will return true if selected else return false.