One of the biggest struggles while testing web applications that use AJAX is dealing with the timing issues caused by asynchronous nature of the request. A common solution is using timeouts to wait for the AJAX call to be completed. This could cause lots of timing issues. Using Geb there is a better way to determine that the AJAX call and its callback has been completed.
In this blog post we will test the W3Schools website which has a button on it which executes an AJAX request: http://www.w3schools.com/ajax/ajax_example.asp
First we change our baseUrl in the GebConfig.groovy file to the w3school site:
baseUrl = "http://www.w3schools.com/"
Second we define the W3schools page with the needed content and the makeRequest method which clicks the button.
import geb.Page
class WwwSchoolsAjaxExamplePage extends Page{
private static final DEFAULT_DIV_CONTENT = 'Let AJAX change this text'
static url = "ajax/ajax_example.asp"
static at = {
title=="AJAX Example"
}
static content = {
theButton { $(".example button") }
theResultDiv { $("#myDiv") }
}
def makeRequest() {
theButton.click()
waitFor { theResultDiv.text()!=DEFAULT_DIV_CONTENT }
}
}The key statement here is the waitFor line. This will wait till the condition in the closure returns true. The waitFor uses the default timeout configuration which is for Geb 5 seconds.
Next we’re going to make our test which verifies our content has been updated.
import geb.spock.GebReportingSpec
class AjaxRequestSpec extends GebReportingSpec{
def "Validate if content gets updated after button click"() {
given:
to WwwSchoolsAjaxExamplePage
when:
makeRequest()
then:
theResultDiv.children()[0].text() == "AJAX is not a new programming language."
theResultDiv.children()[1].text() == "AJAX is a technique for creating fast and dynamic web pages."
}
}When you run the now run the test, the test will succesfully verify the updated content of the w3schools website.
- Done with Groovy 2.4.3
| Reference: | Geb Gems: Handling AJAX requests from our JCG partner Albert van Veen at the JDriven blog. |
