Web Testing with Selenium Webdriver Part 2: Dealing with CSS Properties and Sound

Dynamic things in real life | Photo by Anders Jildén on Unsplash

Welcome to the second part in my Web Testing with Selenium Webdriver series. In case you missed it, part 1 can be found in the following link and contains important information that you will need to make sense of what’s going on.

Web Testing with Selenium Webdriver Part 1: Start with basic tests

The tests described in the first part and the steps we went through were rather simple and dealt with mostly static checks. We verified that links worked, that the title of the page is the correct one, or that we can navigate back to the main portfolio from one of the projects.

Dynamic websites are all around us

Websites, as I’m sure you are aware of, aren’t static and almost always rely on various dynamic things to catch our attention or deliver better functionality. One relatively simple way in which websites can get more dynamic is by modifying the CSS properties of various elements on the fly, based on user interaction or on other things.

As I explained in the reasoning for why I chose Selenium Webdriver, the framework is a flexible one that comes with all sorts of things to make checking dynamic pages and elements a bit easier.

In this article, we’ll see how we can check CSS properties, send keys to elements of a page, and even perform some more complicated actions. As a bonus, I’m also going to cover listening for a sound on a page.

Checking simple properties and styles

One good example from my portfolio is the very first project, which lets you “play” the drums by hitting keyboard buttons from A to L. On a button press, a sound would play and the associated div tag for that letter would switch properties for a brief second.

JS30: 01 Drums

I’ll talk about the sound checking process towards the end of the article. Until then, the first test case deals with verifying that the style transition occurs when pressing the A key.

As you can see in the code below, I’m performing several steps:

• Find the link to my project in the Portfolio page and click it.
• Attribute the div that will change styles to a variable of type WebElement called aKey.
• You cannot send a key using the sendKeys method to an element that does not support it. As such, I use the Actions part of Selenium Webdriver, which is documented quite well right here.
• I defined a new object of type Actions called builder and instantiate it using my driver object, which controls Chrome.
• I define a new variable called sendAKey and use the builder object from above. I call on builder the moveToElement method and point to the aKey variable that I also defined above. I then send a key press in the form of A. As with all actions objects, I must finish it with the build method.
• Once an action is defined, you must also perform it by, of course, calling the perform method on it.
• Finally, I create an assertion that goes to the aKey variable, gets a CSS attribute by using the getAttribute method, which takes in as an argument the name of the property, in this case class. The first section of the assertion defines the actual thing that will be recorded in our test. The second section defines the expected class name that we hope to find, in this case “key playing”.

Comparing two versions of a CSS property

The second example deals with my Clock project, which changes automatically as time passes. More specifically, as time goes on, three div s representing the hour, minute, and second hands of an analog clock change their position.

Clock

To test that this actually happens, I will check the style of the second hand at one point in time and then at another point in time.

To do this I go through these steps:

• I attribute the value of the style CSS attribute to a variable of type String called firstStyle.
• I wait a certain period of time, in this case two seconds.
• I then attribute the new, hopefully changed value of the style attribute to another variable called secondStyle.
• I then make an assertion that the two Strings are not equal. I also add a third argument to the assertNotEquals method, in the form of a message that will be displayed if the two strings are actually equal, to help when failing.
• Note that, thanks to IntelliJ’s enforcing of best practices, I’ve also added after the name of my test method the throws InterruptedException mention, just in case the thread that processes it is interrupted.

A variation of this example can be seen below, focusing on the CSS Variable project.

CSS Variable update

In this case, I save the style of the page, then modify the position of one of the different sliders by clicking on it and then sending the right arrow key. Then I save the style again and make an assertion to verify their difference.

Bonus round: checking for a sound

Since my Drums project plays sounds, I searched for a way to check for them using Selenium. While my first few results didn’t bring any solutions, I stumbled upon this great effort from a StackOverflow user.

They basically said that we can search for an element with the audio tag name and then check if it’s playing has ended. While this works great with my website, which plays brief sounds, I started thinking as a tester and wondered how this check handles longer or even continuous sounds. The ended attribute won’t appear in those cases until a long time passes, or won’t happen at all.

As such, I searched to see what other attributes can be checked and found the currentTime one, which displays the timestamp of the sound. If the sound hasn’t played, it’s 0, but it changes after it begins playing. In my case, the A sound, after a play, changes its currentTime to 0.483991.

As such, I now assert that the currentTime is different than 0 to see if my sound has played.

Conclusion

Selenium, as mentioned previously, is a powerful tool. It’s just up to us to use its different methods and features to do our testing. I didn’t know about things like Actions or sound checking but, thanks to Google, I was able to learn from various resources and augment my abilities.

Check out my current progress on GitHub and stay tuned for more articles in the future.