UI and performance testing for UI heavy web applications – solutions

Create automated website tests for free with LoadFocus.com.

Testing the UI (user interface) of web applications has been always a main concern of developers.
It is the first thing that a user/customer notices once something is wrong.

There quite a few solutions on the testing world out there. I will enumerate most of them here and
go in deep with the solution that I have found pretty attractive.

1. The first solution is the well known Selenium WeDriver which is by far the most used solution.

Pros:

• well known by most of the automation developers 
• offers good documentation
• lots of information to be found on the internet
• used successfully by lots of companies

Cons:

• the main disadvantage is the fact that is pretty slow; running a long suite of tests can take quite some time
• was not intended to be used for performance testing of the page load times
• is not very accessible for developers which are not familiar with Selenium Webdriver
• the web application that have a lot of dynamically embedded JS code are pretty hard to test (in this situation the solution would be to rely on Rhino or something similar but even in that case it is very tricky)

2. The second solution would be to use the now pretty known PhantomJS headless browser combined with CasperJS for
testing your web application.

Pros:

• runs much faster than the Selenium based solution
• tests are written in javascript which could be in the advantage of the frontend developers which are used with this
• need to learn the API for creating the tests

Cons:

• the automation engineers need to create an environment which can deploy the applications and start the tests
• is not as out of the box as Selenium
• can also be used for performance testing, but for measuring the page load time the developer cannot rely on the Navigation API as is notsupported by PhantomJS yet; the XHR requests cannot be measured 100% reliable
• not extremely stable

3. The third solution I thought of is building a javascript solution which is embedded directly in the web application itself. The solution can be seen as it creates a self testable web application.

Pros:

• runs quite fast
• the tests are in pretty much the same place as the javascript used by the UI to render and add interactivity to the UI
• the tests can have a built in user interface for running the tests on a test to test bases for debugging or developing the tests
• the tests are based on javascript and any javascript library that the developer is used with (JQuery at least in my implementation of this solution) so are very appealing for the developers which do not have to get used with some other third party library or testing solution

Cons:

• the framework must be  built from scratch as I did not find anything that does eactly what I wanted
• the transition from one URL to another is pretty tricky as the test has to remember what test was active and which step it was at inside the test
• can be used also for performance testing of the page load time

Developing a self testable web application using an embedded javascript framework

Objectives:

•   a javascript framework that will be embedded directly in the web application
•   the web application will have a specific run mode in which the test framework will be included otherwise it will not be included because of performance issues
•   the framework should have a solution for managing the tests which will be implemented as the test manager (will retrieve the tests from different js files and make them accessible for running); also the manager will register the state of a test (active or not) and the step of the test (we need a step fragmentation of the test as in this way we can register the state when a URL transition is made)
•   also a transition manager will be needed for managing the transitions between different URLs; this will be built based on the cookies or local storage support
•   the framework should also have a UI interface which will be accessible when running the web application in test mode; this will help develop and debug the tests
•   a performance module which will log all the timing information that can be retrieved from the Navigation Timing API which will be based on the JavaScript library created by Google’s Steve Souders

Implementation:

•   implementation steps:
•   general structure of the framework files and the test files
•   determine the solution for creating specific run modes of your web application
•   implementation of the test manager
•   implementation of the transition manager
•   implementation of the UI for the test framework
•   implementation of the performance module
•   implementation of very light web application which will retrieve the performance page load time information during the test run (this will be based on XHR beacons sent from the tested application to the light web application that will register the results and will be able to display the results using charts and graphs)
•   the implementation details will be posted as the solution evolves so stay tune for the next post in the series.

testing heavy web apps