One of the painful problems in Selenium automated testing is determining whether a HTML page has been loaded. This is especially the case when web application uses a JS heavy framework such as the popular AngularJS. How to handle Selenium Page Object pattern better with Loadable Component. The Loadable Component helps test case developers make sure that the page or a component of the page is loaded successfully. I will share my experience about the concept of the Loadable Component and Page Object patterns.

1. Better Page Object Handling with
Loadable Component Pattern
Sargis Sargsyan
SQA Days, Belarus, 2016

2. ‹ ›2
Loadable
Component
4
Introduction
1
Page Object
Pattern
2
Wait in
Selenium
3
Q & A
8
Common
Failures
7
Implementation
on existing
project
6
Main Topics
Slow Loadable
Component
5

3. ‹ ›3
Demos
• Demos are in Java!
• Everything we discuss is applicable strongly-
typed languages (e.g. C#)
• Most things are applicable to dynamically-
typed languages (e.g. Ruby, Python, Perl)

4. ‹ ›4
Demos will use also
• Maven
• TestNG
• Selenium

5. Page Object
Pattern
`

6. ‹ ›6
What is Page Object Pattern
• Page Objects Framework is a design pattern which has become
popular in test automation for making easy test maintenance and
reducing code duplication. This design pattern, to interact or work
with a web page, we have an object-oriented class for that web. Then
the tests calls the methods of this page class by creating a page
object whenever they need to interact or work with that web page.
7
q 1Z
a

7. ‹ ›7
What is Page Object Pattern
• For example web application or website that has multiple web pages
and each page offers different services and functionalities.
• There are different pages like
• Home page,
• Login page,
• Registration page.
• Each page offers a specific set of services. Services offered by
Login page Login by entering user name and password We can
get page title A class to represent Login page is like

8. ‹ ›8
What is Page Object Pattern
• In page objects framework:
• Each page in the web application/website we consider as an
object.
• Each webpage in the web application is represented by a Class
• Each service/functionality offered by a webpage is represented
by a method in the respective page class
We will be having our tests calling these methods by creating objects
of page classes

9. ‹ ›9
Why we should use Page Objects Pattern
1 Promotes reuse and refuses duplication
2 Makes tests more readable and robust
3 Makes tests less brittle
4 Improves maintainability, Particularly when there is frequent changes
5 If UI change, tests don’t need to be change, only the code within the page object need to be changed.
6 Handle of each page using its instance

10. ‹ ›10
How does it structured?
• Each page is defined as it’s own class.
• Actions (including navigation) are represented as functions for a class.
• Each function can return a new Page object (navigating between
pages),
• Tests only talk to the page objects.
• Page objects only talk to the Base Object.
• Base Object talks to only driver.
• Elements on the page are stored as variables for the page object

11. ‹ ›11
Selenium Model
Test Case 1
Test Case 2
Test Case …
ReportSelenium
Web app
Web PageWeb PageWeb PageWeb PageBrowsers

12. ‹ ›12
Page Object Model
Page Objects
Test Case 1
Test Case 2
Test Case …
Report
Selenium
Web app
Web PageWeb PageWeb PageWeb PageBrowsers

13. ‹ ›13
Page Object Model & Base Page
Page Objects
Test Case 1
Test Case 2
Test Case …
Report
Base Page
Selenium
Web app
Web PageWeb PageWeb PageWeb PageBrowsers

14. ‹ ›14
Architecture
Framework/
PageObjectsL
Browser/Web
Application
Ħ
Selenium Tests X
Selenium
Web Driver
Ä

15. ‹ ›15
How it looks like

16. ‹ ›16
Base Object Page

17. ‹ ›17
Base Object Page

18. ‹ ›18
Selenium Setup

19. ‹ ›19
Base Test

20. ‹ ›20
Test

21. Wait in
Selenium
p

22. ‹ ›22
Why to wait?
• When automating an application you must wait for a transaction to
complete before proceeding to your next action.
• Sleeps should never be a version for an alternative to waits. Sleeps
will ALWAYS wait the exact amount of time even if the application is
ready to continue the test.

23. ‹ ›23
Wait as long as necessary
• We should wait as long as necessary which saves you precious time
on your execution.
• Selenium Offers 3 wait types:
• Implicit Waits
• Explicit Waits
• Fluent Waits
[

24. ‹ ›24
Implicit Waits
• Implicit waits apply globally to every find element call.
• undocumented and practically undefined behavior
• Runs in the remote part of selenium (the part controlling the browser).
• Only works on find element(s) methods.
• Returns either element found or (after timeout) not found.
• If checking for absence of element must always wait until timeout.
• Cannot be customized other than global timeout.
• Best practice is to not use implicit waits if possible.

25. ‹ ›25
Explicit Waits
• Documented and defined behavior
• Explicit waits ping the application every 500ms checking for the
condition of the wait to be true
• Runs in the local part of selenium (in the language of your code)
• Works on any condition you can think of
• Returns either success or timeout error
• Can define absence of element as success condition
• Can customize delay between retries and exceptions to ignore

26. ‹ ›26
Explicit Waits

27. ‹ ›27
Fluent Waits
• Fluent waits require that you define the wait between checks of the
application for an object/condition as well as the overall timeout of
the transaction. Additionally you must tell fluent waits not to throw an
exception when they don’t find an object as best practice.

28. Loadable
Component
p

29. ‹ ›29
What is the LoadableComponent?
• The LoadableComponent is a base class that aims to make writing
PageObjects less painful. It does this by providing a standard way of
ensuring that pages are loaded and providing hooks to make
debugging the failure of a page to load easier. You can use it to help
reduce the amount of boilerplate code in your tests, which in turn
make maintaining your tests less tiresome.
• There is currently an implementation in Java that ships as part of
Selenium 2, but the approach used is simple enough to be
implemented in any language. *Selenium Wiki

30. ‹ ›30
What is it?
• LoadableComponent is a base class in Selenium, which means that
you can simply define your Page Objects as an extension of the
LoadableComponent class. So, for example, we can simply define a
LoginPage object as follows:

31. ‹ ›31
How to use
• The Loadable Component Pattern also allows you to model your
page objects as a tree of nested components.
• Allows better way to manage navigations between pages
• Uses the “load” method that is used to navigate to the page and the
“isLoaded” method which is used to determine if we are on the right
page.

32. ‹ ›32
LoadableComponent class

33. ‹ ›33
load() and inLoaded() methods

34. ‹ ›34
PageLoadHelper Class

35. ‹ ›35
isLoaded() with PageLoadHelper

36. ‹ ›36
Extend LoadableComponent in Base Object class

37. ‹ ›37
Custom Loadable Component Implementation

38. Slow
Loadable
Component
`

39. ‹ ›39
What is the SlowLoadableComponent?
• The SlowLoadableComponent is a sub class of LoadableComponent.
• get() for SlowLoadableComponent will ensure that the component is
currently.
• isError() method will check for well known error cases, which would
mean that loading has finished, but an error condition was seen.
• waitFor() method will wait to run the next time.
After a call to load(), the isLoaded() method will continue to fail until the
component has fully loaded.

40. ‹ ›40
SlowLoadableComponent class

41. ‹ ›41
SlowLoadableComponent Implementation

42. Implementation
on existing
project
p

43. ‹ ›43
Changes in Base Page

44. ‹ ›44
Changes in Page Object

45. Common
Failures
l

46. ‹ ›46
Recorded Brittle Test

47. ‹ ›47
Recorded Brittle Test

48. ‹ ›48
Not Building a Framework

49. ‹ ›49
Use unique selectors

50. ‹ ›50
Do not use Retry
y

51. ‹ ›51
Do not try to Automate Hard Things

52. ‹ ›52
Run test in Continuous Integration
1 Have a plan and stick to it
2 Run test as part of build
3 Run test locally
4 Report results
5 Break builds

53. ✉ !
EMAIL TWITTER LINKEDIN
mrsargsyan sargissargsyan
Contacts
ą
Thank You!
sargis.sargsyan@live.com