MSSE SENG 5199

Course Materials for the MSSE Web Application Development Course

UI Testing

Marc Kapke

kapkema@gmail.com


UI Tests


Selenium


Selenium WebDriver


Example Selenium Test

WebDriver driver = new FirefoxDriver();
driver.get(myAppUrl);
driver.findElement(By.id('textInput')).sendKeys('U2');
driver.findElement(By.id('submitBtn')).click();
assert driver.findElement(By.id('bandNameHeading')).getText() == 'U2';

Geb


Geb DSL Example

import geb.Browser

Browser.drive {
  go "http://google.com/ncr"

  assert title == "Google"

  $("input", name: "q").value("wikipedia")

  waitFor { title.endsWith("Google Search") }

  def firstLink = $("li.g", 0).find("a.l")
  assert firstLink.text() == "Wikipedia"

  firstLink.click()

  waitFor { title == "Wikipedia" }
}

More Geb Details


Page Object Pattern


Benefits of Page Object Pattern


Browser


Browser drive()


Browser.drive {
    go "http://google.com"
    assert $("h1").text() == "Google"
}

Interacting with Content


CSS selector matching


CSS selector syntax


Index Matching


Attribute Matching


Text matching


Text/Attribute Pattern matchers


RegEx Pattern matchers


Content Matching example


Navigator


Element interaction


Element interaction


Select Control

<select id="artist">
    <option value="1">Jethro Tull</option>
    <option value="2">Abba</option>
</select>
$("artist") = 1

Checkbox

<form>
    <label>Search this site</label>
    <input type="radio" id="site-current" name="site" value="current">
    <label>Search Google</label><input type="radio" name="site" value="google">
</form>
$("#site-current") = "google"

Radio buttons

<form>
    <input type="checkbox" name="pet" value="dog" />
</form>
$("form").pet = true

Text input

<form>
    <input type="text" name="language"/>
    <input type="text" name="description"/>
</form>
$("form").language = "groovy"
$("form").description = "dynamic lang"

Page


Page Example

class SignupPage extends Page {
    static url = "signup"

    static at = {
        $("h1").text() == "Signup Page"
    }
}

Browser.drive {
    to SignupPage
}

Page Content DSL

class PageWithDiv extends Page {
    static content = {
        theDiv { $('div', id: 'a') }
    }
}

Page at verification

class PageWithAtChecker extends Page {
    static at = { $("h1").text() == "Example" }
}

Page Url


Configuring Geb


Simple GebConfig.groovy

// Location where Geb saves the screenshots and HTML dumps at the end of each test
reportsDir = 'build/test-reports'

//implicitly wrap at call with waitFor
atCheckWaiting = true

// Run tests in Firefox by default
driver = {  
  FirefoxDriverManager.getInstance().setup()

  new FirefoxDriver()
}

build.gradle

dependencies {
  testCompile "org.gebish:geb-spock:1.1.1"
	testCompile "org.seleniumhq.selenium:selenium-firefox-driver:3.3.1"
	testCompile "org.seleniumhq.selenium:selenium-chrome-driver:3.3.2"
	testCompile "org.seleniumhq.selenium:selenium-support:3.3.1"

  // Automatic Selenium driver manager
	testCompile("io.github.bonigarcia:webdrivermanager:1.5.0") {
		exclude group: 'org.seleniumhq.selenium'
	}
}

Functional Test Setup


Exmaple Get Article Detail Page


class ArticleDetailPage extends Page {

  static at = {
    title == 'articel detail'
  }

  static content = {
    id { $("#id") }
    name { $("#name") }
  }

}

Example Geb Functional Test

class ArticleDetailFunctionalSpec extends BaseGebSpec {
  // setup code...  
  def "view Article"() {
    when:
    ArticleDetailPage expected = to new ArticleDetailPage(categoryPathParam: "candy", timePathParam: "8", idPathParam: "123")

    then:
    expected.articleAbstract == "very abstract"
    expected.articleTitle == "foo"
    expected.articleByline == "candy"
    expected.articleImage.attr("src").endsWith("baz.png")
    expected.articleImage.attr("alt") == "wahoo!"
  }
}

Spring Boot / Angular Geb Tests


More on Geb