The popularity of Web application automation testing with Protractor framework relates to popularity of Angular.JS the JavaScript framework that helps to make Web pages dynamic and lightweight.
Among other projects Developex is working for the Web application based on Angular.JS. This application interacts with Java program and manage audio and video content onto specific hardware under Android OS.
A user opens the Web page of the application, input some data and generates the file in JSON format. Then this file is used by Android application for playing the specific content by schedule.
When developing the Web application just started no automation had needed. Now the project is getting to be more complex. The project’s team comes to the point when manual testing gets much more time comparing with automated testing.
Using AngularJS, we chose the Protractor for the automation.
Now we offer primitive test case on this E2E test framework under Windows OS for your attention.
Before using Protractor it is need to install all necessary (and enough) components, namely Node.JS, Java JDK, Selenium Standalone and Chromedriver. Tests are written on JavaScript.
We do not install additional drivers or libraries because it is unnecessary for the current state of the project.
Below is an example of simple test on Protractor. We replaced real names because this information is confident, but the example is fully imitated one of the first real test case that we run to be sure that framework is working correctly.
describe('WEB Page Test', function() {
it('Press Add button and see what happens', function() {
browser.get('http://project-name.com/');
element(by.css('[ng-click="objectRoot.objectChild1.objectChild2.addNewItem()"]')).click();
expect(element(by.model('textfield.inputValue')).isPresent()).toBe(true);
});
});
While tester takes a tea the Protractor works. It presses Add button and then checks if new input text field with Angular.JS parameter ‘ng-model=textfield.inputValue‘ appeared.
This test contains two features. First, the Protractor finds button not by ID but by [ng-click=”objectRoot.objectChild1.objectChild2.addNewItem()”] expression. Search executes using By.css() method that append to global Webdriver object, that instantiated by Selenium’s WebDriverJS.
Secondary, test is passed successfully if define HTML element is appeared. We check it by methods isPresent() and toBe().
The test case body is placed to the file with free name and js extension (simpletest.js). Before running the test it is need to check if the Selenium server and Chromedriver have run (to run it write the command ‘webdriver-manager start‘ into common cmd Windows utility).
Also, it is need to create second js file with settings for the test. We created simple conf.js with such simple code:
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['simpletest.js']
};
The ‘seleniumAddress’ property has a standard value and the ‘specs’ property contains the name of file where test code is written.
Now we are ready to run the test. Do it using cmd utility (or any IDE). Here we type the command ‘protractor conf.js’. Accessing to protractor batch file from any location is possible because we installed protractor with -g key.
The test has executed successfully. The green message ‘1 tests, 1 assertions, 0 failures‘ calls sense of satisfaction and opens new horizons for those who have not tried to test applications on Angular.JS automatically yet.
Automation testing Web applications with Protractor http://t.co/gPbGsuOIda pic.twitter.com/YFNFYIHAYm
— Developex (@developexcom) June 24, 2015