Web Automation using Groovy, WebDriver,     JQuery and Page Object Model                        By: Gaurav Bansal
Need…• We need a solution that is based on technology  that is native to WebBrowsers.• We need a solution that requires no...
Solution…  GEB
What is Geb?• Geb is a browser automation solution.• You can use it for…  – Acceptance Testing Web Applications  – Automat...
About the Project• Free Open Source, Apache License, Version  2.0.• Currently at version 0.7.0.  – Home Page — http://www....
Project Components• The heart is the geb-core component which is  all you really need (plus WebDriver).• For testing, you ...
WebDriver             http://seleniumhq.org/projects/webdriver/
WebDriver•   Successor to the Selenium project.•   Also known as “Selenium 2”.•   Sponsored and driven by Google.•   Becom...
Cross-browser                           AutomationJava based, with many language bindings.  import org.openqa.selenium.Web...
Mobile Browsers• Rapidly improving.  – iPad  – iPhone  – Android  – Blackberry• Can use real devices or emulators in most ...
WebDriver API• Geb sits on top of WebDriver so you very  rarely deal with its API, though its  accessible if you need it.•...
Driver dependency• You need to pull in a specific driver  implementation for each browser you want  to work with.  –   <de...
jQueryhttp://jquery.com/
JQuery• jQuery provides an incredibly powerful API  for navigating and selecting content.  – $("div#footer").prev().childr...
Gebs inspiration• Geb features a “Navigator API” that is  inspired by jQuery.  – // This is Geb code, not jQuery JavaScrip...
Groovyhttp://groovy-lang.org
Dynamic JVM Lang.• Groovy is…  – Compiled, never interpreted  – Dynamic, optionally typed  – 99% Java syntax compatible  –...
Geb & Groovy• Geb uses Groovys dynamism to  remove boilerplate. import geb.* Browser.drive {      to GoogleHomePage      a...
Page Objects The key to not pulling your hairout when dealing with web tests.
What are they?•   In a phrase: Domain Modelling.•   By modelling and creating abstractions, we can isolate implementation ...
Just good programming• Its the application of trusted principles;  encapsulation and reuse.• Not new at all, but new to th...
Browser has-a PageBrowser.drive {      to GoogleHomePage      at GoogleHomePage      search.forTerm "wikipedia"      at Go...
Gebs Page Objects• Geb builds the Page Object pattern  directly into the framework (though it is  optional).  import geb.*...
Gebs Page Objects• Features the “Content DSL” for naming  content in a dynamic and powerful way.  import geb.*  class Goog...
Modules• Modules are repeating and/or  reappearing content. import geb.* class GoogleSearchModule extends Module {     sta...
TestingGebs testing adapters
Geb for Testing• Geb can be used with…  –   Spock  –   JUnit (3 & 4)  –   TestNG  –   EasyB  –   Cucumber (Cuke4Duke)• The...
Navigator APIjQuery inspired content selection/           navigation
The $() method• Returns a Navigator object.• General format:  –$   («css selector», «index/range», «attribute/text    matc...
CSS Selectors• Full CSS3 if the target browser supports it.  $("div.some-class p:first[title=something]")  $("ul li a") $(...
Attribute/Text match• Can match on attribute values:  – //<div foo="bar">  – $("div", foo: "bar")• The “text” attribute is...
Predicates• Geb supplies some handy predicates:  $("p", text: startsWith("p"))   $("p", class: contains("section"))   $("p...
Relative Content• $() returns a Navigator that allows you to find  relative content.   $("p").previous()   $("p").prevAll(...
Content DSL
Content DSLclass GoogleResultsPage extends Page {         static content = {             results { $("li.g") }            ...
Optional Contentclass OptionalPage extends Page {    static content = {     errorMsg(required: false) { $("p.errorMsg") } ...
Dynamic Contentclass DynamicPage extends Page {     static content = {         errorMsg(wait: true) { $("p.errorMsg") }   ...
Expensive Contentclass ExpensivePage extends Page {     static content = {         results(cache: true) { $("li.results") ...
NavigationGetting around
The to() methodclass GoogleHomePage extends Page {     static url = "http://google.com/ncr" }• Pages can define a url that...
Content based navigationclass FrontPage {     static content = {     aboutUsLink(to: AboutUsPage) { $("div#nav ul li a", t...
At Checking• The “at checking” mechanism enables fail  fast and less debugging.class LoginPage extends Page {     static a...
Driver Management• Geb caches the WebDriver instance (per  thread) and shares it across test cases.• Manages clearing cook...
Config. Management• Looks for GebConfig class or GebConfig.groovy  file (or class) on classpath.  driver = {   new Firefox...
What we didnt see•   JavaScript interface•   jQuery interface•   Direct Downloading•   Multi Window support•   Frame suppo...
SummaryJUnit3   Spock   Grails   JUnit4   EasyB
Thanks         »       @gaurav_bansal         »       gbansal@xebia.com /           itsbansal@gmail.com         »       +9...
Upcoming SlideShare
Loading in...5
×

Comprehensive Browser Automation Solution using Groovy, WebDriver & Obect Model

4,089

Published on

Learn how to design, create, maintain, and re-factor an automation framework using the power of WebDriver, the elegance of jQuery content selection, the robustness of Page Object modeling, and the expressiveness of the Groovy language. Gaurav introduces an open-source testing solution that provides all this, and can be integrated with testing frameworks such as Spock, JUnit & TestNG.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,089
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
64
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Comprehensive Browser Automation Solution using Groovy, WebDriver & Obect Model

  1. 1. Web Automation using Groovy, WebDriver, JQuery and Page Object Model By: Gaurav Bansal
  2. 2. Need…• We need a solution that is based on technology that is native to WebBrowsers.• We need a solution that requires no boilerplate code.• We need a solution that offers a powerful set of tools for matching a set of elements in a document.• We need a solution that offers in-built mechanism to incorporate Page-object model
  3. 3. Solution… GEB
  4. 4. What is Geb?• Geb is a browser automation solution.• You can use it for… – Acceptance Testing Web Applications – Automating Web Sites – Screen Scraping• It brings together the… – Cross browser automation capabilities of WebDriver – Elegance of jQuery content selection – Expressiveness of the Groovy language – Robustness of Page Object modelling
  5. 5. About the Project• Free Open Source, Apache License, Version 2.0.• Currently at version 0.7.0. – Home Page — http://www.gebish.org – The Book of Geb — http://www.gebish.org /manual/current – Source Code — https://github.com/geb/geb – User Mailing List — http:// xircles.codehaus.org/projects/geb/lists – In Maven Central — http:// mvnrepository.com/artifact/org.codehaus.geb
  6. 6. Project Components• The heart is the geb-core component which is all you really need (plus WebDriver).• For testing, you probably also want one of these as well: – geb-spock – geb-junit3 – geb-junit4 – geb-testng – geb-easyb• (Has been used from Cucumber as well).• There is also a Grails plugin.
  7. 7. WebDriver http://seleniumhq.org/projects/webdriver/
  8. 8. WebDriver• Successor to the Selenium project.• Also known as “Selenium 2”.• Sponsored and driven by Google.• Becoming a W3C standard. – http://dvcs.w3.org/hg/webdriver/raw- file/515b648d58ff/webdriver-spec.html
  9. 9. Cross-browser AutomationJava based, with many language bindings. import org.openqa.selenium.WebDriver;  import org.openqa.selenium.WebElement;  import org.openqa.selenium.By;  import org.openqa.selenium.firefox.FirefoxDriver;  WebDriver driver = new FirefoxDriver();  driver.get("http://google.com");  WebElement heading = driver.findElement(By.tagName("h1")); 
  10. 10. Mobile Browsers• Rapidly improving. – iPad – iPhone – Android – Blackberry• Can use real devices or emulators in most cases.• A headless webkit based driver (PhantomJS) is in progress.
  11. 11. WebDriver API• Geb sits on top of WebDriver so you very rarely deal with its API, though its accessible if you need it.• Geb never talks to the actual browser because thats what WebDriver does.
  12. 12. Driver dependency• You need to pull in a specific driver implementation for each browser you want to work with. – <dependency> – <groupId>org.seleniumhq.selenium</groupId> – <artifactId>selenium-firefox-driver</artifactId> – <version>2.24.1</version> – </dependency>
  13. 13. jQueryhttp://jquery.com/
  14. 14. JQuery• jQuery provides an incredibly powerful API for navigating and selecting content. – $("div#footer").prev().children(); – CSS based, a whole lot better than XPath.
  15. 15. Gebs inspiration• Geb features a “Navigator API” that is inspired by jQuery. – // This is Geb code, not jQuery JavaScript… $ ("h1").previous().children();• API is not identical.
  16. 16. Groovyhttp://groovy-lang.org
  17. 17. Dynamic JVM Lang.• Groovy is… – Compiled, never interpreted – Dynamic, optionally typed – 99% Java syntax compatible – Concise, clear and pragmatic – Great for DSLs – A comfortable Java alternative for most
  18. 18. Geb & Groovy• Geb uses Groovys dynamism to remove boilerplate. import geb.* Browser.drive { to GoogleHomePage at GoogleHomePage search.forTerm "wikipedia“ at GoogleResultsPage  assert firstResultLink.text() == "Wikipedia"  firstResultLink.click() waitFor { at WikipediaPage } } 
  19. 19. Page Objects The key to not pulling your hairout when dealing with web tests.
  20. 20. What are they?• In a phrase: Domain Modelling.• By modelling and creating abstractions, we can isolate implementation detail. $("input[name=username]").value("user") $("input[name=pwd]").value("password") $("input[type=submit]").click() • Is far more fragile than this… void login(String username, String password) {  $("input[name=username]").value(username) $("input[name=pwd]").value(password) $("input[type=submit]").click() } login("user", "password") 
  21. 21. Just good programming• Its the application of trusted principles; encapsulation and reuse.• Not new at all, but new to the world of web testing/automation.• Not just about modelling “pages”. Its about modelling all kinds of things in the domain of a users actions online.• Just giving symbolic names to page content is a great start.
  22. 22. Browser has-a PageBrowser.drive {  to GoogleHomePage  at GoogleHomePage  search.forTerm "wikipedia"  at GoogleResultsPage  assert firstResultLink.text() == "Wikipedia"  firstResultLink.click() waitFor { at WikipediaPage } } • The to() and click() methods are changing the underlying page.• You can refer to the current pages content and methods just by name.
  23. 23. Gebs Page Objects• Geb builds the Page Object pattern directly into the framework (though it is optional). import geb.* class GoogleHomePage extends Page {  static url = "http://google.com/ncr"   static at = { title == "Google" }  static content = {  search { module GoogleSearchModule } }  } 
  24. 24. Gebs Page Objects• Features the “Content DSL” for naming content in a dynamic and powerful way. import geb.* class GoogleResultsPage extends Page {  static at = { waitFor { title.endsWith("Google Search") } }    static content = {          search { module GoogleSearchModule }           results { $("li.g") }          result { i -> results[i] }             resultLink { i -> result(i).find("a.l", 0) }          firstResultLink { resultLink(0) }     } } 
  25. 25. Modules• Modules are repeating and/or reappearing content. import geb.* class GoogleSearchModule extends Module {     static content = {         field { $("input", name: "q") }         button(to: GoogleResultsPage) { btnG() }     }    class StandardPage extends Page {      static content = {   gmod { module  GoogleSearchModule  }     }  } 
  26. 26. TestingGebs testing adapters
  27. 27. Geb for Testing• Geb can be used with… – Spock – JUnit (3 & 4) – TestNG – EasyB – Cucumber (Cuke4Duke)• The majority of Geb users use Spock.• Geb can dump HTML and screenshots for each “test” to help in debugging.
  28. 28. Navigator APIjQuery inspired content selection/ navigation
  29. 29. The $() method• Returns a Navigator object.• General format: –$ («css selector», «index/range», «attribute/text matchers»)• Examples: – $("div") // all divs  – $("div", 0) // first div $("div", 0..2) // first three divs  – // The third section heading with text “Geb” $("h2", 2, id: "section", text: "Geb") 
  30. 30. CSS Selectors• Full CSS3 if the target browser supports it. $("div.some-class p:first[title=something]") $("ul li a") $("table tr:nth-child(2n+1) td") $("div#content p:first-child::first-line") • CSS lookups are fast.
  31. 31. Attribute/Text match• Can match on attribute values: – //<div foo="bar"> – $("div", foo: "bar")• The “text” attribute is special: – //<div>foo</div>  – $("div", text: "foo")• Can use Regular Expressions: – //<div>foo</div>  – $("div", text: ~/f.+/) 
  32. 32. Predicates• Geb supplies some handy predicates: $("p", text: startsWith("p"))  $("p", class: contains("section"))  $("p", id: endsWith(~/d/))
  33. 33. Relative Content• $() returns a Navigator that allows you to find relative content. $("p").previous() $("p").prevAll() $("p").next() $("p").nextAll() $("p").parent() $("p").siblings() $("div").children() • Most of these methods take selectors, indexes and attribute text/matchers too. $("p").nextAll(".listing") 
  34. 34. Content DSL
  35. 35. Content DSLclass GoogleResultsPage extends Page {      static content = {         results { $("li.g") }         result { i -> results[i] }            resultLink { i -> result(i).find("a.l", 0) }          firstResultLink { resultLink(0) }      }} • Content definitions can build upon each other.• Content definitions are actually templates.
  36. 36. Optional Contentclass OptionalPage extends Page {    static content = {     errorMsg(required: false) { $("p.errorMsg") }   } }• By default, Geb will error if the content you select doesnt exist.• The “required” option disables this check.
  37. 37. Dynamic Contentclass DynamicPage extends Page {     static content = {         errorMsg(wait: true) { $("p.errorMsg") }     }}• Geb will wait for some time for this content to appear.• By default, it will look for it every 100ms for 5s before giving up. This is highly configurable.• Same semantics as the waitFor {} method that can be used anywhere.
  38. 38. Expensive Contentclass ExpensivePage extends Page {     static content = {         results(cache: true) { $("li.results") }        result { results[it] }     } } • By default, all content is transient.• The cache option instructs Geb to hold on to the content, avoiding redundant lookups.• Use carefully, can cause problems with dynamic pages.
  39. 39. NavigationGetting around
  40. 40. The to() methodclass GoogleHomePage extends Page {     static url = "http://google.com/ncr" }• Pages can define a url that defines the page location.• The to() method sends the browser there and sets that as the current page object.• to GoogleHomePage The page url can be relative (will be resolved against a config driven base).
  41. 41. Content based navigationclass FrontPage {     static content = {     aboutUsLink(to: AboutUsPage) { $("div#nav ul li a", text: iStartsWith("About Us")) }     }}• When this content is clicked, the underlying page will be changed implicitly. to FrontPage aboutUsLink.click()  page instanceof AboutUsPage 
  42. 42. At Checking• The “at checking” mechanism enables fail fast and less debugging.class LoginPage extends Page {     static at = { $("h1").text() == "Please log in" } }browser.at LoginPage • Will throw an exception if every statement of the at check is not true.
  43. 43. Driver Management• Geb caches the WebDriver instance (per thread) and shares it across test cases.• Manages clearing cookies and is configurable.• This can be disabled and tuned.
  44. 44. Config. Management• Looks for GebConfig class or GebConfig.groovy file (or class) on classpath. driver = {  new FirefoxDriver()  } waiting { timeout = 2  slow { timeout = 100 } }  reportsDir = "geb-reports“ environments { chrome { driver = "chrome" } } 
  45. 45. What we didnt see• JavaScript interface• jQuery interface• Direct Downloading• Multi Window support• Frame support• Page Change Listening• Actions (e.g. Drag & Drop)• alert()/confirm() handling
  46. 46. SummaryJUnit3 Spock Grails JUnit4 EasyB
  47. 47. Thanks » @gaurav_bansal » gbansal@xebia.com / itsbansal@gmail.com » +91-9899849992
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×