Web Testing using Selenium Webdriver Part 3: Using for Loops

Loop through your web pages | Photo by Priscilla Du Preez on Unsplash

Welcome to part 3 of my Web Testing using Selenium WebDriver series — today we’re going to talk about using for loops to go through elements of the pages we are checking.

Before we begin, make sure to check out the other parts of this series. They dealt with setting up, making simple tests, and dealing with some dynamic elements.

Iterating through WebElements isn’t scary

So far, the sample tests I’ve offered have been quite simple, dealing with just specific elements of a page, from its title to various parts that we treat in particular for our checks.

However, there are many cases in which we need to verify multiple things at once or ensure that the functionality we are observing is the correct one and affects the intended parts of the website.

To help in this endeavor, you can use a nifty combination of Java and Selenium to create a variable of type list that contains WebElements. You do so by using the List<WebElement> notation, followed by the name of your variable and the thing(s) you are pointing at.

Go through a list of suggestions on a site using a for each loop

One pretty classic example, given the behavior of websites at every type of input from the user, is to go through a list of suggestions when inputting text.

For an example, I’ll use another one of my Portfolio projects, which goes through a list of cities in the U.S. and filters them based on the text you have inserted in the dedicated box.

Type Ahead 👀

The steps of the test are:

• Open the intended page, as the browser boots up, thanks to the Utils class and the BeforeMethod method at my Portfolio homepage.
• Find the input box and use the sendKeys method to send a couple of characters.
• Due to the fact that inserting characters all at once breaks the suggestions, I insert a small wait time by using Thread.sleep. I then send another couple of keys for my test.
• Initially, to allow time for the suggestions to appear, I had another Thread.sleep command, but I refactored it to also show the isDisplayed method. I use an if statement that only gets executed once the suggestions are displayed (aka isDisplayed returns true).
• Once the suggestions are displayed, I create a new list of WebElements called resultList and point it towards all the elements that have the class name “name”. These elements include the name of the city that is being suggested.
• Seeing as how this list contains multiple elements, it’s time to use the for loop, more specifically the for each variant. I basically say that, for each element in the list of results, I want to do something with it.
• In this case, I am using each result from the list in an assertion. I get the text from the result, I convert it to lower case for simpler comparison, and then check to see if it contains the characters I am expecting.
• If the assertion passes for that element, the for loop continues its iteration until it reaches the final element and checks it.

Go through a site’s elements

Another good example of going through a site’s elements to ensure that they behave correctly when the user makes an input. For this, I’m going back to my first project, in which users can press certain keys and hear sounds.

JS30: 01 Drums

In previous articles, I already tested out that the page loads and that an audio file is played when you press one of the intended keys.

However, clever testers were able to easily identify some flaws in the audio test: you didn’t know that the correct audio file played when a key was pressed.

As such, it’s time to use two different lists and a single for loop to figure this out:

• The first step is to click on the link to the correct page.
• I then create a list of webelements that contain all of the elements from the page that have the class name “key”. This includes all the available letter divs from A to L.
• I then create another list, this time with the elements that contain the audio tag. These include in themselves the links to the audio file as well as other attributes, such as the currentTime one that we will use for the checking process.
• I then create a new Actions object called builder. As I explained in the previous article, this is used to emulate more complex actions on a website.
• Then a regular for loop is used, starting with an iterator that begins at 0, ends before it reaches the actual size of the list of keys, and grows by one every loop.
• Inside the loop, I create a sendKey variable of type Action. I uses the builder object created above, move to the current element in the list of keys, using keyList.get(i), and use the sendKeys method.
• As an argument to the sendKeys method, I use a slightly complex construction: I get the text from that element and, since I’m only interested in the first character, I get that specific character. Since sendKeys only accepts strings as arguments, I use String.valueOf to turn my character into a string.
• I then perform the action defined above, which moves the focus to my current div, and presses the key that belongs to it. For example, it moves to A and sends A to the website.
• I wait for the audio to play using Thread.sleep.
• I then make an assertion to check that the sound associated with that element plays. To do so, I check that the audio element has a currentTime value different than 0.

Conclusion

For loops are quite useful, especially when dealing with complex websites. As such, coming to grips and knowing how to navigate them is quite important. I hope that these examples help and you can bet that they’ll be used in future articles.