Web UI Testing

$ whoami

Colin Harrington

@ColinHarrington

colin.harrington@objectpartners.com

Principal Consultant 

Object Partners Inc

 

Browser Ubiquity

WEB UI = Modern App Platform

JavaScript Engines

HTML5 / CSS3

Browsers

Mobile!

Native  vs  Web

Functional Testing

Testing Paradigms

... Testing Perspectives

Users *are* Test Subjects

Testing Discipline

γνῶθι σεαυτόν

Tools

Express Intent

Good

when:
        doUserLogIn()

expect:
        at HomePage

more verbose

 // The Firefox driver supports javascript 
WebDriver driver = new FirefoxDriver();

// Go to the Google Suggest home page
driver.get("http://www.google.com/webhp?complete=1&hl=en");

// Enter the query string "Cheese"
WebElement query = driver.findElement(By.name("q"));
query.sendKeys("Cheese");

// Sleep until the div we want is visible or 5 seconds is over
long end = System.currentTimeMillis() + 5000;
while (System.currentTimeMillis() < end) {
    WebElement resultsDiv = driver.findElement(By.className("gssb_e"));

    // If results have been returned, the results are displayed in a drop down.
    if (resultsDiv.isDisplayed()) {
      break;
    }
}

// And now list the suggestions
List<WebElement> allSuggestions = driver.findElements(By.xpath("//td[@class='gssb_a gbqfsf']"));

for (WebElement suggestion : allSuggestions) {
    System.out.println(suggestion.getText());
}

driver.quit();

Reasonable Assurance

GEB

What is it?

Geb

(pronounced "jeb")

• http://www.gebish.org
  
• https://github.com/geb/geb

Geb

=

Webdriver 

+

Groovy 

+

JQuery like Content Selector

+

Page Object model

Geb in Action

WebDriver

Code -> Driving -> Real Browser

{ Chrome, Firefox, Internet Exploder, 

Safari, PhantomJS, HtmlUnit, 

Android, iOS, Remote }

2048

2048 solver

Basic Features

Page Object Pattern

class GoogleHomePage extends Page {

    static url = "http://google.com/?complete=0"

    static at = { title == "Google" }

    static content = {
        searchField { $("input[name=q]") }
        searchButton(to: GoogleResultsPage) { $("input[value='Google Search']") }
    }
 
    void search(String searchTerm) {
        searchField.value searchTerm
        searchButton.click()
    }
} 

class GoogleResultsPage extends Page { ... }

Browser.drive {
    to GoogleHomePage
    search "Chuck Norris"

    at GoogleResultsPage
    resultLink(0).text().contains("Chuck")
} 

Content

class GoogleHomePage extends Page {
    static url = "http://google.com/?complete=0"
    static at = { title == "Google" }
   
    static content = {
        searchField { $("input[name=q]") }
        searchButton(to: GoogleResultsPage) {             $("input[value='Google Search']")         }
    }
 
    void search(String searchTerm) {
        searchField.value searchTerm
        searchButton.click()
    }
} 

Accessible via

page.searchField

Modules

Think Templates

Reusable modules that exist across multiple page hierarchies.

Header panel

class ExampleModule extends Module {
    static content = {
        button { $("input", type: "submit") }
    }
} 

class ExamplePage extends Page {
    static content = {
        theModule { module ExampleModule }
    }
}

Reporters

Remote WebDriver

• Install and run the Remote WebDriver client/server
  
• Opens a port
  
• listens for commands
  

http://www.objectpartners.com/2012/04/24/start-building-out-automated-groovy-mobile-web-application-testing-on-your-iphone-or-ipad-with-geb-and-spock/

combinatorics

Solutions

problems++

SauceLabs

"Run your web and mobile app

tests across hundreds of real

browsers and platforms instantly"

Secret Sauce

Write Testable UIs

Semantic Markup

Consistent asynchronous activities

Tests act as a user

Test your Javascript

Yes, Really

QUnit

Mocha

Mocha is a feature-rich JavaScript test framework running on node.js and the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.

Test Runners

Testem

Karma

Capture Client Errors

Feedback

Logging

Analytics

Questions?

Fin