Latest Trends in Automated Web Application Testing

In the previous blog, we were introduced to the concept of developing web applications using next generation client side RIA technologies like AngularJS/BackboneJS. This post introduces us to the latest technology on automation of testing such applications. The tools mentioned are in focus due to their proven track record in working as an integrated unit though other similar tools too can be worked out.
End to End testing (e2e)
End to End testing is meant to test the front end of a functional application by driving a browser that loads pages, performs front end processing of Javascript code, performs DOM interactions, handles form data, submits page and handles its response. Its aim is to perform automation of UI testing as closely as a user using a live application through all the possible workflows.

Unit testing is used to test each smaller functional level code separately without any integration points. With e2e testing, focus is more on integrated end user functionality.
Automated Web Application Testing Tools
Selenium
For long, Selenium has been a leading technology to automate testing of web applications with in-browser as well as remote unit testing frameworks. It automates browsers, in other words what we do in browsers like page navigation, button clicks, form input fields entries, submitting forms, etc. can be automated using Selenium. Selenium browser specific in-browser tool can be used to record a test in browser and rerun the saved test.

But, it has had its share of browser compatibility issues such as difficulty in accessing dynamic HTML/DOM elements served by RIA, etc.
WebDriver
WebDriver is an improvement over selenium in a sense that it introduces a new way to interact with the browsers and has minimal compatibility issues. It supports most of the programming languages viz, Rbuy, Python, Java etc.
WebDriverJS
Client side Javascript based RIA applications are gaining more popularity. WebDriverJS was introduced to handle Javascript as the language of choice. WebDriverJS is simply an easy-to-use wrapper over the WebDriver functions to be used in Javascript test code.

WebDriverJS is different from other tools as it is asynchronous and tests are handled by what is known as Promises. Promises, in layman terms, are similar to callback mechanism to handle asynchronous responses.
Protractor
AngularJS is a very popular Javascript framework to create RIA applications and it is specifically designed to support e2e as well as client side unit testing. Protractor is a wrapper library on WebDriverJS and is designed to work easily with the Jasmine testing framework.

Protractor can also be used to test non-AngularJS code.  It has the ability to test code written using any Javascript  based framework or library. It is easy to learn, runs fast  and supports the PageObject pattern.

It however is a bit difficult to debug when accessing  page elements because of its asynchronous nature. We  then have to depend on native WebDriverJS function  calls as workaround. It can run individual e2e test cases  from command prompt, but needs Jasmine to run all test  cases in a single execution.

Jasmine
Jasmine is a testing framework to handle tests written  using Javascript language and in our case, WebDriverJS.
Grunt
Although Jasmine is capable of running test suites, Grunt  leverages the role of task runner by handling starting and  stopping of testing and offers more configuration  support, minifications, etc.
Selenium + WebDriverJS + Jasmine + Protractor + Grunt – An ecosystem
Selenium and WebDriver takes care of local and server side APIs for driving a browser and handling the DOM and page loads to run tests on website. The ecosystem works as:

• Selenium standalone server is set to listen on a port for API calls.
• A browser session is started on test startup.
• WebDriver is loaded to control a particular browser session.
• Support multiple browser sessions and allow browser sessions to load site from remote server.
• Tests are then executed using the Jasmine Runtime Environment.

Protractor is a Javascript testing framework that runs on top of the Selenium / WebDriverJS APIs and gives us an easy abstract layer to write and run e2e tests.

This ecosystem avoids the need for repetitive manual e2e testing for each functional change or enhancement and thus saves precious development time. It can be wired to run in Build automation where it can execute a nightly suite of e2e and unit tests and report errors thus saving developer time.
Generate Reports
Test reports can be generated by integrating Protractor with Jasmine Reporter API. The report is usually generated in XML format and can be converted to HTML using XSLT.
References
http://thejackalofjavascript.com/end-to-end-testing-with-protractor/

http://engineering.wingify.com/posts/e2e-testing-with-webdriverjs-jasmine/

http://ng-learn.org/2014/02/Protractor_Testing_With_Angular_And_Non_Angular_Sites/

Error: Contact form not found.