This document proposes extending the page object pattern by introducing page fragments. It suggests breaking pages into smaller fragments that can then be grouped into larger fragments and reused. Fragments would inherit methods from child fragments and could be collected into custom collections with additional methods. Fragments may also inherit from web elements to be passed as parameters. This approach aims to improve code reuse, stability, readability and flexibility, but requires strong object-oriented skills and results in more code. Examples are provided in Protractor and TypeScript.

1. Page Fragments
OR PAGE ELEMENTS
OR HTML ELEMENTS
OLEKSANDR KHOTEMSKYI
http://xotabu4.github.io
EXTENDING IDEAS OF PAGE OBJECTS PATTERN

2. In this presentation
1. Quick explanation of modern Page Objects
2. Idea of Page Fragments
3. What this gives to us?
4. Code examples

3. Quick explanation of
modern Page Objects

5. Idea of page
object
• Based on OOP principles
• One class describes one page
• Pages can inherit one from
another
• Additional layer of abstraction
for our tests
• Extracts elements
manipulations from test logic
Page
Notes
RecycleBin
Archive
createNote (title, body) {}
deleteNote (index) {}
archiveNote (index) {}
changeNoteColor (index, color) {}
editNote (index, title, body) {}
deleteNoteForever (index) {}
restoreNote (index) {}
unarchiveNote (index) {}
deleteNote (index) {}
changeNoteColor (index, color) {}
editNote (index, title, body) {}
openRecycleBinPage()
openArchivePage()
openNotesPage()

6. Idea of page
object
• Elements are belongs to
object instance, usually as
class fields or instance
attribute
• Elements should be
initialized in proper time
• Methods describe actions
that user can do on the page
NotesPage
headerMenuButton
openRecycleBinPageLink
openArchivePageLink
openNotesPageLink
createNoteField
deleteNoteButtons
archiveNoteButtons
changeColorButtons
…

7. Best practices
• Page object methods should do
only what specified in their
name
• This means not less than needed
to make action completed, not
more than needed to make
action completed
• Use inheritance, composition,
use reliable locators, chain
searching of elements
• If you have repeatable complex
actions in your tests – use
models to reduce copy-paste

8. Page Fragments

9. Modern apps consist of different components

10. Idea of
Fragments
• Reproduce the same structure of
objects on the page that we
already have in our application
• Now page is not the smallest
object in framework
• Break fragments into smaller
fragments
• Group smaller fragments into
bigger fragments
• Reuse methods of child fragments
in parent fragment
NoteFragment
INCLUDES fragments:
ArchiveButton
ChangeColorButton
DeleteButton
getTitle()
getBody()
edit(title, body)
changeColor(color)
delete()
archive()

11. Fragments
• Use chaining for elements
search where possible
• Search inside element
instead searching
everywhere on the page
• As an option, pass root
element into constructor
as parameter, and use it
to make all searches
inside this element
let deleteButton = browser.element(by.css('button.delete'))
Better:
Bad:

12. Idea of
Fragments
• Inherit one fragment from
another
• Use power of OOP
• Introduce types in
languages without strict
types (JS, Python) to
enable autocomplete in
IDE
• Use interfaces, abstract
classes to introduce
parent objects
NoteFragment
ArchivedNoteFragment
DeletedNoteFragment
AbstractNoteFragment
???
Fragment

13. Experimental features

14. Custom
collections of
own fragments
• Create custom collections with
your fragments
• Works like usual array/list/etc , but
extended with your own methods
• Iterate thru collection, apply filters
• Best works for things like search
results
• Feature state:
• Java – tested and used in prod
• Python – not investigated (3rd party
libs exists)
• JS (ProtractorJS) – testing and bug
fixing
NotesArrayFragment
get(index) -> returns NoteFragment
count()
map()
filter()
…
hasNoteWithTitle(title)
hasNoteWithTitle(body)
hasNoteWithColor(title)

15. Inherit from
WebElement
object
• Your fragments now valid
WebElements
• Your custom fragments can be
passed to any methods that
require WebElement as parameter
• Override existing WebElement
methods, such as isDisplayed() for
even more flexibility (if needed)
WebElement
Object
Inheritance
chain
FooFragment
BarFragment

16. What this gives to us?

17. Benefits
• Nice reusing of components across
different pages or even projects
• Better stability on locators changes
• Logic spited across smaller parts –
easier to change
• Cleaner code
• Easier to understand because
everything has it own names
• Can be applied to any
tool/programming language. Also
works for non-web applications

18. Hard parts
• Requires good understanding of
OOP principles
• Requires to write more code
• Might be not needed in tiny
projects – best works in
applications with a lot of similar
fragments
• Idea is not used widely. Everyone
building own approach
• Additional framework layer in
your code

19. Code examples
PROTRACTOR + TYPESCRIPT

30. Now it is time to ask questions
https://github.com/Xotabu4/protractor-element-extend
http://xotabu4.github.io/