Design Patterns beyond the Page Object: An investigation into the design patterns used while building page objects.

location_city Bengaluru schedule Sep 5th 10:30 - Jan 1st 12:00 AM place Grand Ball Room 2

In an age where the Page Object Pattern and Page Factory Pattern dominate web testing conversations, there is still a need to understand and apply the design patterns of yesteryear. Ideas from the Facade Pattern, Factory Method Pattern, the Iterator Pattern, the Object Pool Pattern, and the Decorator Pattern all find their way into the Page Objects we build to represent the increasingly complex widgets found on today's websites.

In this presentation, we take it back to the old school, looking at novel ways to apply classic design patterns, like those developed by the Gang of Four and Code Complete, to new screen scraping problems. We will investigate three common scenarios where using the typical approach to page objects can be inefficient or difficult, including filling in a web form, iterating over data in a list, and traversing iframes to communicate with widgets. We will explore how to improve upon the naive approach to building these page objects through the use of classic design patterns. Finally, we will formalize our findings into new patterns which can be applied to more general scenarios.

Code examples will be presented in Python and based off of my work building automation tools for, a platform for scientific collaboration.


Outline/Structure of the Demonstration

  1. Introduction / motivation for investigating better approaches to interacting with web forms,
    lists of items, and elements inside of iframes. (5 minutes)
  2. Filling in web forms (15 minutes)
    1. Goal of the web form - collect data from the user
    2. Typical web form page object
      • widgets for text, select, check box entries
      • submit and cancel buttons
      • repeating the same find_element/clear/send_keys commands to populate each element.
    3. Newly suggested interface
      • populate_form() method fills in the form with provided data.
      • submit_form() methods calls populate_form, clicks submit button.
      • methods accept dictionary of data used to fill in the form keys are field names, values are field values
    4. Providing a "value" method or property to page objects
    5. Different types of web forms:
      • OrderedWebForm - filling in a form where order matters
      • PreviewWebForm - web form with a preview button
    6. WebForm Pattern
      • Builds upon the Facade Pattern to create a simple interface for interacting with web forms.
      • Relies upon page objects knowing how to set the value of the web element they represent.
  3. Iterating over items in a list (15 minutes)
    1. Goal of data in a list
      • present the user with dynamically generated results, possibly from a search.
      • user can choose to interact with a single item at a time.
      • users may want to search for a particular item, requires iterating over list.
    2. Typical list page object
    3. Newly suggested interface
      • Container class
        1. represents properties of the list as a whole.
        2. provides methods for searching the list.
        3. search methods return Item objects representing a specific item.
      • Item class
        1. represents a single item in the list.
        2. item specific actions happen through this object.
        3. can be updated to point to a different item in the list
    4. Using Templatized Locators to implement ideas from Object Pool Pattern
    5. ItemList Pattern
      • Incorporates Iterator Pattern and Factory Method Pattern
      • Can be applied to any countable list of items including items in a and rows in a
  4. Interacting with elements in iframes (15 minutes)
    1. Goals of wrapping elements in iframes
      • Separation of JavaScript and CSS between contexts
      • Pulling in data from external site
      • Old way of supporting JavaScript tricks in older browsers
    2. Typical way to interact with elements in default browser context
      • search for the element
      • interact with the element
    3. Typical way to interact with elements in an iframe context
      • search for iframe
      • switch to iframe context
      • search for the element
      • interact with the element
      • exit iframe context, return to default browser
    4. Pitfalls with typical approach
      • Need to define multiple versions of widgets, one for regular use, one for iframe use.
      • What happens if the widget is embedded in multiple iframes?
    5. Newly suggested interface
      • wrap the methods of the original object with code to appropriately enter and exit the iframe context.
    6. IframeWrap Pattern
      • Uses Decorator Pattern to wrap methods and properties of a widget with calls to enter and exit the iframe context.
      • Widgets can be wrapped multiple times, allowing widgets embedded in more than one iframe.
      • Wrapped widgets maintain the same interface as if it was not embedded in an iframe.
      • Promotes reuse of widgets
  5. Summary, "Name that Pattern" game (5 minutes)
  6. Questions (5 minutes)


Learning Outcome

After attending this talk, participants will:

1) Understand how to simplify interactions with web forms by using the WebForm Pattern.

2) Understand how to work with lists of items by using the ItemList Pattern.

3) Understand how to deal with html elements inside of iframes by using the IframeWrap Pattern.

4) Be introduced to ideas from well established Design Patterns and how they can be incorporated into solutions for website test automation.

Target Audience

Test writers interested in alternative ways to dissect web pages. People who understand the Page Object Pattern and are wondering what comes next.

schedule Submitted 6 years ago