Renew web & mobile automated testing with a new Page Model -based tool

Today more and more services are becoming web based. This means that modern user interfaces are built using HTML5 and other web technologies, even in embedded environments. At the same time applications and services are becoming more complex which means that testing is more crucial than ever in bringing high quality software to markets on time.

There are several existing tools to automate UI testing mostly based on different recording and playback methods. While it is easy to develop such tools, using them and especially maintaining test assets created with them is not very easy. Also it may be hard to match reported errors to actual web page elements (e.g. “element_id_zyz_2” is missing).

We decided to try a more innovative approach. We wanted to create a tool that is easy to use, while powerful enough for automating the testing of even the most complex and dynamic user interfaces. Also the solution should have long lasting support and have a wide cross-browser support across different desktop and mobile devices.

To meet the usability criteria we developed the Page Model approach. Here’s what it means in practice:

• Page Model is similar to the Page Object, which represents the screens of your web app as a series of objects.
• The difference is that the Page Model has more elements:
• Information of web app screen and model type (full screen, selected area of screen)
• Information of Page Objects (web elements and dynamic objects)
• Screenshot of full screen or selected area of your screen
• Methods containing the functionality of the web page (e.g. login method)
• Page Model transforms the information of a web page's elements automatically to textual format that can be used instantly in creating test scripts.
• Page Model screenshot visualises the web page and it is used for selecting objects in test creation.
• Page Model file also contains methods that can be used to execute actions present on the web page. It can be understood as a Page Model specific “function library”.
• After creating models, test scripts and methods can be easily constructed utilizing our graphical user interface

As a technology base we chose Selenium Webdriver, which has support of the largest browser vendors and is a widely used and well maintained Open Source tool. This is completed by the also Open Source Appium -framework to enable Selenium -based testing on mobile devices.

We combined these algorithms and technologies to Ixonos Visual Test(TM), which is a powerful set of tools for making testing easier both for test engineers and developers. With our tool you can plan, create, plan and maintain test scripts and test assets more visually. You can produce easily maintainable Page Models simply by browsing your web or mobile application. We have support for dynamic locators, javascript, AJAX and other special elements already implemented. We even have a solution for accessing HTML5 canvas elements from the test scripts; something at least we have not seen before. Everything is done with a modern powerfuI UI and the generated scripts are standard Selenium Webdriver format.

The best part is that the our tools also makes it possible to automatically detect changes to web pages. Detected changes (new and missing elements, broken methods) are visualized on top of the web page (see picture) and the tool even proposes fixes for those.

One of cool things is that you can generate tests graphically using a model graph UI that defines page model transitions and methods which are used there. The tool will go through the model graph and make test cases based on it.

To see introduction video, watch this:

And to witness the same approach applied to Android devices watch this:

Got interested? Visit our product pages for more information and a free trial Windows/Linux version.

And stay tuned for next innovations!

Anssi Pekkarinen, Solution Architect/Lead Test Automation Consultant - Ixonos Plc