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.
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();
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();
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.
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");
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();
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.
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();
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();
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.
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);
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();
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.
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);
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();
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.