Using Widget model instead of Page Object model

[Daniel Koo]

Hello, this is my first posting to this website and I'm excited to get engaged!

I wanted to hear from other Selenium users what their thoughts are on building automation code using widget model instead of page object model. Over the past 5 years or so, our company have developed automated tests using Selenium RC, now Selenium WebDriver, and we have transitioned over to use widget model concept from the page object model concept. We really love Selenium and heavily depend on the API! 

In terms of Page Object model, I am referring to creating UI classes which represents a unique page of the web application under test. On the other hand, the widget model is creating reusable UI classes which represents a commonly used widgets/controls throughout your application. This could be things such as navgiation bar, custom table, custom drop down, form fields, etc.

We have recently open sourced a project called "JTAF-ExtWebDriver" which practices this concept. We currently have HTML widget library included within the project. The goal is to add more widget libraries for specific UI libraries such as jQuery, Angular, GWT, etc.

http://finraos.github.io/JTAF-ExtWebDriver/

https://github.com/FINRAOS/JTAF-ExtWebDriver

Any feedback would be greatly appreciated! Thanks!  

[David]

I think the widget model is a good concept, and it can also be combined with page object model in an actual test implementation as well, no reason why you can't combine them to get the best of both techniques. The pages can contain widgets :)

What's a little more interesting is if one has a site that follows a template-ish format. How best to tackle that? There's not quite a standard, so up to each organization to decide how they want to handle. What I mean is site A & B derive from common template but differ in certain functionality or UI element definitions. In such case do you templatize master page object(s)  (or widgets) then extend/inherit them in the actual site page objects. Or define the template as an interface (in Java) and implement them for the actual sites?

[Daniel Koo]

Yes, I do agree that we can combine them together when appropriate. In fact, we have done that in several situations where we define widgets inside a page object to return appropriate widget(s) and/or perform actions on widgets via page object methods. But the key point was to widgetize as reusable comonents as much as possible.

In terms of templating, we have done what you have described (inheriting common component class). We have done this straight using Java as well as using spec modeling. With spec modeling, we basically use XML or other file spec to specify what widgets are contained in a page and these pages (or components) can extend each other. This helped us maintain UI spec much easier and reuse across multiple pages.

[David Lai]

I like the idea.  there's tons of things that need wrappers with the age of the Single Page Apps.

Might be cool if there was support for Calendar pickers.  Maybe an Abstract factory that can switch between different calendar libraries.

[Daniel Koo]

Thanks for the input. We are currently working on creating widget library for jQuery, Angular, Bootstrap as well as GWT (EXT). 

BTW, which UI library were you referring to for the Calendar? For example here's one for GWT - GWT DatePicker.

Love the factory idea. In fact, we have done that via widget factory classes (not included in OS project yet). It'll likely be included in the next release. We are also planning to allow users to provide their own widget implementations instead of using provided implementation via simple configuration (spring or alternate).

[cjayswal]

It is similar to the componet concept provided by ISFW. Here are ISFW FAQ.

acan I create custom component/element?

How can I create custom component/element?

How can I create custom component/element?

[Daniel Koo]

The key difference is providing implementations for the various widget(component) interfaces. The goal is to have different implementations for different UI libraries according to the widget interfaces spec so that people can reuse them without reimplementing every time.

[Daniel Koo]

Check out our video posted on YouTube! This was delivered @ NYC Selenium Users Group.

https://www.youtube.com/watch?v=2UeHDNMgg-o