7.4. Functional testing of web applications with Spock
The previous section covered functional tests for back-end Java applications that aren’t interactive. This section shows you how to test front-end applications that sport a web interface accessible via the browser.
For these kinds of tests, you need a way to control the browser and replicate the actions (for example, fill forms or click buttons) that a human user typically performs. Spock doesn’t have built-in support for this and instead collaborates with Geb, the Groovy browser automation library.
7.4.1. Browser automation with Geb
Geb is a library that provides a Groovy abstraction on top of the popular Selenium/WebDriver[18] framework for automating a browser. If you’ve worked with Selenium, you already know what Geb does. What Geb brings to the table is excellent integration[19] with Spock and a jQuery-like language[20] for accessing web page content. If you already know jQuery (or any other similar CSS selector syntax), Geb will be familiar to you.
You can learn more about the Selenium suite of tools at www.seleniumhq.org/.
Geb is written by Luke Daley, who is also a Spock committer.
You can learn more about jQuery at https://jquery.com/.
As a quick example, if you want to examine the text for the h2 header in a web page, Geb allows you to write the following:
$("h2").text()
If you want to click the button with an ID myButton, Geb offers you this:
$("#myButton").click()
With Geb, you reuse your knowledge of jQuery. If you’re not familiar with jQuery, you need to examine its documentation, and especially the part for CSS selectors, in order to fully use Geb.
7.4.2. The example web application
The application you’ll test with Spock and Geb is a simple web interface over the warehouse manager you’ve seen in the previous examples. Figure 7.10 shows a sample screen from this application.
Figure 7.10. Web interface that will be used for Spock tests
The code uses Spring MVC, but in a similar manner to the REST tests, the implementation technology doesn’t matter. Geb interacts with only the final web page and doesn’t care about the underlying technology. You could write Spock/Geb tests for a PHP application, using the same CSS selectors.
7.4.3. Spock and Geb: a match made in heaven
Let’s start with a simple example of Spock and Geb together. As a first test, you’ll verify the title of the first page of the application. Figure 7.11 shows the expected result.
Figure 7.11. Expected result for title page is the string “Spock/Geb Web example”
The next listing provides the Geb specification that tests this.
Listing 7.10. Using Geb and Spock together
The most important thing to notice in listing 7.10 is that the test class extends the GebSpec class and not the Spock Specification, as shown in all examples so far. This is essential so that Geb methods and objects are available inside the Spock methods.
After this is done, you use the Browser object to load the first page of the application. Finally, you examine the title object. This object is an implicit one offered by Geb and always represents the HTML title of the current HTML page. It doesn’t follow the jQuery pattern because it’s not part of the content of the page.
Remember that Geb is an abstraction over Selenium/WebDriver, so it supports whatever browser implementations are already there. In the source code of the book, the default browser is Firefox, so if you run this test, a new Firefox instance will be launched on your computer and you’ll see it react automatically to the test definitions. You can use other browsers or even browser emulators (such as Phantom.js, http://phantomjs.org/) as other options. Consult the Geb documentation on how to achieve this.
To see the jQuery syntax of Geb, let’s modify the test to look at the page content in addition to the page title. You’ll test an HTML header (h1) and also make sure that the first tab of the user interface is selected. Figure 7.12 shows the expected result.
Figure 7.12. HTML content that will be verified by the Geb test. You’ll verify the h1 element and the “active” CSS class.
The updated Spock test verifies the title as before and reads the page content to make sure that the expected text is present on the page (see the following listing).
Listing 7.11. Using Geb to access page content
This listing demonstrates the jQuery-like style of Geb for accessing page content. The last two lines in the then: block will be examined by Geb against the HTML content found in the browser. The test will fail if the HTML content differs from the expected one.
7.4.4. Using Geb to interact with a web page
For a more useful example than simple page loading, let’s see how to emulate user actions on a web page. The sample application contains a form, shown in figure 7.13, that allows the user to create a new product. An HTML form is used to define the name of the product and its price. After the user submits the form, a success message appears. You’ll create a test that navigates to the form page, inputs the name of the product, submits the form, and verifies the success message (not shown in figure 7.13). The code is shown in the next listing.
Figure 7.13. Details of an HTML form. You’ll fill the input fields and submit it programmatically.
Listing 7.12. Using Geb to submit HTML forms
This listing has several important points. First, you use the @Stepwise annotation again. The reason for this is that the test contains two methods. The first one navigates to the HTML form page, and the second submits the form. If the first fails for some reason (for example, the application isn’t up), there’s no point in running the second method. The @Stepwise annotation ensures that the form won’t be submitted if its page can’t be found.
Second, in order to verify the formed page, you use an HTML element chain:
$(".col1").$("h2").text() == "New Product details"
This line means, “Locate an element with the CSS class col1 and then search for a child that is a header of level 2. This header should contain the text New product details.”
Next, the form is submitted with the following two lines:
$("input[name='productName']").value("Bravia TV")
$("#createProductButton").click()
The first line means, “Locate an HTML element of type input that has a name attribute with value productName. Then fill in the text Bravia TV.” The second line says, “Find an element with ID createProductButton. Then click it (assuming that it’s a button).”
Running the test launches the Firefox browser on your computer, and you’ll see it perform these actions in real time. The final line in the then: block locates an element with CSS class ok and checks its text (in the example application, it’s a span HTML element).
I hope that this example gives you an idea of the capabilities of Geb. I’ve barely scratched the surface of all the possible use cases. Check the official Geb documentation (http://www.gebish.org/manual/current/) for more details. Make sure not to miss the Page Objects pattern[21] for reducing[22] duplicated code among tests and the ability to get screenshots[23] while a test runs. The previous tests shown are contrived examples so that you get a feel for Geb’s capabilities. In a real application, you’d organize all your Spock tests around pages to make them resilient to GUI changes.
As an exercise, write Geb tests for the page of the application that lists existing products. Write a test that also fills in the price field of the form and then goes to the inventory page and verifies that the product is correctly inserted with the correct price.
As another exercise, modify your Geb tests to use Page objects instead of exposing HTML elements inside them.