Functionally Testing Web Apps with Geb

SPRINGONE2GXWASHINGTON, DC

Unless otherwise indicated, these sl ides are © 2013-2015 Pivotal Software, Inc. and l icensed under a Creat ive Commons Attr ibut ion-NonCommercial l icense: ht tp: / /creat ivecommons.org/ l icenses/by-nc/3.0/

Functionally Testing Web Apps with Geb

By Allison Figus@ErinWith2Ls

Unless otherwise indicated, these sl ides are © 2013-2015 Pivotal Software, Inc. and l icensed under a

Creat ive Commons Attr ibut ion-NonCommercial l icense: http://creativecommons.org/licenses/by-nc/3.0/

Presentation Scope• What is Geb?• Survey of the testing ecosystem

• Where does Geb fit in?• How does Geb do it better?• Selenium vs Geb

• Design Patterns— Page Object, Data Driven

• How to write Functional tests with Geb

2

http://creativecommons.org/licenses/by-nc/3.0/



Geb is…• A standalone framework for Automated

Functional Testing• A Page Object framework to be used with

another test runner (jUnit, Spock, etc) for Automated Functional Testing

• Spock• jUnit• Cucumber-JVM• TestNg

3




What is Spock?• Test framework based on jUnit• Unit, Integration, and Functional tests• Can be used with Geb

4




Important Groovy Points• Groovy derives from Java, but it is actually an (improper) superset of Java• (Most) Java can be compiled by the Groovy compiler• Groovy can be compiled by the Java compiler⇒ Java and Groovy can be used interchangeably

⇒ A Groovy test suite can be a fully integrated part of a Java project

• When used as a dynamic, duck-typing language, Groovy can be faster to develop in than Java

5




Geb translates to Selenium WebDriver code

6




The Testing Ecosystem1. Unit2. Integration3. External

7




The Testing Ecosystem

Internal• Unit• Integration

8




The Testing Ecosystem

Internal• Unit• Integration

External• Functional

9




Functionally Testing an App

10

ApplicationBack-end

AutomatedFunctional

Tests

Manual QA

ApplicationUser Interface




Functionally Testing a Web App

11

AutomatedFunctional

Tests

Manual QA

Server




Functionally Testing a Web App

12

AutomatedFunctional

Tests

Manual QA

Server

Geb(Groovy)

PHP?.Net?JVM?

Implementation Agnostic




History of Geb

13

WebDriver

2006

Selenium

2004 2010

Geb

2009

SeleniumWebDriver




History of Geb

14

WebDriver

2006

Selenium

2004 2010

Geb

2009

SeleniumWebDriver

SeleniumIDE




Application Under Test— CLUE• Select a Suspect, Room,

and Weapon• Click “Accuse!”• Reset Solution to play

again• View and Create new

Suspects/Rooms/Weapons

15




Smoke TestGo to the Suspects pageVerify presence of “Suspect List” header

16

<h1>Suspect List</h1>



Creat ive Commons Attr ibut ion-NonCommercial l icense: http://creativecommons.org/licenses/by-nc/3.0/ 17

Recording with Selenium IDE




Running Tests with Selenium IDE




Maintaining Tests with Selenium IDEUI Changes…

⇒

<h1>Suspect List</h1> <h3>Suspect List</h3>




Maintaining Test with Selenium IDE




Maintaining Tests with Selenium IDE• No encapsulation• Violation of open-closed principle• No debugger• Doesn’t scale

• Not Data Driven

21




Next Option: Selenium WebDriver• Encapsulation• Open-Closed• Debug with an IDE• Data Driven testing

22




public void testSuspectHeader() {

WebDriver driver = new FirefoxDriver() String baseUrl = "http://localhost:8080" driver.get(baseUrl + "/")

driver.findElement(By.linkText("Suspects")).click()

assert "Suspect List" == driver.findElement(By.cssSelector("h1")).getText()

driver.quit() }

23

Selenium WebDriver Example








driver.quit() }

24





The WebDriver Interface

25








driver.quit() }

26









driver.quit() }

27





driver.findElement(By.linkText(“Suspects")).click()


28

Selenium WebDriver

Selenium IDE




public void testAllHeaders() { WebDriver driver = new FirefoxDriver() String baseUrl = "http://localhost:8080"

['Suspect', 'Room', 'Weapon'].each { page -> driver.get(baseUrl + '/') driver.findElement(By.linkText("${page}s")).click()

assert "${page} List" == driver.findElement(By.cssSelector("h1")).getText() }

driver.quit() }

29

Data-Driven Selenium WebDriver




Functional Testing Architecture

How do we design scaleable, maintainable test suites?

The problem:

30

Page Objects are the solution

“if you write tests that manipulate the HTML elements directly your tests will be brittle to changes in the UI”

- Martin Fowler




Functional Tests Without Page Objects





With Page Objects




The Page Object Design Pattern• A layer of abstraction between the test and the HTML

• Provides an easy-to-use interface• Meaningful names for the HTML elements used in test

• Hides “structure” of the HTML page• Allows test to do anything & see anything a human can

33

If the UI changes, the tests themselves don’t need to change




Page Objects: Good OO Design• Encapsulation

• Interact with web page solely through the Page Object

• DRY• Use the same Page Object from many tests

34

“There is a single ‘repository’ for the services or operationsoffered by the page rather than having these services scattered

throughout the tests” — SeleniumHQ.org




Selenium WebDriver with Page Objects

35




LandingPage landingPage = new LandingPage(driver) SuspectsPage suspectsPage = landingPage.toSuspectsPage() assert "Suspect List" == suspectsPage.getHeaderText()

36

Selenium WebDriver with Page Objects



Selenium WebDriver without Page Objects





⇒ landingPage.toSuspectsPage()

37

Page Objects: Improved Code Clarity




class LandingPage { WebDriver driver WebElement suspectsPageLink

LandingPage(WebDriver driver) { this.driver = driver // Sanity Check to see that we're on the right page if ('Clue Demo' != driver.getTitle()) { throw new IllegalStateException(‘Not the Landing Page') } suspectsPageLink = driver.findElement(By.linkText("Suspects")) }

SuspectsPage toSuspectsPage() { suspectsPageLink.click() return new SuspectsPage(driver) } }

38

Page Object Example: LandingPage







39








40








41








42





Interacting with Page Object elements• Complexity of interaction

• Finish functions before verification step• Code Clarity/Readability

toSuspectPage

43







44








45





Geb Support for Page Objects• Selenium WebDriver Page Objects are just a design pattern• Geb Page Objects are a feature of the “language”

• Reduces boilerplate

46




void testSuspectHeaderWithGeb() { Browser browser = new Browser(driver: new FirefoxDriver())

browser.drive { LandingPage landingPage = to LandingPage SuspectsPage suspectsPage = landingPage.toSuspectsPage() assert "Suspect List" == suspectsPage.getHeaderText() }.quit() }

47

Geb Example




SuspectsPage suspectsPage = landingPage.toSuspectsPage() assert "Suspect List" == suspectsPage.getHeaderText()

48

Using Geb Page Object

SuspectsPage suspectsPage = landingPage.toSuspectsPage() assert "Suspect List" == suspectsPage.getHeaderText()

Using Selenium WebDriver Page Object






49

Geb Example




Browser = WebDriver + “current page”

50

• driver• page






51

Geb Example






52

Geb Example




browser.drive { go "signup" assert $("h1").text() == "Signup Page" }

53

Browser.drive

Browser browser = new Browser(driver: new FirefoxDriver()) browser.go "signup" assert browser.$("h1").text() == "Signup Page"




class LandingPage extends geb.Page {

static url = "http://localhost:8080/" static at = { title == 'Clue Demo'}

static content = { suspectsPageLink(to: SuspectsPage) {$("a", text: "Suspects")} }

SuspectsPage toSuspectsPage() { suspectsPageLink.click()

return browser.page } }

54

Geb Page Object Example: LandingPage









55





static content = { suspectsPageLink(to: SuspectsPage) { $("a", text: “Suspects") } }

56

Geb Page Object Elements

WebElement suspectsPageLink … suspectsPageLink = driver.findElement(By.linkText("Suspects"))

Selenium WebDriver Page Object Elements









57





return browser.page

58

Geb Page Object Return Values

return new SuspectsPage(driver)

Selenium WebDriver Page Object Return Values









59





static at = { title == 'Clue Demo'}

60

Geb Page Object at-checker

if ('Clue Demo' != driver.getTitle()) { throw new IllegalStateException(‘Not the Landing Page') }

Selenium WebDriver at-checker









61





to LandingPage

62

Geb Page Object URL navigation

driver.get(“http://localhost:8080“)

Selenium WebDriver URL navigation




Other Ways to Use Geb Page Objectsvoid testSuspectHeaderWithGebAlternative() { Browser browser = new Browser(driver: new FirefoxDriver()) browser.drive { to LandingPage suspectsPageLink.click() assert "Suspect List" == header.text() }.quit() }

Where are the references to the Page Objects?




suspectsPageLink.click()vs

landingPage.toSuspectsPage()

64




Why Geb?




Interacting with Content

• css selector• tag name, id, class

• index• If there are multiple matches

• tag attributes

66

static content = { suspectsPageLink(to: SuspectsPage) { $("a", text: “Suspects") } }

—gebish.org




Interacting with Content: Text Selectors

• startsWith• contains• endsWith• containsWord

• notStartsWith• notContains• notEndsWith• notContainsWord

67

—gebish.org




Interacting with Content: Finding and Filtering$("div").find(".b") $("div").$(".b")

68

—gebish.org

$("div").filter(".b") $(".b").not("p")




Verifying CSS Properties

Select the style

69

<input ... style="background-color: red"/>

assert $("input").css("background-color") == "red"




Questions/Comments/Discussion

70

Allison Figus @ErinWith2Ls




More Groovy & Spock!

71




The End, Thank You

72


Technology

Functionally Testing Web Apps with Geb