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.

Using mouse

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.

Using keyboard

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:

Using raw Javascript

And if all else fails, you can use Geb’s support for running raw Javascript inside your test to interact with an element. One common use of this technique is to click an element that is difficult to make visible using a test. Maybe something like a mouse-over menu that is tricky to hover over in a test. Selenium (which Geb is based upon) doesn’t allow interacting with hidden elements, but we can use some jQuery in our test to get around this restriction.

Example code

A full Geb example including some the code samples above is on my Geb example Github repo.

Happy testing!

About the Author

Object Partners profile.

One thought on “Complex UI elements in Geb browser functional tests

  1. Doug says:

    Great info Craig

Leave a Reply

Your email address will not be published.

Related Blog Posts
Building Better Data Visualization Experiences: Part 1 of 2
Through direct experience with data scientists, business analysts, lab technicians, as well as other UX professionals, I have found that we need a better understanding of the people who will be using our data visualization products in order to build them. Creating a product utilizing data with the goal of providing insight is fundamentally different from a typical user-centric web experience, although traditional UX process methods can help.
Kafka Schema Evolution With Java Spring Boot and Protobuf
In this blog I will be demonstrating Kafka schema evolution with Java, Spring Boot and Protobuf.  This app is for tutorial purposes, so there will be instances where a refactor could happen. I tried to […]
Redis Bitmaps: Storing state in small places
Redis is a popular open source in-memory data store that supports all kinds of abstract data structures. In this post and in an accompanying example Java project, I am going to explore two great use […]
Let’s build a WordPress & Kernel updated AMI with Packer
First, let’s start with What is an AMI? An Amazon Machine Image (AMI) is a master image for the creation of virtual servers in an AWS environment. The machine images are like templates that are configured with […]