hands on exploration of page objects and abstraction layers with selenium webdriver workshop slides
DESCRIPTION
Different views and approaches to creating abstraction layers and page objects.TRANSCRIPT
Hands on exploration of Page Objects and Abstraction Layers with
Selenium WebDriverA Half Day Tutorial
Alan Richardson@eviltester
www.SeleniumSimplified.comwww.EvilTester.com
www.CompendiumDev.co.ukwww.JavaForTesters.com
2
Blogs and Websites● CompendiumDev.co.uk● SeleniumSimplified.com● EvilTester.com● JavaForTesters.com● Twitter: @eviltester
Online Training Courses
● Technical Web Testing 101Unow.be/at/techwebtest101
● Intro to SeleniumUnow.be/at/startwebdriver
● Selenium 2 WebDriver APIUnow.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
3
After gaining some experience of web automation tools, you start to realise that “yes, you have to learn the API”, but the real challenge is modeling the application and building an abstraction layer which supports different approaches to automation. And when we build an abstraction layer, we have lots of options to choose between.
● Do you use the Page Factory?
● What counts as a page object?
● Should a page object offer logical functions like “loginAs” or does it only model the physical world?
● How do we deal with navigation? Return page objects, or with a different set of objects?
● Do we need abstractions for Dom elements like input fields or is WebElement enough?
● When do we synchronise with WebDriverWait and when do we use SlowLoadableComponent?
● Should we build our own abstractions on top of SlowLoadableComponent?
By using a simple web application, we will use these, and other questions, to discuss and experiment with, the most challenging parts of Web Automation – the modeling and construction of robust and re-usable abstraction layers.
Existing practitioners, be prepared to discuss the choices you have made in the past, what worked, and what didn’t, so that we can learn and possibly build on some of those decisions.
This is open to novices and experienced practitioners, but if you want to take part then make sure you have a functioning Selenium WebDriver installation. All examples will be presented using Java, but that doesn’t stop you writing experiments in Python, .Net, or whatever other language you favour.
Bring your laptop, and you’ll have the opportunity to explore different ways of building Page Objects and abstraction layers.
4
Logistics & Plan● 11:00 – 12:30 == 1.5
– Intro
– General Abstractions Overview
– Example Implementations & Discussions
– Exercise (till lunch) ● Given some scenarios, create some tests and abstraction
layers to support your tests
● 13:30 – 15:00 == 1.5– Continue exercises and debrief
– Examples and Comparison with group
– Exercise (till end)● Adjust your code, refactor to other approaches
5
Code Examples & Slides
● https://xp-dev.com/svn/AutomationAbstractions● http://unow.be/at/letstest2014sweden
● http://unow.be/at/letstest2014sweden
6
Experiences Check
● Used WebDriver?● What Languages?● Abstraction Layers?● Frameworks?● Current setup
– Laptop With You?
– Ready to code?
7
General Abstraction Concepts
8
“I must create a system. or be enslav'd by another Mans; I will not reason & compare: my business is to create”
William Blake,
Jerusalem: The Emanation of the Giant Albion
http://www.blakearchive.org/exist/blake/archive/object.xq?objectid=jerusalem.e.illbk.10&java=no
9
What is Abstraction?
● Discuss
10
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.
11
Example Test Without Abstraction
@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)); }
@Before public void startDriver(){ driver = new FirefoxDriver(); }
@After public void stopDriver(){ driver.close(); driver.quit(); }
NoAbstractionTest.java
12
Example Test With Abstraction
@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)); }
@Before public void startDriver(){ driver = new FirefoxDriver(); }
@After public void stopDriver(){ driver.close(); driver.quit(); }
NoAbstractionTest.java
13
Why Abstraction?
● Change implementations● Single Responsibility – only changes when
necessary● Makes automation readable and maintainable
14
“...The name of the song is called ‘Haddocks' Eyes.’”
“Oh, that's the name of the song, is it?" Alice said, trying to feel interested.
“No, you don't understand,” the Knight said, looking a little vexed. “That's what the name is called. The name really is ‘The Aged Aged Man.’”
“Then I ought to have said ‘That's what the song is called’?” Alice corrected herself.
“No, you oughtn't: that's quite another thing! The song is called ‘Ways And Means’: but that's only what it's called, you know!”
“Well, what is the song, then?” said Alice, who was by this time completely bewildered.
“I was coming to that,” the Knight said. “The song really is ‘A-sitting On A Gate’: and the tune's my own invention.””
Lewis Carroll, Through The Looking Glass
15
Common Abstraction Approaches
16
Abstraction Layers Categorised
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
17
Common Automation Abstractions
● Page Objects● Element Abstractions: select, textbox, etc.● Domain Objects● Gherkin (Given/When/And/Then)● Domain Specific Languages● Any More?
– Create a List to discuss
– Any public examples?
– Any examples in the room that can be shared?
18
Abstractions
19
Abstraction != Implementation
● Abstraction != Tool / Framework / Implementation
● Gherkin != Cucumber● Page Object != Page Factory● DSL != Keyword Driven
If we want to get good at abstraction then we need to model, split apart, and make the relationships clear
20
WebDriver as an Abstraction Layer
● Dom Abstraction– WebElement
● Browser Abstraction– WebDriver
● FireFox, Chrome, Remote etc.
● HTML Abstractions– Cookies, Frames, etc.
● 'Support' classes augment WebDriver– e.g. com.seleniumsimplified.selenium.support
21
Model the application under test
22
Given an App – todomvc.com
23
TodoMVC.comFunctional Overview
Demo● Single Page App● Shows Counts● Data held in HTML5 local storage● Create/Edit/Complete a 'todo'● Clear Completed● Filter active/completed/all● Delete a todo
24
Exercise Given an App – todomvc.com
● What Abstractions might we build?● What thoughts do we have?● What underpins our analysis?
...Then Debrief
25
Example Implementations Overview
26
Page Objects
● The most obvious automation abstraction
● What is it?– A page? A Component?
● Experiences?● Do web applications still
have pages?
27
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();
28
Navigation Design Decisions
● Does a Page Object return other pages? public IssueListPage submit(){
driver.findElement(By.id(“submit”)).click();
return new IssueListPage(driver);
}
● Pros?● Cons?● Experiences
29
Page Objects
● What rules / guidelines / biases do you use for page objects?
30
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?
31
Implicit or Explicit Wait?● Implicit Wait
● Explicit Waitdriver.manage().timeouts().implicitlyWait(0L, TimeUnit.SECONDS);
WebDriverWait wait = new WebDriverWait(driver,15);
wait.until(ExpectedConditions.elementToBeClickable(By.id("filters")));
driver.manage().timeouts().implicitlyWait(15L, TimeUnit.SECONDS);
assertThat(driver.findElement( By.id("filters")).isDisplayed()
, is(true));
Example: 'NoAbstractionTest.java'
32
Exercise Automate Scenarios
● Create a ToDo (check: count, text)● Can Delete a ToDo (check: footers, count)● Can Mark a ToDo as completed● Can create a bunch of ToDos and delete, mark
as complete etc.
● Add additional checks as required● Create Abstraction layers as appropriate● We will discuss your compare your examples
with the group and the examples
33
Example Implementations
34
POJO
● 'ApplicationPage.java'– Used in 'SequentialCreationOfTest.java'
– Not much refactoring in the example
● Simple Class● WebDriver passed to constructor● Composition of any components
35
POJO Discussion
● Pros● Cons
36
Functional vs Structural● Compare 'ApplicationPage' with 'ApplicationPageFunctional'
● Functional– loginAs(username, password)
● Structural– enterUsername
– enterPassword
– clickLoginButton
– submitLoginForm(username, password)
● Navigation– Should Page Objects return Page Objects?
37
Functional Vs Structural Example
● One way of answering “what methods to put on a page object”– Is it functional / behavioural?
– Is it structural?
● Functional 'uses' Structural implementation● See
– com.seleniumsimplified.page.functionalvsstructural
38
Page Factory
● Compare ApplicationPageStructural with ApplicationPageStructuralFactory
● Annotate fields with @FindBy● Instantiate in constructor using
PageFactory.initElements– Can create your own page factory initialiser
39
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;
...
40
Page Factory Discussion
● Pros● Cons
41
Loadable Component
● Extends LoadableComponent– Get
● If isLoaded, return this● Else load()● Check isLoaded()
● Implement load– Add any synchronisation in load to wait for the
loading. Exit only when 'loaded'.
● Implement isLoaded– Check, and throw Error if not loaded
42
Loadable Component Example
● Compare ApplicationPageStructural with ApplicationPageStructuralLoadable
43
Loadable Component Discussion
● Pros● Cons
44
SlowLoadable Component Example
● Extends SlowLoadableComponent● Constructor has to additionally call
– super(new SystemClock(), 10);
– Where 10 is a timeout # of seconds
● get()– If isLoaded then return this Else load
– While not loaded{ wait for 200 millseconds}
● Implement load and isLoaded– But can remove sync loops from load
45
SlowLoadable Component Example
● Compare ApplicationPageStructural with ApplicationPageStructuralSlowLoadable
46
SlowLoadable Component Discussion
● Pros● Cons
47
Fluent Page Objects● Methods return the page object or other objects
– e.g. get() on LoadableComponent
● Instead of – void clickDeleteButton();
– PageObject clickDeleteButton();
● Syntactic sugar methods:– and(), then(), also()
● Work well at high levels of abstraction– See SequentialCreationOfTestFluentSubset and
ApplicationPageFunctionalFluent
– Compare ApplicationPageFunctional with ...Fluent
48
Navigation Options● Direct in Test● 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();– Returns a new page
● void clickLogin();
● We might use navigation objects– direct, or Path based (current page → desired
page)● Navigate.to(MyAccountPage.class)● Jump.to(MyAccountPage.class)
49
Possible Domain Abstractions● Logical Objects
– ToDo
– ToDoList
● Physical Objects– LocallyStoredToDo
● Actors– User
● Environment– Site
– Implementation
50
Page Objects & Domain Objects
● Instead of – todoMVC.enterNewToDo(“New Item”)
● We could have have– ToDoItem newItem = new ToDoItem(“New Item”);
– todoMVC.enterNewToDo(newItem);
● Discuss
● See code in DomainBasedTest
51
Domain Objects That Span Logical & Physical
e.g. User● user.createNewToDo(“new item”)● user.createNewToDo(newItem)
● Discuss
● See use in NoAbstractionTest
52
Element Abstractions
53
Element Abstractions● Existing support: 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?● e.g. Checkbox in ElementWrapperTest
– new CheckBox(driver, By);
– new CheckBox(element)
54
Element Abstraction Examples
● Would you include 'toggle'?
public interface Checkbox {
public boolean isChecked(); public Checkbox check(); public Checkbox uncheck(); public Checkbox toggle();}
55
Element Abstraction Pros and Cons
● May have to create a custom page factory● Can help 'restrict' code i.e. check or uncheck,
rather than click, enforces 'semantics'● I make sure to return WebElement so that I can
go beyond the abstraction layer if I need to. Not required if it is just a WebElement wrapper.
56
Component Abstractions
● Components on the screen– e.g. ComponentTest
● e.g. VisibleToDoEntry, Filters, Footer, Header, VisibleToDoList, etc.
● Could have 'functional' representation for repeated items e.g. login forms
● Could have 'structural' representation● Likely use : page object composition
57
Component Abstraction Example
● See 'ComponentTest.java'– ApplicationPageStructuralComponents (compare
with ApplicationPageStructural
– VisibleToDoEntry ● (this also uses Element Abstraction)
page.getToDoEntryAt(todoMVC.getCountOfTodoDoItems()-1). markCompleted();
58
Gherkin as an abstraction layer
● Implement steps using highest appropriate abstraction layer
● CucumberJVM as 'DSL implementor'● 'Expressibility' vs 'Step Re-use'● See todomvc.feature and ToDoMvcSteps
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
59
Additional Debrief
● Did anyone do anything different?● Any other abstraction approaches you used?● Anything else to add?
60
Final Exercise Section
● Continue to automate the site● Build abstraction layers to cover the
functionality● Experiment with additional approaches
mentioned that you haven't used● Or, use code and amend and experiment
61
Final Debrief
62
My bias model has Driver as core● Driver
– Build around that so instantiate any page or component as required at any time
● Synchronisation– To make sure that the desired object is available
and ready for use (as defined by synchronisation)
● Navigation– Implicit (via actions)
– Explicit ● Open/jump (via driver.get)● To (state model from current, to desired)
63
Biases
● Examine some common biases and discuss pros/cons based on experience
64
Are there rights and wrongs?
● Right / Wrong?● Decisions?● Project/Team/Organisation Standards?
65
Should we add asserts into abstraction layers?
● e.g.
66
Should Page Objects consume and return domain objects?
● e.g. – loginAs(user)
– List<User> getUsersList()
67
Should Page Objects return WebElements?
68
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?
69
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?
70
“To the creative mind there is no right or wrong. Every action is an experiment, and every experiment yields its fruit in knowledge.”
The Illuminatus Trilogy
Robert Anton Wilson
71
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
72
Blogs and Websites● CompendiumDev.co.uk● SeleniumSimplified.com● EvilTester.com● JavaForTesters.com● Twitter: @eviltester
Online Training Courses
● Technical Web Testing 101Unow.be/at/techwebtest101
● Intro to SeleniumUnow.be/at/startwebdriver
● Selenium 2 WebDriver APIUnow.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
73
Notes: Install app locally
● https://github.com/tastejs/todomvc/commit/f57e0b773db14f094ef09274af90042f83328412
● https://github.com/tastejs/todomvc/archive/f57e0b773db14f094ef09274af90042f83328412.zip
● Point Site url to file:// location unarchive and run tests – absolute links won't work without a server