Geb Best Practices

Geb Best Practices
Marcin Erdmann

@marcinerdmann
•  Groovy enthusiast since 2010
•  Geb user since 2011
•  Geb lead since 2014
•  Open source contributor
•  Testing junkie

50 Geb contributors
•  Robert Fletcher
•  Peter Niederwieser
•  Alexander Zolotov
•  Christoph Neuroth
•  Antony Jones
•  Jan-Hendrik Peters
•  Tomás Lin
•  Jason Cahoon
•  Tomasz Kalkosiński
•  Rich Douglas Evans
•  Ian Durkan
•  Colin Harrington
•  Bob Herrmann
•  George T Walters II
•  Craig Atkinson
•  Andy Duncan
•  John Engelman
•  Michael Legart
•  Graeme Rocher
•  Craig Atkinson
•  Ken Geis
•  Chris Prior
•  Kelly Robinson
•  Todd Gerspacher
•  David M. Carr
•  Tom Dunstan
•  Brian Kotek
•  David W Millar
•  Ai-Lin Liou
•  Varun Menon
•  Anders D. Johnson
•  Hiroyuki Ohnaka
•  Erik Pragt
•  Vijay Bolleypally
•  Pierre Hilt
•  Yotaro Takahashi
•  Jochen Berger
•  Matan Katz
•  Victor Parmar
•  Berardino la Torre
•  Markus Schlichting
•  Andrey Hitrin
•  Leo Fedorov
•  Chris Byrneham
•  Aseem Bansal
•  Tomasz Przybysz
•  Brian Stewart
•  Jacob Aae Mikkelsen
•  Patrick Radtke
•  Leonard Brünings

Breaking changes in 1.0
•  Methods like isDisplayed() and
text() throw an exception when called
on multi element navigators
•  Weakly typed module() and
moduleList() removed
•  isDisabled() and isReadOnly()
removed from Navigator

Advanced usage
a.k.a. Tips & Tricks

Module is-a Navigator
•  Modules wrap around their base
Navigator
•  All Navigator methods can be called on
Module instances
•  Navigator methods can be used in
module implementations

<html>
<form method="post" action="login">
...
</from>
</html>
class LoginFormModule extends Module {
static base = { $("form") }
}

class LoginPage extends Page {
static content = {
form { module LoginFormModule }
}
}

to LoginPage
assert form.@method == "post”
assert form.displayed

Overriding value() on module
Class DatepickerModule extends Module {
LocalDate value() {
...
}

Navigator value(LocalDate date) {
...
}
}

class DatepickerPage extends Page {
static content = {
date { module DatepickerModule }
}
}

Overriding value() on module
to DatepickerPage
date.value(LocalDate.of(2017, 4, 1))
assert date.value() == LocalDate.of(2017, 4, 1)
to DatepickerPage
date = LocalDate.of(2017, 4, 1)
assert date == LocalDate.of(2017, 4, 1)

Advanced navigation and types
•  Page.convertToPath(Object[]) is
used to translate arguments passed to
Browser.to() into a path
•  Consider overloading convertToPath()
for more expressive navigation

Advanced navigation and types
class PostPage extends Page {
static url = “posts”

String convertToPath(Post post) {
“${post.id}/${post.title.toLowerCase().replaceAll(“ ”, “-”)}”
}
}

def post = new Post(id: 1, title: “My first post”)

to PostPage, post
assert title == post.title

Parameterised pages
•  Pages can be instantiated and passed to
via(), to() and at()
•  Useful when you need to differ
implementation based on the object
represented by the page

Parameterised pages navigation
class PostPage extends Page {
Post post

String getPageUrl() {
“posts/${post.id}/${post.title.toLowerCase().replaceAll(“ ”, “-”)}”
}
}

def post = new Post(id: 1, title: “My first post”)

to(new PostPage(post: post))
assert title == post.title

Navigators are iterable
•  Navigators are backed by a collection of
WebElements
•  Navigators implement
Iterable<Navigator>

Navigators are iterable
<html>
<p>First paragraph</p>
<p>Second paragraph</p>
</html>
$(“p”).text() // throws exception
$(“p”)[0].text() // returns “First paragraph”
$(“p”)*.text() // returns [“First paragraph”, “Second paragraph”]

//returns [0: “First paragraph”, 1: “Second paragraph”]
$(“p”).withIndex().collectEntries { [(it.second): it.first.text()] }

What’s onLoad() for?
class CookieBarPage extends Page {
boolean autoCloseCookieBar = true
static content = {
cookieBar { module(CookieBarModule) }
}
void onLoad(Page previousPage) {
if (autoCloseCookieBar && cookieBar) {
cookieBar.close()
}
}

}

Injecting javascript into page
js.exec '''
var url = 'https://code.jquery.com/jquery-3.2.1.min.js';

var scriptElement = document.createElement('script');
scriptElement.setAttribute('src', url);
document.head.appendChild(scriptElement);
'''

Navigator’s elements in js
void waitForCssTransition(Navigator navigator, WaitingSupport waiting, JavascriptInterface js,
Closure trigger) {
js.exec(navigator.singleElement(), '''
var o = jQuery(arguments[0]);
window.setTransitionFinishedClass = function() {
$(this).addClass('transitionFinished');
}
o.bind('transitionend', window.setTransitionFinishedClass);
''')
try {
trigger.call()
waiting.waitFor { hasClass('transitionFinished') }
} finally {
js.exec(navigator.singleElement, '''
var o = jQuery(arguments[0]);
o.unbind('transitionend', window.setTransitionFinishedClass);
o.removeClass('transitionFinished')
window.setTransitionFinishedClass = undefined;
''')
}
}

Alternatives to inheritance
•  Using inheritance for code sharing leads to
complex inheritance structures
•  @Delegate can be used for code sharing
via delegation
•  Traits can be used for code sharing

class TransitionSupport {
private final Navigator navigator
private final WaitingSupport waiting
private final JavascriptInterface js

TransitionSupport(Navigator navigator, WaitingSupport waiting, JavascriptInterface js) {
...
}
void waitForCssTransition(Closure trigger) {
...
}
}

class TransitioningModule extends Module {
@Delegate
TransitionSupport transitionSupport = new TransitionSupport(this, this, js)
}

trait TransitionSupport implements Navigator, WaitingSupport {
abstract JavascriptInterface getJs()

void waitForCssTransition(Closure trigger) {
...
}
}

class TransitioningModule extends Module implements TransitionSupport {
}

Dynamic base url
class RatpackApplicationGebSpec extends GebSpec {

def application = new GroovyRatpackMainApplicationUnderTest()
def setup() {
browser.baseUrl = application.address.toString()
}

}

Testing responsive apps
class TestsMobileViewExtension extends
AbstractAnnotationDrivenExtension<TestsMobileView> {
void visitFeatureAnnotation(TestsMobileView annotation, FeatureInfo feature) {
feature.addInterceptor { invocation ->
def window = new ConfigurationLoader().conf.driver.manage().window()
def originalSize = window.size
try {
window.size = new Dimension(320, 568)
invocation.proceed()
} finally {
window.size = originalSize
}
}
}
}

Best practices
a.k.a. Marcin’s musings

Strongly typed Geb code
•  Better authoring, i.e. autocompletion
•  Better navigation, i.e. going to method
definition, finding usages
•  Refactoring support

What IntelliJ understands?
•  Delegation to Browser methods in specs
•  Delegation to Page methods in specs
•  Content definitions

Tracking current page type
•  Capture current page in a variable
•  Use return values of via(), to() and
at()
•  Return new page instance from methods
triggering page transitions

Tracking current page
def homePage = to HomePage

homePage.loginPageLink.click()
def loginPage = at LoginPage

def securePage = loginPage.login("user", "password")

Tracking current page
to(HomePage).loginPageLink.click()

def securePage = at(LoginPage).login("user", "password")

At checks
•  Keep them quick and simple
•  Check if you are at the right page
•  Don’t test any page logic

What’s missing here?
class CookieBarPage extends Page {
boolean autoCloseCookieBar = true
static content = {
cookieBar { $('.cookie-message’) }
cookieBarText { $('.cookie-message-text').text() }
cookieBarCloseButton { $('.cookie-message-button > input') }
}

}

What are modules good for?
•  More than reuse
•  Modeling logical components
•  Hiding component structure from tests
•  Hiding complex interactions from tests

Invest time in fixture builders
•  Aim for easy, expressive and flexible data
setup
•  Keep data setup close to tests
•  Setup only the data necessary for the test
•  Groovy Remote Control can be very helpful
•  Fixtures are not not only about data

Geb’s test harness html fixture
def “can access element classes”() {
given:
html {
div(id: "a", 'class': "a1 a2 a3")
div(id: "b", 'class': "b1”)
}

expect:
$("#a").classes() == ["a1", "a2", "a3"]
$("#b").classes() == ["b1”]
}

Example data fixture DSL
bootstrapper.post {
id = “69f10bb6-118e-11e7-93ae-92361f002671”
title = “My first post”
tags = [“Groovy”, “Geb”]
author {
firstName = “Marcin”
lastName = “Erdmann”
}
}

Use real browser in CI
•  Available headless drivers are either
limited, not developed anymore or not
properly tested
•  Use a real browser with a virtual frame
buffer, i.e. Xvfb
•  Use a cloud browser provider

To waitFor() or not?
•  Ask yourself if action is asynchronous
•  Watch out for quick asynchronous events

waitFor() considered harmful
•  Best not used directly in tests
•  Hide asynchronous behaviour in action
methods on modules and pages

Increasing the
timeout is
(usually) not the
answer

Browser test are costly!
•  Slow, hard to maintain and flakey
•  Mind what you test at such high level
•  ...but they provide a lot of confidence

Cross browser
tests are costlier

Cloud browser providers
•  Gradle plugins for driving browsers with
Geb in BrowserStack and Suace Labs
•  Can test applications via a tunnel which are
not available on the Internet

Using attributes map selectors
•  Map selectors are now translated to CSS
attribute selectors
•  As quick as using css selectors but reads
better especially when using dynamic
values

Using attributes map selectors
$(‘button’, type: ‘select’)
$(‘button[type=“select”]’)

$(itemtype: ‘http://schema.org/Person’)
$(‘[itemtype=“http://schema.org/Person”]’)

Selecting by text is slow!
•  Selecting by text is a Geb extension not
something that CSS supports
•  Narrow down selected elements as much
as possible when selecting by text

Geb Best Practices

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Geb Best Practices

Similar to Geb Best Practices (20)

Recently uploaded

Recently uploaded (20)

Geb Best Practices