Taming your browser with Geb

Talk at ApacheCon 2020

Transcript

1. Taming your browser with Geb introduction
2. Sergio del Amo OCI Grails Team https://sergiodelamo.com
3. Geb Introduction
4. 䡦 A Groovy layer on top of WebDriver 䡦 WebDriver instance management 䡦 Built-in configuration mechanism 䡦 Page Object Pattern as first class citizen 䡦 jQuery-like Navigator API 䡦 Integrates with various test frameworks What is Geb?
5. Geb is a Browser automation solution You can use it for: 䡦 Acceptance Testing Web Applications 䡦 Automating Web Sites 䡦 Screen Scraping Totally Groovy Browser Automation
6. 䡦 Cross browser automation capabilities of WebDriver 䡦 Elegance of jQuery content selection 䡦 Expressiveness of the Groovy language 䡦 Robustness of Page Object modelling It brings together the…
7. 䡦 Free Open Source, Apache License, v2.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 About the Project
8. Marcin Erdmann Geb project Lead http://blog.proxerd.pl
9. The heart is the geb-core component which is all you really need (plus Web Driver). For testing, you probably also want one of these as well: 䡦 geb-spock 䡦 geb-junit3 䡦 geb-junit4 䡦 geb-testng 䡦 geb-easyb Project Components
10. 䡦 http://seleniumhq.org/projects/webdriver/ 䡦 Successor to the Selenium project 䡦 Also known as “Selenium 2”. 䡦 Sponsored and driven by Google. 䡦 Becoming a standard. 䡦 https://www.w3.org/TR/webdriver/ WebDriver
11. Java based, with many language bindings. Cross-browser automation
12. 䡦 Geb sits on top of WebDriver so you rarely deal with its API, though it’s accessible if you need it. 䡦 Geb never talks to the actual browser. 䡦 That’s what WebDriver does. WebDriver API
13. You need to pull in a specific driver implementation for each browser you want to work with. Driver dependency
14. http://jquery.com jQuery - write more do less jQuery provides an incredibly powerful ApI for navigating and selecting content. CSS based, a whole lot better than XPath. jQuery
15. Geb features a Navigator API that it is inspired by jQuery. API is not identical Geb’s inspiration
16. 䡦 Compiled, never interpreted 䡦 Dynamically, optionally typed 䡦 99% Java syntax compatible 䡦 Concise, clear and pragmattic 䡦 Great for DSLs 䡦 A comfortable Java alternative for most Groovy
17. 䡦 http://groovy-lang.org 䡦 You don’t need to be a Groovy ninja to use Geb. 䡦 Groovy knowledge can defenitely help when things go wrong though. Required Apache Groovy Knowledge
18. Geb uses Groovy’s dynamism to remove boilerplate. Geb & Groovy
19. 䡦 The key to not pulling your hair out when dealing with web tests. 䡦 In a phrase: Domain Modelling 䡦 By modelling and creating abstractions, we can isolate implementation detail. Page Objects
20. is more fragile than this… Page Objects
21. 䡦 It's 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”. It's about modelling all kinds of things in the domain of a user's actions online. 䡦 Just giving symbolic names to page content is a great start. 䡦 Just Good Programming
22. The to() and click() methods are changing the underlying page. You can refer to the current page’s content and methods just by name. Browser has-a Page
23. The Page Object Pattern allows us to apply the same principles of modularity, reuse and encapsulation that we use in other aspects of programming to avoid such issues in browser automation code Geb Pages
28. Geb Pages
29. Geb Modules
32. Modules can be used for repeating content
33. Modules Modules have a base, from which all content lookups are relative.
34. We now have a model for a row in our table. Can be used for any reused/repeating content. Note: talking about domain objects, not HTML tables and rows. Modules
35. Example - Pagination Module .PAGINATION .NAV-NEXT
36. Example - Pagination Module
37. Example - Pagination Module
38. Example - Pagination Module
39. Inheritance Pages (and modules) can be arranged in inheritance hierarchies.
40. Geb's testing adapters. Geb can be used with… 䡦 Spock 䡦 Junit ( 3 & 4) 䡦 TestNG 䡦 EasyB 䡦 Cucumber (Cuke4Duke) Testing
41. Geb can dump HTML and screenshots for each “test” to help in debugging. Reports
42. 䡦 jQuery inspired content selection/navigation 䡦 The $() method 䡦 Returns a Navigator Object 䡦 General Format Navigator API
43. 䡦 Returned from invocations of $() function 䡦 Wrapper around DOM elements 䡦 jQuery-like API 䡦 Used for finding, filtering and interacting with DOM elements Navigator
44. Examples
45. Full CSS3 if the target browser supports it. CSS Lookups are fast CSS Selector
46. Can match on attribute values: Attribute/Text matching
47. The “text” attribute is special Attribute/Text matching
48. Can use Regular Expressions: Attribute/Text matching
49. Geb supplies some handy predicates: There are more of these. Predicates
50. $() returns a Navigator that allows you to find relative content. Relative content
51. Most of these methods take selectors, indexes and attribute text/matchers too. Relative Content $("p").nextAll(".listing")
52. Content definitions can build upon each other. Content definitions are actually templates. Content DSL class GoogleResultsPage extends Page { static content = { results { $("li.g") } result { i -> results[i] } resultLink { i -> result(i).find("a.l", 0) } firstResultLink { resultLink(0) } } }
53. By default, Geb will error if the content you select doesn't exist. The “`required`” option disables this check. Content definitions are actually templates. Optional Content class OptionalPage extends Page { static content = { errorMsg(required: false) { $("p.errorMsg") } } }
54. Geb will wait for some time for this content to appear. Same semantics as the waitFor {} method that can be used anywhere. Content definitions are actually templates. Dynamic Content class DynamicPage extends Page { static content = { errorMsg(wait: true) { $("p.errorMsg") } } }
55. Getting around. The to() method Pages can define a url that defines the page location. Navigation class MicronautHomePage extends Page { static url = “http://micronaut.io/index.html” }
56. The to() method sends the browser there and sets that as the current page object. to MicronautHomePage The page url can be relative (will be resolved against a config driven base). There are advanced parameterisation options too. Navigation
57. When this content is clicked, the underlying page will be changed implicitly. Content based navigation class FrontPage { static content = { aboutUsLink(to: AboutUsPage) { $("div#nav ul li a", text: iStartsWith("About Us")) } } } to FrontPage aboutUsLink.click() page instanceof AboutUsPage
58. url = baseUrl + url + covertToPath Dynamic Url browser.baseUrl = 'http://localhost:8080' browser.to EditRoomPage, 1 class EditRoomPage extends Page { static at = { title == 'Edit Room' } static url = '/room/edit' String convertToPath(Object[] args) { args ? "/${args[0]}" : "" }
59. UI Interaction - Keyboard
60. UI Interaction - Sliders
61. 䡦 JavaScript interface 䡦 jQuery interface 䡦 Direct Downloading 䡦 Multi Window support 䡦 Frame support 䡦 Page Change Listening 䡦 Actions (e.g. Drag & Drop) 䡦 alert()/confirm() handling 䡦 Caching expensive content lookups 䡦 Scripting style (sans Page Objects) 䡦 Configuration & Environments WebDriver instance management More
62. Example Hidden Content and Mouse over events
65. Fails: Hidden Content
66. Call a JS Method
67. Move to Element
68. Include Library
69. geb-spock GebSpec Contains Specification subclasses which setup a Browser instance that all method calls and property accesses/references resolve against via Groovy’s methodMissing and propertyMissing mechanism. GebReportingSpec
70. 䡦 BrowserStack 䡦 Sauce Labs 䡦 Xvfb Headless browser alternatives
71. Sample App https://github.com/grails-samples/geb-example-grails
72. Website testing https://github.com/micronaut-projects/static-website-test
73. Q & A