First off, a Page Object is a design pattern intended to create a model of a web page in code via a object or class. If you’ve written even a bit of automation code, you’ll recognize the amount of chaff created to accommodate your ultimate test goal; clicking through ui elements, repetitive steps, etc…. a Page Object attempts to abstract those clicks and steps and allow for more elegant and maintainable test code. Therefore, for each page in your web application, you’d have a corresponding object that would provide the services offered by that page to your test.
As you can see, in addition to the cleaner testing code, Page Objects also offer a bit of encapsulation, not to mention the ability to define a domain language for your tests.
I decided to go with object literals for the page objects as they take care of instantiation (no need to use new to create an object) and they are easy to use and read. One downside is they can’t currently take advantage of inheritance but they seem to do the trick nonetheless.
Any items shared across multiple pages (nav bar, sidebar, etc…) should be broken out into their own objects and instantiated in the various page objects that make use of them (like SeachFilter in my example).
As I’m new to this concept, please do feel free to email me and let me know how this code might be improved. I’d be happy to have the input.
UPDATE: I’ve since added an updated and expanded example with working code: