Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Automation Abstraction Layers: Page Objects and Beyond

63,938 views

Published on

An overview of different approaches to Page Objects and Domain Objects for GUI Automation. Examples use WebDriver and Java.

Full source code is available to download, For more details see the associated blog post.

Published in: Software
  • Be the first to comment

Automation Abstraction Layers: Page Objects and Beyond

  1. 1. 1 Automation Abstractions: Page Objects and Beyond Alan Richardson @eviltester https://xp-dev.com/svn/AutomationAbstractions www.SeleniumSimplified.com www.EvilTester.com www.CompendiumDev.co.uk www.JavaForTesters.com
  2. 2. 2 What is Abstraction? ● Modelling ● Separation of concerns ● Logical vs Physical ● Functional vs Structural ● Interfaces vs Implementations ● Data / Entities / Persistence ● Functionality / Task Flow ● Goals / Strategies ● Layers – GUI, DB, HTTP ● Etc.
  3. 3. “I must create a system. or be enslav'd by another Mans; I will not reason & compare: my business is to create” William Blake, 1820 Jerusalem: The Emanation of the Giant Albion 3 http://www.blakearchive.org/exist/blake/archive/object.xq?objectid=jerusalem.e.illbk.10&java=no
  4. 4. https://xp-dev.com/svn/AutomationAbstractions 4 Example Test Without Abstraction @Before public void startDriver(){ @Test public void canCreateAToDoWithNoAbstraction(){ driver.get("http://todomvc.com/architecture-examples/backbone/"); int originalNumberOfTodos = driver.findElements( By.cssSelector("ul#todo-list li")).size(); WebElement createTodo = driver.findElement(By.id("new-todo")); createTodo.click(); createTodo.sendKeys("new task"); createTodo.sendKeys(Keys.ENTER); assertThat(driver.findElement( By.id("filters")).isDisplayed(), is(true)); int newToDos = driver.findElements( By.cssSelector("ul#todo-list li")).size(); assertThat(newToDos, greaterThan(originalNumberOfTodos)); } driver = new FirefoxDriver(); } @After public void stopDriver(){ driver.close(); driver.quit(); } NoAbstractionTest.java
  5. 5. But this does use some abstraction layers LLooccaattoorr A Abbssttrraaccttioionns WebElement Generic Element Abstraction 5 Example Test Without Abstraction @Before public void startDriver(){ WebDriver Generic Browser Abstraction @Test public void canCreateAToDoWithNoAbstraction(){ Firefox Browser Abstraction driver.get("http://todomvc.com/architecture-examples/backbone/"); int originalNumberOfTodos = driver.findElements( By.cssSelector("ul#todo-list li")).size(); WebElement createTodo = driver.findElement(By.id("new-todo")); createTodo.click(); createTodo.sendKeys("new task"); createTodo.sendKeys(Keys.ENTER); assertThat(driver.findElement( By.id("filters")).isDisplayed(), is(true)); int newToDos = driver.findElements( Manipulation Abstractions By.cssSelector("ul#todo-list li")).size(); assertThat(newToDos, greaterThan(originalNumberOfTodos)); } driver = new FirefoxDriver(); } @After public void stopDriver(){ driver.close(); driver.quit(); } NoAbstractionTest.java
  6. 6. 6 WebDriver provides abstractions ● Browser ● DOM ● Web Element Tool vendors gain value from generic abstractions. You gain value from 'domain' abstractions.
  7. 7. 7 Example Test With Abstraction @Before public void startDriver(){ @Test public void canCreateAToDoWithAbstraction(){ TodoMVCUser user = new TodoMVCUser(driver, new TodoMVCSite()); user.opensApplication().and().createNewToDo("new task"); ApplicationPageFunctional page = new ApplicationPageFunctional(driver, new TodoMVCSite()); assertThat(page.getCountOfTodoDoItems(), is(1)); assertThat(page.isFooterVisible(), is(true)); } driver = new FirefoxDriver(); } @After public void stopDriver(){ driver.close(); driver.quit(); } NoAbstractionTest.java
  8. 8. 8 Why Abstraction? ● Change implementations ● Single Responsibility – only changes when necessary ● Makes automation readable and maintainable ● We can unit test some of our test code ● etc. https://xp-dev.com/svn/AutomationAbstractions
  9. 9. 9 Some Abstraction Layer Categories 1) Data – Generic Data Abstractions e.g. email, postcode 2) Physical – Physical layout of your application e.g. pages, components – Navigation across pages 3) Domain – Your application Entities domain e.g. user, account 4) Logical – User actions, workflows
  10. 10. 10 Common Automation Abstractions ● Page Objects: pages, components, widgets ● Dom Element Abstractions: select, textbox, etc. ● Domain Objects: user, account, order ● Gherkin (Given/When/And/Then) ● Domain Specific Languages: code, keywords ● ... https://xp-dev.com/svn/AutomationAbstractions
  11. 11. 11 Abstraction != Implementation ● Abstraction != Tool / Framework / Implementation ● Gherkin != Cucumber ● Page Object != Page Factory / Slow Loadable ● DSL != Keyword Driven If we want to get good at abstraction then we need to model, split apart, make the relationships clear, and be aware of our options.
  12. 12. 12 Page Objects ● The most obvious automation abstraction ● What is it? – A page? A Component? ● Do web applications still have pages?
  13. 13. A Page Object that abstracts a Page 13 ● Often has methods for – Opening the page – Accessing elements – Doing stuff, and navigating as a side-effect – Logical high level functionality e.g. login – Low level physical functionality e.g. typeUsername, clickLoginButton Should a Page Object be responsible for all of this?
  14. 14. 14 Page Object Design Decisions ● What methods does it have? – Functional ● login(username, password), ● loginAs(user) – Structural ● enterName(username), enterPassword(password), clickLogin(), submitLoginForm(username, password) ● Does it expose elements or not? – public WebElement loginButton; – public WebElement getLoginButton(); – public clickLoginButton();
  15. 15. 15 Page Object Functionality Approaches ● Expose WebElements Directly – Leads to WebElement Abstractions – public TextField userNameField; ● Hide WebElements behind physical functional methods e.g. typeUserName("bob"); ● Logical helper methods e.g. loginAs(name,pass) ● Layers of Page Objects – Physical – Logical
  16. 16. 16 Navigation Design Decisions ● Does a Page Object return other pages? public IssueListPage submit(){ driver.findElement(By.id(“submit”)).click(); return new IssueListPage(driver); } ● Or Navigate implicitly after interactions ● Or have navigation objects
  17. 17. 17 Implicit or Explicit Wait? ● Implicit Wait driver.manage().timeouts(). implicitlyWait(15L, TimeUnit.SECONDS); assertThat(driver.findElement( By.id("filters")).isDisplayed() , is(true)); ● Explicit Wait driver.manage().timeouts(). implicitlyWait(0L, TimeUnit.SECONDS); WebDriverWait wait = new WebDriverWait(driver,15); wait.until(ExpectedConditions.elementToBeClickable (By.id("filters"))); Example: 'NoAbstractionTest.java'
  18. 18. 18 Implementing Page Objects ● POJO – Plain object, driver in constructor, methods use driver.<method> ● Page Factory – Annotated elements, lazy instantiation via reflection ● LoadableComponent – Common interface (load, isLoaded), isLoaded throws Error ● SlowLoadableComponent – Common interface, waits for on isLoaded ● Other approaches?
  19. 19. 19 Example Implementations https://xp-dev.com/svn/AutomationAbstractions
  20. 20. 20 POJO ● 'ApplicationPage.java' – Used in 'SequentialCreationOfTest.java' – Not much refactoring in the example ● Simple Class ● WebDriver passed to constructor ● Composition of any components ● e.g. – com.seleniumsimplified.todomvc.page.pojo – 'ApplicationPage.java' ● Not much refactoring in the example
  21. 21. Pojo Example 21
  22. 22. 22 Functional vs Structural ● Functional – loginAs(username, password) ● Structural – enterUsername – enterPassword – clickLoginButton – submitLoginForm(username, password)
  23. 23. 23 Functional Vs Structural Example ● One way of answering “what methods to put on a page object” – Is it functional / behavioural? – Is it structural / Physical? ● Functional 'uses' Structural implementation ● Why? – Sometimes it is just a naming difference – Handling exceptions in functional but not structural – Higher level methods in Functional – Different concepts e.g. deleteLastItem
  24. 24. 24 Page Factory ● Annotate fields with @FindBy ● Instantiate in constructor using PageFactory.initElements – Can create your own page factory initialiser ● Avoids boilerplate accessor methods ● Fast to create Page Objects ● Might become harder to expand and maintain
  25. 25. 25 Page Factory Example @FindBy(how = How.CSS, using="#todo-count strong") private WebElement countElementStrong; @FindBy(how = How.CSS, using="#todo-count") private WebElement countElement; @FindBy(how = How.CSS, using="#filters li a") List<WebElement> filters; @FindBy(how = How.ID, using="clear-completed") List<WebElement> clearCompletedAsList; @FindBy(how = How.ID, using="clear-completed") WebElement clearCompletedButton; public ApplicationPageStructuralFactory(WebDriver driver, TodoMVCSite todoMVCSite) { PageFactory.initElements(driver, this); this.driver = driver; ...
  26. 26. 26 SlowLoadableComponent ● Some pages and components need synchronisation to wait till they are ready – One approach – SlowLoadableComponent adds responsibility for waiting, to the page ● extend SlowLoadableComponent ● Standard interface for synchronisation on load – get() ● If isLoaded then return this Else load ● While not loaded{ wait for 200 millseconds} – Implement load and isLoaded
  27. 27. 27 Fluent Page Objects todoMVC = new ApplicationPageFunctionalFluent( driver, todoMVCSite); todoMVC.get(); todoMVC.enterNewToDo("First Completed Item"). and(). toggleCompletionOfLastItem(). then(). enterNewToDo("Still to do this"). and(). enterNewToDo("Still to do this too"). then(). filterOnCompleted();
  28. 28. 28 Fluent Page Objects ● Methods return the page object or other objects instead of void – void clickDeleteButton(); – PageObject clickDeleteButton(); ● Syntactic sugar methods: – and(), then(), also() ● Can work well at high levels of abstraction and when no navigation involved ● Train Wreck?
  29. 29. Navigation Options 29 ● Direct in Test: page.get(); page.waitFor(); ● Instantiate new pages based on test flow – Navigation as side-effect, may have to bypass 'get' – Loadable pages, non-loadable, support classes ● Page Object methods might return other Pages – e.g. a method on the login page might be ● MyAccountPage clickLogin(); ● We might use navigation objects – direct, Jump.to(MyAccountPage.class) – path based (current page → desired page) ● Navigate.to(MyAccountPage.class)
  30. 30. 30 Possible Domain Abstractions ● Logical Objects – ToDo – ToDoList ● Physical Objects – LocallyStoredToDo ● Actors – User ● Environment – Site – Implementation
  31. 31. 31 Page Objects & Domain Objects ● Instead of – todoMVC.enterNewToDo(“New Item”) ● We could have have – ToDoItem newItem = new ToDoItem(“New Item”); – todoMVC.enterNewToDo(newItem); ● See code in DomainBasedTest
  32. 32. 32 Domain Objects That Span Logical & Physical e.g. User ● user.createNewToDo(“new item”) ● user.createNewToDo(newItem) ● See use in NoAbstractionTest
  33. 33. 33 Sometimes it is possible to over think this stuff ● Don't let thinking about this slow you down ● Conduct experiments ● Refactor ● Rethink if – you are maintaining too much – your abstraction layer stops you doing stuff – you are 'working around' your abstraction layers
  34. 34. 34 Element Abstractions
  35. 35. 35 Element Abstraction Example public interface Checkbox { public boolean isChecked(); public Checkbox check(); public Checkbox uncheck(); public Checkbox toggle(); } ● Would you include 'toggle'? https://xp-dev.com/svn/AutomationAbstractions
  36. 36. 36 Element Abstractions ● Existing support classes: Select, ● Possible: TextBox, Checkbox, TextBox, File etc. ● Can enforce Semantics – Checkbox: isChecked, check(), uncheck(), toggle() – TextBox: clear(), enterText() – etc. ● Pass back from Page Objects into test?
  37. 37. Element Abstraction Pros and Cons 37 ● May have to create a custom page factory ● Can help 'restrict' code i.e. check or uncheck, rather than click, enforces 'semantics' ● If you create them... – allow return WebElement ● so that I can go beyond the abstraction layer if I need to. Not required if it is just a WebElement wrapper. https://xp-dev.com/svn/AutomationAbstractions
  38. 38. 38 Component Abstractions ● Shared Components/Widgets on the page ● e.g. – VisibleToDoEntry, VisibleToDoList – Filters, Footer, Header, etc. ● Could have 'functional' representation for repeated items e.g. login forms ● Could have 'structural' representation ● Likely use : page object composition
  39. 39. 39 Component Abstraction Example TodoEntry todo = page.getToDoEntryAt(lastItemPosition); todo.markCompleted(); Instead of page.markTodoCompleted(lastItemPosition);
  40. 40. 40 Gherkin as an abstraction layer Feature: We can create and edit To Do lists in ToDoMvc We want to amend todos in ToDoMVC because that is the set of exercises on the abstraction tutorial Scenario: Create a ToDo Item Given a user opens a blank ToDoMVC page When the user creates a todo "new task" Then they see 1 todo item on the page ● Implement steps using highest appropriate abstraction layer ● CucumberJVM as 'DSL implementor' ● 'Expressibility' vs 'Step Re-use' ● See todomvc.feature and ToDoMvcSteps
  41. 41. 41 My modeling biases ● Driver – Inject so instantiate any page or component as required/desired at any time ● Explicit Synchronisation – To make sure that the desired object is available and ready for use (as defined by synchronisation) ● Navigation – Implicit (via taking action e.g. click) – Explicit Navigation Object, not in page object ● Open/jump (via driver.get) ● To (state model from current, to desired)
  42. 42. 42 My modeling biases ● Page Objects – Physical ● abstract the 'real world' – Components ● For common features on the page – Logical ● abstract the functionality ● Sometimes these are entity methods not page objects – e.g. user.registers().and().logsin() ● I tend not to.... – abstract WebElements
  43. 43. 43 My modeling biases ● I tend not to.... – abstract WebElements – Use inheritence to create a model of the app ● e.g. MyAppPage extends GenericAppPage – Use 3rd party abstractions on top of WebDriver
  44. 44. 44 Are there rights and wrongs? ● Right / Wrong? ● Decisions? ● Project/Team/Organisation Standards? Identify your own biases - Experiment Recognise your decisions
  45. 45. 45 Decisions ● The 'limits' and overlap of Abstraction Layers ● Build it now, or 'refactor to' later ● How much change is anticipated? – To which layer? GUI, Business domain, Workflow? ● Who is working with the automation code? – Skill levels? Support needed? ● How/When with the automation execute?
  46. 46. 46 Other Useful Links ● Jeff “Cheezy” Morgan – page-object ruby gem, data_magic gem and stareast code – https://github.com/cheezy?tab=repositories ● Marcus Merrell – Self-Generating Test Artifacts for Selenium/WebDriver – https://www.youtube.com/watch?v=mSCFsUOgPpw ● Anand Ramdeo – One Step at a Time – https://www.youtube.com/watch?v=dFPgzH_XP1I https://xp-dev.com/svn/AutomationAbstractions
  47. 47. 47 Homework ● Using the code at https://xp-dev.com/svn/AutomationAbstractions/ – Compare the different implementations under 'main' ● com.seleniumsimplified.todomvc.page – Investigate how the Page Objects delegate to each other, and the Domain Objects use Page Objects – Examine the 'test' usage of the Page Objects and Domain Objects – Examine the different navigation approaches
  48. 48. 48 Blogs and Websites ● CompendiumDev.co.uk ● SeleniumSimplified.com ● EvilTester.com ● JavaForTesters.com ● Twitter: @eviltester Online Training Courses ● Technical Web Testing 101 Unow.be/at/techwebtest101 ● Intro to Selenium Unow.be/at/startwebdriver ● Selenium 2 WebDriver API Unow.be/at/webdriverapi Videos youtube.com/user/EviltesterVideos Books Selenium Simplified Unow.be/rc/selsimp Java For Testers leanpub.com/javaForTesters Alan Richardson uk.linkedin.com/in/eviltester Independent Test Consultant & Custom Training Contact Alan http://compendiumdev.co.uk/contact

×