This document provides an overview of using Geb to test Grails applications. It discusses: - How Geb works by building on WebDriver to programmatically control browsers - Structuring Geb tests using page objects and modules to organize test code - Interacting with the application directly from Geb tests in Grails 2.x using the remote control plugin and in Grails 3.x by running in the same JVM - Configuring the browser driver used for tests, including options for Firefox and Chrome

1. GEB FOR TESTING YOUR GRAILS
APPLICATION
Jacob Aae Mikkelsen

2. AGENDA
Functional testing
Geb - cudos and history
How Geb works
Geb and Grails 2 and 3
Browser support
Javascript

3. JACOB AAE MIKKELSEN
Senior Engineer at Lego
Microservice based architechture on JVM
Previously 4 years at Gennemtænkt IT
Consultant on Groovy and Grails
External Associate Professor - University of Southern
Denmark
@JacobAae
Blogs The Grails Diary

4. FUNCTIONAL TESTING
Ignores the specifics of the underlying software
component under test.
Merely asserts that providing certain input results in
certain output.
Web-application: Programmatically controlling a web
browser to simulate the actions of a user on a web page.
Traditionally been tedious, cumbersome and brittle
to do

Geb helps ease the pain

5. GEB

6. CREDITS
Luke Daley
Marcin Erdmann

7. GEB HISTORY
Started in November 2009
Created by Luke Daley
Current project lead Marcin Erdman

8. WHY GEB
jQuery like selector syntax
Power of WebDriver (Easier api)
Robustness of Page Object modeling
Expressiveness of the Groovy language
Integrates well with build systems (Gradle/Maven)
Excellent user manual/documentation

9. GEB IMPLEMENTATION
Build on top of the WebDriver browser automation library
successor to the Selenium Remote Control (RC) testing
framework.
Selenium RC → JavaScript to interact
WebDriver → native browser drivers
Use JUnit or Spock

10. USING GEB

11. GEB SELECTORS (1)
Jquery like syntax
// match all 'p' elements on page
$("p")
// match the first 'p' element on the page
$("p", 0)
// All 'p' elements with a title value 'section'
$("div", title: "section")
// match the first 'p' element title attribute 'section'
$("p", 0, title: "section")
// match the first 'p' element with the class 'main'
$("p.main", 0)

12. GEB SELECTORS (2)
Selecting returns Navigatorobjects
// The parent of the first div
$("div", 0).parent()
// All tables with a cellspacing
// attribute value of 0 that are nested in a paragraph
$("p").find("table", cellspacing: '0')

13. RETRIVING INFORMATION
$("p").text() == "a"
$("p").tag() == "p"
$("p").@title == "a"
$("p").classes() == ["a", "para"]

14. INTERACTION WITH CONTENT
click()
isDisplayed()
withConfirm{}
withAlert{}
$("a.btn").click()
$("div").isDisplayed()
withConfirm {
$("button.delete").click()
}

15. SENDING INPUT
import org.openqa.selenium.Keys
// Shorthand for sendKeys() method of WebDriver.
$("div") << "abc"
$("input", name: "foo") << Keys.chord(Keys.CONTROL, "c")

16. MORE INTERACTION WITH FORMS
Consider the following HTML…
<form>
<input type="text" name="geb" value="Functional" />
</form>
The value can be read and written via property notation…
$("form").geb == "Functional"
$("form").geb = "Testing"
$("form").geb == "Testing"
These are literally shortcuts for…
$("form").find("input", name: "geb").value() == "Functional"
$("form").find("input", name: "geb").value("Testing")
$("form").find("input", name: "geb").value() == "Testing"

17. VARIABLES AVAILABLE
title
browser
currentUrl
currentWindow

18. MORE POSSIBILITIES
Uploading files
Interaction closures
Simulate drag-n-drop
Control-clicking
Interacting with javascript
js object

19. STRUCTURING GEB TESTS
Lets test a CRUD part of a grails application registrering
conference attendees
Lets test the following
1. Goto list of attendees page
2. Create new employee (incl. invalid data once)
3. Update the employee
4. Check data is updated

20. GEB SPEC BASICS
import geb.spock.GebSpec
@Stepwise // Ensures the tests are run sequentially
class AttendeeFunctionalSpec extends GebSpec {
// Spock specs here
}

21. GEB SPEC (1)
The naive inmaintainable way!
void "Go to list page ­ check initial state"() {
when:"The home page is visited"
go '/attendee/index'
then:
title == "Attendee List"
}

22. GEB SPEC (2)
The naive inmaintainable way!
void "Click new attendee button"() {
when:
$("a.create").click()
then:
title == "Create Attendee"
}

23. GEB SPEC (3)
The naive inmaintainable way!
void "Submit form with errors"() {
when:
$("button.btn­primary").click()
then:
title == "Create Attendee"
}

24. GEB SPEC (4)
The naive inmaintainable way!
void "Submit form with no errors"() {
when:
$('form').name = 'Bobby'
$('form').email = 'bobby@mail.dk'
and:
$("button.btn­primary").click()
then:
title == 'Show Attendee'
$('span.property­value').find{ it.text() == 'Bobby'}
$('span.property­value').find{ it.text() == 'bobby@mail.dk'}
}

25. GEB SPEC (5)
The naive inmaintainable way!
void "Click Edit Button"() {
when:
$("a.btn­primary").click()
then:
title == 'Edit Attendee'
}

26. GEB SPEC (6)
The naive inmaintainable way!
void "Update Attendee"() {
when:
$('form').name = 'Alison'
$('form').email = 'alison@gr8.dk'
and:
$("button.btn­primary").click()
then:
title == 'Show Attendee'
$('span.property­value').find{ it.text() == 'Alison'}
$('span.property­value').find{ it.text() == 'alison@gr8.dk'}
}

27. GEB SPEC - THE BETTER WAY
If we make a few scenarios, there will be
Much duplication
Many places to correct if we change the layout / DOM
We can correct this using pages and modules

28. PAGE OBJECTS
Describes a web page
Url
How to check if we are at the correct place
Content we wish to interact with

29. PAGE OBJECTS
import eu.gr8conf.grailsdemo.modules.NavigationBarModule
import geb.Page
class AttendeeShowPage extends Page {
static url = "/attendee/show"
static at = { title ==~ /Show Attendee/ }
static content = {
attProp{ $('span.property­label') }
name{ attProp.find{ it.text() == 'Name'}.next().text() }
email{ attPro.find{ it.text() == 'Email'}.next().text() }
editButton{ $("a.btn­primary") }
}
}

30. MODULES
Describes repeated content
Across pages
Within the same page

31. MODULES
import geb.Module
class NavigationBarModule extends Module {
static base = { $('nav.navbar') }
static content = {
home(required: false) { $('a.home') }
listAttendee(required: false) { $('a.list') }
newAttendee(required: false) { $('a.create') }
}
}

32. MODULES
static content = {
// Like this, the module does not need a base
// form{ module NavigationBarModule, $('nav.navbar') }
form { module NavigationBarModule }
}

33. MODULE FOR REPEATED CONTENT
IN A PAGE
import geb.Module
class AttendeeListItemModule extends Module {
static content = {
data { $("td", it) }
name { data(0).text() }
email { data(1).text() }
nationality { data(2).text() }
dateCreated { data(3).text() }
lastUpdated { data(4).text() }
}
}

34. MODULE FOR REPEATED CONTENT
IN A PAGE
AttendeeListPage.groovy
static content = {
menubar { module NavigationBarModule }
attendees { moduleList AttendeeListItemModule,
$("table tr").tail() }
}

35. MODULE FOR REPEATED CONTENT
IN A PAGE
when:
to AttendeeListPage
then:
attendees*.name.contains('Guillaume Laforge')

36. GEB SPEC - STRUCTURED (1)
Lets try to restructure the ugly spec from before
void "Go to list page ­ check initial state"() {
when:
to AttendeeIndexPage
then:
at AttendeeIndexPage
}

37. GEB SPEC - STRUCTURED (2)
void "Click new attendee button"() {
when:
menubar.newAttendee.click()
then:
at AttendeeCreatePage
}

38. GEB SPEC - STRUCTURED (3)
void "Submit form with errors"() {
when:
submitButton.click()
then:
at AttendeeCreatePage
}

39. GEB SPEC - STRUCTURED (4)
void "Submit form with no errors"() {
when:
form.name = 'Bob'
form.email = 'bob@somemail.com'
and:
submitButton.click()
then:
at AttendeeShowPage
name == 'Bob'
email == 'bob@somemail.com'
}

40. GEB SPEC - STRUCTURED (5)
void "Click Edit Button"() {
when:
editButton.click()
then:
at AttendeeEditPage
}

41. GEB SPEC - STRUCTURED (6)
void "Update Attendee"() {
when:
form.name = 'Alice'
form.email = 'alice@somemail.com'
and:
updateButton.click()
then:
at AttendeeShowPage
title == 'Show Attendee'
name == 'Alice'
email == 'alice@somemail.com'
}

42. GEB WITH GRAILS

43. GEB AND GRAILS 2.X
Must install plugin in BuildConfig.groovy
dependencies {
...
test("org.seleniumhq.selenium:selenium­support:2.45.0")
test("org.seleniumhq.selenium:selenium­firefox­driver:2.45.0")
test "org.gebish:geb­spock:0.10.0"
}
plugins {
...
test "org.grails.plugins:geb:0.10.0"
}

44. GEB TESTS IN GRAILS 2.X
Tests placed in test/functionalfolder
Running the tests
grails test­app functional:

45. GEB AND GRAILS 3
Geb is default in build.gradle
dependencies {
...
testCompile "org.grails.plugins:geb"
// Note: It is recommended to update to a more robust driver
// (Chrome, Firefox etc.)
testRuntime 'org.seleniumhq.selenium:selenium­htmlunit­driver:2.44.0
}

46. GEB TESTS IN GRAILS 3
Creating Geb Spec
grails create­functional­test MyGebScenario
Placing the test in src/integration-test/groovy
Running the tests
grails test­app ­integration

47. GENERATED CLASS
@Integration
@Rollback
class ManyAttendeesSpec extends GebSpec {
void "test something"() {
when:"The home page is visited"
go '/'
then:"The title is correct"
$('title').text() == "Welcome to Grails"
}
}

48. INTERACTING WITH APPLICATION
When some functionality is needed that is not exposed
through the browser, it can be necessary to interact with the
application under test.

49. GRAILS 2.5
Tests not running in same JVM
Done with remote-control plugin
Send a closure for execution in application
compile ":remote­control:2.0"

50. REMOTE CONTROL
setup: 'Create some item not available through GUI'
def id = remote {
Item item = new Item(name: "MyItem")
item.save()
item.id
}

51. GRAILS 3.0
Application is in same jvm
Interaction is possible directly
Tests run more like integration tests

52. INTERACTING WITH APPLICATION
void "Test Pagination is shown with 15 attendees"() {
setup:
Attendee.withNewTransaction {
15.times {
new Attendee(name: "N$it", email: "m$it@t.dk").save()
}
}
when:
to AttendeeIndexPage
then:
hasPagination()
}

53. INTERACTING WITH APPLICATION
static content = {
menubar { module NavigationBarModule }
pagination(required: false) { $('span.currentStep') }
}
boolean hasPagination() {
pagination.text()
}

54. CONFIGURATION AND BROWSER
SUPPORT

55. GEBCONFIG
Configuration for Geb is placed in GebConfig.groovy
In Grails 3, place it in ´src/integration-test/groovy`
 http://www.gebish.org/manual/current/configuration.htm

56. DRIVER
It is possible to configure the browser used.
build.gradle
compile 'org.seleniumhq.selenium:selenium­chrome­driver:2.45.0'
compile 'org.seleniumhq.selenium:selenium­firefox­driver:2.45.0'

57. FIREFOX
GebConfig.groovy
import org.openqa.selenium.firefox.FirefoxProfile
import org.openqa.selenium.firefox.FirefoxDriver
driver = {
FirefoxProfile profile = new FirefoxProfile()
profile.setPreference("browser.download.folderList", 2)
profile.setPreference("browser.download.dir", "/tmp")
profile.setPreference(
"browser.helperApps.neverAsk.saveToDisk", "text/csv")
def driverInstance = new FirefoxDriver(profile)
driverInstance.manage().window().maximize()
driverInstance
}

58. CHROME
Needs ChromeDriver downloaded
Pretty fast and stable

59. CHROME (1)
GebConfig.groovy
private String driverLocationDependingOnOperatingSystem() {
String os = System.getProperty("os.name").toLowerCase();
def loc = "http://chromedriver.storage.googleapis.com/2.15"
if( os.contains('mac')) {
return "${loc}/chromedriver_mac32.zip"
}
if( os.contains('win')) {
return "${loc}/chromedriver_win32.zip"
}
return "${loc}/chromedriver_linux64.zip"
}

60. CHROME (2)
GebConfig.groovy
private void downloadDriver(File file, String path) {
if (!file.exists()) {
def ant = new AntBuilder()
ant.get(src: path, dest: 'driver.zip')
ant.unzip(src: 'driver.zip', dest: file.parent)
ant.delete(file: 'driver.zip')
ant.chmod(file: file, perm: '700')
}
}

61. CHROME (3)
GebConfig.groovy
def chromeDriver = new File('build/drivers/chrome/chromedriver')
downloadDriver(chromeDriver,
driverLocationDependingOnOperatingSystem())
System.setProperty('webdriver.chrome.driver',
chromeDriver.absolutePath)
driver = {
def driverInstance = new ChromeDriver()
def browserWindow = driverInstance.manage().window()
// width, height
browserWindow.size = new Dimension(1000, 2500)
browserWindow.position = new Point(0, 0)
driverInstance
}

62. WAITING
GebConfig.groovy
waiting {
timeout = 10
retryInterval = 0.5
}
baseNavigatorWaiting = true
atCheckWaiting = true

63. USING WAITING
<div class="fade­me­in" style="display: none">
Hi ­ are yo waiting for me?
</div>
<script>
$('div.fade­me­in').delay(3000).slideDown();
</script>
static content = {
fadeInMessage{ $('div.fade­me­in') }
}
then:
waitFor {
fadeInMessage.text() == 'Hi ­ are yo waiting for me?'
}

64. REPORTING

65. TEST REPORTS
Nicely formatted
Spock power-assert format

66. SCREENSHOTS
Screenshots and HTML from end of each test:
Extend from GebReportingSpec
class AttendeeFunctionalSpec extends GebReportingSpec
GebConfig.groovy
reportsDir = new File("build/geb­reports")

67. AD-HOC SCREENSHOTS
report "When­form­is­just­filled"
Saves a report in reportsDir
Numbered in increasing order

68. JAVASCRIPT
In case you need to interact using javascript

69. EXECUTING JAVASCRIPT
Clicking a button that is hidden will create a
ElementNotVisibleException
<fieldset class="well" style="display: none">
<g:link class="btn" action="index">List</g:link>
</fieldset>

70. EXECUTING JAVASCRIPT
JavascriptExecutor executor = (JavascriptExecutor) driver
executor.executeScript('jQuery(".well").show();')

71. WRAPPING JAVASCRIPT
def js( String script ){
(driver as JavascriptExecutor).executeScript( script )
}
js('jQuery(".well").show();')

72. OTHER USAGES
Screenscraping of a site
Solving complex problems like 2048

73. RESOURCES
http://gebish.org
https://github.com/geb
https://gist.github.com/melix/9619800
https://fbflex.wordpress.com/2010/08/25/geb-and-grails-
tips-tricks-and-gotchas/
https://github.com/JacobAae/eu-gr8conf-grailsdemo

74. QUESTIONS?