Protractor Testing Automation Tool Framework / Jasmine Reporters

1. Protractor Testing
Automation Tool Framework
Presented by Haitham Mahmoud

2. A Powerful JavaScript Framework

3. Introduction
Protractor plays an important role in the Testing of
AngularJS applications and works as a Solution
integrator combining powerful technologies like
Selenium
It is intended not only to test AngularJS application but
also for writing automated regression tests for normal
Web Applications as well.

4. What is AngularJS
AngularJS is a JavaScript-based open-source front-end
web application framework mainly maintained by
Google and by a community of individuals and
corporations to address many of the challenges
encountered in developing single-page applications.

5. Why Do We Need Protractor Framework?
JavaScript is used in almost all web applications. As the
applications grow, JavaScript also increases in size and
complexity. In such case, it becomes a difficult task for
Testers to test the web application for various scenarios.
Sometimes it is difficult to capture the web elements in
AngularJS applications using JUnit or Selenium WebDriver.

6. AngularJS application
AngularJS applications are Web Applications which uses
extended HTML's syntax to express web application
components. It is mainly used for dynamic web applications.
These applications use less and flexible code compared with
normal Web Applications.

7. Angular JS web elements using Normal
Selenium Web driver
Selenium is not able to identify those web elements using
Selenium code. So, Protractor on the top of Selenium can
handle and controls those attributes in Web Applications.
The protractor is an end to end testing framework
for Angular JS based applications. While most frameworks
focus on conducting unit tests for Angular JS applications,
Protractor focuses on testing the actual functionality of an
application.

8. Before we start Protractor
We need to install the following:
1. Selenium webdriver
2. NPM (Node.js)

9. How to install Node.js on Windows
2. NPM (Node.js)
1. NodeJS Installation, we need to install NodeJS to install Protractor.
1. Go to the site https://nodejs.org/en/download/ and download installer.

10. How to install Node.js on Windows
2. NPM (Node Package Manager) - (Node.js)
1. NodeJS Installation, we need to install NodeJS to install Protractor.
2. Double click on the downloaded .msi file to start the installation.
Click the Run button in the first screen
to begin the installation.

11. How to install Node.js on Windows
2. NPM (Node Package Manager) - (Node.js)
1. NodeJS Installation, we need to install NodeJS to install Protractor.
2. Double click on the downloaded .msi file to start the installation.
Click the Run button in the first screen
to begin the installation.

12. Running your first Hello world application
in Node.js
1. Create file Node.js with file name firstprogram.js
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end('Hello World!');
}).listen(8080);

13. Executing the code
2. Save the file on your computer: C:UsersYour Name firstprogram.js

14. Output
3. Start your internet browser, and type in the address:
http://localhost:8080

15. Protractor Installation
1. Open command prompt and type "npm install –g protractor" and hit
Enter. Then type “Protractor --version”

16. Protractor Installation
2. Update the Web driver manager >> The CMD was opening
Now type “webdriver-manager update”
The web driver manager is used for running the tests against the angular
web application in a specific browser. After Protractor is installed, the web
driver manager needs to be updated to the latest version. This can be
done by running the following command in the command prompt.

17. Protractor Installation
2. Update the Web driver manager

18. Protractor Installation
3. Start the web driver manager >> The CMD was opening
Now type “webdriver-manager start”
This step will run the web driver manager in the background and will listen
to any tests which run via protractor.

19. Protractor Installation
4. Now, if you go to the following URL
(http://localhost:4444/wd/hub/static/resource/hub.html)
in your browser, you will actually see the Web driver manager running
in the background.

20. Let’s Go to test
Sample AngularJS application testing using
Protractor
Protractor needs two files to run, a spec file and configuration file.
1. Configuration file: This File helps protractor to where the test files
are placed (specs.js) and to talk with Selenium server (Selenium
Address). Chrome is the default browser for Protractor.
2. Spec file: This File contains the logic and locators to interact with
the application.

21. Let’s Go to test
Sample AngularJS application testing using
Protractor
1. We have to login https://angularjs.org
2. Enter the text as “Haitham“
3. Now we have to capture the text from the webpage after entering
the name and need to verify with the expected text.

22. Let’s Go to test
Sample AngularJS application testing using
Protractor
We have to prepare configuration file (conf.js) and spec file (spec.js) as
mentioned above.
Now we will create (spec.js)
describe('Enter Haitham Name', function() {
it('should add a Name as Haitham', function() {
browser.get('https://angularjs.org');
element(by.model('yourName')).sendKeys('Haitham');
var myName= element(by.xpath("//input[@class='ng-valid ng-dirty ng-valid-parse ng-touched ng-empty"]'));
expect(myName.getText()).toEqual('Hello Haitham!');
});
});

23. Let’s Go to test
Sample AngularJS application testing using
Protractor
We have to prepare configuration file (conf.js) and spec file (spec.js) as
mentioned above.
Now we will create (conf.js)
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['spec.js']
};

24. Let’s Go to test
Sample AngularJS application testing using
Protractor
• Execution of the Code
1. Open the command prompt.
2. Make sure selenium web driver manager is up and running. For that
give the command as "webdriver-manager start" and hit Enter.
3. Open a new command prompt and give the command as "protractor
conf.js" to run the configuration file.

25. Let’s Go to test
Sample AngularJS application testing using
Protractor

26. Let’s Go to test
Sample AngularJS application testing using
Protractor

27. Generate Reports using Jasmine
Reporters
Protractor supports Jasmine reporters to generate test reports. In this
section, we will use JunitXMLReporter to generate Test execution
reports automatically in XML format.

28. Installation of Jasmine Reporter
There are two way you can do this, locally or globally
1. Open command prompt execute the following command to install
locally
Above command will install jasmine reports node-modules locally
means from the directory where we are running the command in
command prompt.
npm install --save-dev jasmine-reporters@^2.0.0

29. Installation of Jasmine Reporter
Ignore this command
There are two way you can do this, locally or globally
2. Open command prompt execute the following command for global
installation
Above command will install jasmine reports node-modules locally
means from the directory where we are running the command in
command prompt.
npm install –g jasmine-reporters@^2.0.0

30. Install the jasmine reporters locally
1. Execute the command.
npm install --save-dev jasmine-reporters@^2.0.0

31. Installation of Jasmine Reporter
There are two way you can do this, locally or globally
1. Open command prompt execute the following command to install
locally

32. Install the jasmine reporters locally
2. Check the installation folders in the directory.
" Node_modules" should be available if it is successfully installed like in
below snapshot.

33. Install the jasmine reporters locally
3. Add the following colored code to an existed conf.js file
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
capabilities: {
'browserName': 'firefox'
},
specs: ['spec.js'],
framework: 'jasmine2' ,
onPrepare: function() {
var jasmineReporters = require('C:/Users/RE041943/Desktop/guru/node_modules/jasmine-
reporters');
jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter(null, true, true)
);
}
};

34. Install the jasmine reporters locally
4. In code, we are generating the report "JUnitXmlReporter" and giving
the Path where to store the report.