Skip to content

Section Objects for Modular Web Pages

When automating tests for web pages, it is a common approach to use the PageObject pattern. It helps you to extract away the technical aspects of web testing, and lets you focus in your test cases on the test steps the web test actor needs to perform.

We have used this approach in a project, where web pages are assembled out of so called modules. You have for instance a header module, a footer module, some text modules, and so on. Let’s call these modules sections from now on. The sections are configured in a CMS.

DSC01274_v1

When using here page objects for a complete page, you get a lot of code duplication, since sections are used on several pages (like the header). Thus, our first approach was to use page objects for the single CMS sections, which just encapsulate the data needed for a given section. This is also very close to the approach suggested in the pattern. This “section object” approach did solve the code duplication issue, but had several drawbacks in our setup:

  • To write a test you needed to know the CMS sections which are on the page. This was not always easy since there were very many sections available. The whole section concept was not clean enough to allow for an easy access.
  • Sometimes the same section appeared several times on the same page (like the login section). Using a simple section object did not allow for a specific access to the sections.

To deal with this issues, my colleague Robert Bossek from QualityMinds developed an extended approach for section objects, which solved these issues.

The main ideas is, that we have section objects which all have a specific context. This context is commonly a CSS locater prefix, which allows to find a specific section on a page. Furthermore these sections are then assembled together on a “real” page object, which represents the given page. To do so standard OO techniques are used. Altogether, you get a modular approach which avoids code duplication, is as easy accessible as the standard page objects, and allows for several sections on the same page. This was a very nice result!

Robert presented this approach at the First Munich Selenium Meetup.

Here are the slides:

We have also extended the approach to allow for specifying BDD scenarios. We have implemented everything in our preferred web test automation framework Codeception.

  • Twitter
  • Bookmark Section Objects for Modular Web Pages at del.icio.us
  • Facebook
  • Google Bookmarks
  • Digg Section Objects for Modular Web Pages
  • Identi.ca

Trackbacks

No Trackbacks

Comments

Display comments as Linear | Threaded

No comments

Add Comment

Gravatar, Twitter author images supported.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications.

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA

Enclosing asterisks marks text as bold (*word*), underscore are made via _word_.
Standard emoticons like :-) and ;-) are converted to images.
Form options