Complex UI elements in Geb browser functional tests
Browser functional testing is a great way to verify your web application fully works end-to-end. Interacting with standard web page elements like links and forms is often straightforward, but driving more complex UI elements such as sliders and date pickers can get tricky. In this post we’ll go through some examples of working with these types of elements using the Geb functional testing framework.
In this example we’ll move a slider element using the mouse. Geb provides an interact block that we can use to drive the mouse using Selenium Actions. Here we’ll click the slider element, move it horizontally be a given number of pixels, then release the slider.
Another way to interact with these types of elements is using the keyboard. With Geb we can use the left-shift operator to send keystrokes to any UI element.
For example, if you wanted to send the individual keys for each letter in the word “value” to an input field, you can use:
Or if you want to send a non-character keystroke, such as using the right arrow to move a slider, you can use:
A full Geb example including some the code samples above is on my Geb example Github repo.