Welcome to the third article of the Java Selenium series. In this article, we’re going to learn how to actually interact with our web elements so we can perform actions on them after we locate them.
We will learn how to:
- Take basic actions on elements
- Get information from elements and advanced element actions.
- Work with alerts.
Let’s get started!
To interact with an element first you have to find the element, which is exactly what we discussed in the last article. After we find the element, we can then interact with it with one of the Selenium WebDriver methods, such as the click() method, which you have already see.
This is called Find and Act, because the first action locates the element and then this one actually interacts with the element:
And this is called Find, Store and Act, because we find the element and we store it inside of a variable. Then we use that variable to interact with the element.
WebElement sigIn = driver.findElement(By.id(“sign-in”));
This is usually the preferred method.
Here are some of the methods that you can use to interact with an element:
– click(), which is just simply a click on an element
– clear() method that you can use to clear existing text in a field before typing in your own text
– sendKeys, which will allow you to send a string of keys into a specific element
– submit() – submitting on an element means you can submit a form
Get element information
What if we want to get back information from our elements to decide what action we want to take afterward? There are several methods for getting back various types of information
- getText(), which will provide the text of the element
- getTagName(), which will tell you what is the tag name of the element
- getAttribute(), which is extremely useful for potentially deciding what the state of an element is. For example, you may be interacting with a react application or an angular application, which use attributes a lot. Using the getAttribute() method, you can check if the element has an attribute with a flag such as true or false, and then you can use that attribute to decide whether the element is in the correct state.
- isDisplayed() method will tell you whether the element is displayed
- isEnabled(), which returns true if the element is enabled and false if it’s disabled.
Be careful with these two methods, because they may not always work, depending on how the HTML is implemented. So it’s important whenever using these methods to make sure that when you use them that they actually tell you the correct state of the element. Most of the times they will work, but sometimes they may not.
Let’s talk about some advanced element actions. Advanced element actions involve mouse and keyboard interactions to perform actions like hovering and using key combinations. They look like this:
First, you need to locate the element that you want to interact with, and store it in a varioable. Then we do advanced element interactions using the Actions class from Selenium WebDrive.
In the above example, we’re using the action to click an element. This is the same as our mouse click, but we’re using the actions API. Until you use the perform() method, the action will not actually occur.
Here are some of the major mouse actions that you can do on a web element:
There are also keyboard interactions which are extremely helpful if, for example, you cannot interact with an element using standard keyboard commands:
I do really want to caution you that keyboard commands can be very flaky and should be used as a last resort in your test automation. However, there are situations where you cannot use regular mouse actions, and so keyboard commands come in very handy.
Here are some more useful examples of advanced actions:
Let’s talk about windows and frames, because they are more challenging. Here’s an example of a code that works with windows:
Next, we are using the getWindowHandle() method. What this method does is provide the unique ID of the current window. This means that we haven’t switched to any new windows yet. Then, we call getWindowHandles(), which will get all the currently open tabs. Using this handles object, we can remove the original window from the set. Then, with the iterator().next() method, we will retrieve the string for the second window. At this point, we can switch to the second window. That’s simply done with the witchTo().window() method.
Now, to check that we actually have the correct tab, we can make an assert that compares the page title with the title we expect to have.
Using, driver.close(), we can close the window that is currently focused, then switch to our original window. Now that the original window has the focus again, we should now get the title and verify that the correct window remained open.
Frames are pesky little guys, because they can throw any automation engineer into confusion when an easy-to-find element is actually not found. Frames are ultimately like embedding one HTML page inside of another HTML page. And if you don’t switch into the appropriate frame, you’ll get a NoSuchElementException, like you’re not on the correct page.
To get a better idea, bavigate to https://the-internet.herokuapp.com/nested_frames and open the Developer Tools:
Let’s see how the code for working with these frames looks:
So the very first line is going to navigate to the URL. We have several ways we can switch to different frames. One of them is by switching by index. In our case, because we are currently at the top-level frame, we can only see two frames. This means we can either switch to index 0 or to index 1. Then, performing an assertion on this element, looking by the body, it should return “BOTTOM” because we are currently focused on the bottom frame. Then, we can switch to the parent frame, using the switchTo().parentFrame() method. This will simply move the focus to the top-level frame
Another way to switch frames is by simply passing their name. The next line of code will take us to the top frame. And the one right after will take us to the left frame. And now we can only interact with the elements inside this frame.
We can also use switchTo().defaultContent(), which will take us to the very top of the HTML.
Next, let’s see how to handle alerts in Selenium WebDriver. We’ll use this page for our examples. This page has multiple alerts we can open and interact with, for example:
Here’s how the code to test the page looks like:
To do this, we need to switch to the alert, using the switchTo().alert() method, and then accept it, with the accept() command.
Alert inputAlert = driver.switchTo().alert();
And now we can just use this alert object to perform multiple operations, such as getting the text and inputting text.
Once we have it, we can add the cookie to the browser using the add cookie method. If we want to make sure that we have a cooking the browser, we can use the getCookieNamed() method and provide the name of the cookie.
And if we want to assert that we got the correct cookie, we simply use the getValue() method. This will let us know whether the cookie we have set is the correct cookie or not. And of course, if you want to delete all the cookies in the browser, you can do it with the deleteAllCookies() command.
That’s it! If you went over all three articles in the series, then you covered all the basics of automating tests with Selenium WebDriver in Java. If you want to get into more advanced topics, we recommend learning about best practices in automated testing and the page object design pattern.