Protractor plays an important role in testing AngularJS applications and works as a solution integrator combining powerful technologies like Selenium, Jasmine, Web driver, etc. It is intended not only for testing AngularJS applications but also for writing automating regression tests for normal web applications. In this topic, our speaker has taken you through a short tour from basic steps to advanced steps to work in project. There are following main sessions: + Protractor introduction + Building up and creating a simple test script + Getting familiar with Cucumber + Using page object model (POM) with protractor and cucumber + Reporting

2. Protractor: End-to-end Testing for AngularJS
By Thuy Nguyen

3. www.axon.vnfb.com/AxonActiveVietNam
Warm Up
1.The basics of Selenium (Either Java/c#)
2.Selenium Architecture
3.Element locators available in Selenium
4.Cucumber
5.POM (Page-Object-Model)

4. www.axon.vnfb.com/AxonActiveVietNam
1. Protractor introduction
2. Building up and write a simple test
3. Getting familiar with Cucumber
4. Using POM with protractor and cucumber
Agenda

5. www.axon.vnfb.com/AxonActiveVietNam
Protractor introduction
Protractor

6. www.axon.vnfb.com/AxonActiveVietNam
Protractor introduction
PROTRACTOR SELENIUM
Locators By.repeater, By.model,
…. (Selenium locators)
By.name, By.id, By.css,
By.xpath ….
Programming
language
Javascript only C#, Java, Python, Ruby
Browser
Support
(No different from Selenium) Chrome, Mozilla, Safari,
MSEdge
Package Whole range of NPM
packages
Limited to jar’s and assemblies
in JAVA and C#

7. www.axon.vnfb.com/AxonActiveVietNam
Protractor introduction
PROTRACTOR SELENIUM
Test frameworks Jasmine, Mocha,Chai TestNG, Junit for Java, Nunit,
Mstest for C#.
BDD support Cucumber Cucumber, SpecFlow
Programming Asynchronous Object oriented
Browsers Both real and headless
browsers
Only on real browsers
Speed About 20-30% faster than
Selenium
Normal

8. • Why we use protractor
Protractor introduction

9. <input type="text" ng-model="vm.username"
id="username" name="username">
• Why we use protractor
Protractor introduction

10. Protractor and webdriver architecture
Protractor introduction

11. Protractor introduction
Work Flow

12. Install below three things firstly
- Node.js
- Protractor
- Selenium Webdriver
Use npm to install Protractor globally with:
- npm install -g protractor
- webdriver-manager update
- webdriver-manager start
Building up and write a simple test

13. <input type="text" ng-model=“person.name”>
element(by.model(‘person.name’));
<span ng-bind=“person.email"></span>
element(by.binding(‘person.name’));
Full list of available methods :
angular.github.io/protractor/#/api
• Object Locators
Building up and write a simple test

14. • Work Flow Diagram
Building up and write a simple test

15. • Creating a simple test script
• conf.js: the configuration file
• spec.js: the spec file
• customConfig.js: customize speed for protractor tests
Building up and write a simple test

16. exports.config = {
framework: ‘jasmine',
seleniumAddress:
‘http://localhost:4444/wd/hub',
specs: [‘customConfig.js','spec.js']
}
• Creating a simple test
Building up and write a simple test

17. • Creating a simple test
Building up and write a simple test

18. describe('Protractor Demo App', function() {
var registerBtn =
element.all(by.linkText('Register')).get(0);
var firstname
= element(by.model('vm.user.firstName'));
beforeEach(function() {
browser.get(‘http://localhost/demo');
});
it('register a user', function() {
expect(browser.getTitle()).toEqual('Dashbo
ard');
………………
});
});
Building up and write a simple test

19. var origFn = browser.driver.controlFlow().execute;
browser.driver.controlFlow().execute =
function () {
var args = arguments;
origFn.call(browser.driver.controlFlow(),function ()
{
return protractor.promise.delayed(400);
});
return origFn.apply(browser.driver.controlFlow(),
args);
};
Building up and write a simple test

20. • webdriver-manager update
• sudo webdriver-manager start
• protractor conf.js
(cd to project folder)
Run scripts:
Building up and write a simple test

21. (15’)
Write simple test scripts:
• Register an account (First Name, Last
Name, Username, Password)
• Login into system(Username, Password)
DEMO & PRACTICE

22. Feature: Register Account
As a user of Fusion website,
I want to create an account
So that I have to login the system
Scenario: Register an account successfully
Given I open the website http://localhost/demo/
Then I verify that welcome page is appeared
When I click Register button
Then I verify that register page is appeared
When I register with first name as Thuy, last name as
Nguyen, username as tixiuthu, password as 123456
Then I verify that system shows the Registration successful
Getting familiar with Cucumber

23. Getting familiar with Cucumber
Feature: Register Account
As a user of Fusion website,
I want to create an account
So that I have to login the system
Background:
Given I open the website <website>
Then I verify that add customer screen appears
Scenario Outline: Register an account successfully
When I click Register button
Then I verify that register page is appeared
When I register with first name as <firstname>, lastname as <lastname>, username as
<username>, password as <password>
Then I verify that system shows the <message>
Examples:
| website | firstname | lastname | username | password | message
|
| http://localhost/demo/ | Thuy | Nguyen | tixiuthu | 123456 | Registration successful |
| http://localhost/demo/ | Khue | Tran | ketr | 123456 | Registration successful |

24. • Code Structure
Using POM with protractor and cucumber
• package.jscon, package-lock.json :
get the dependences
• conf.js: the configuration file
• add_customer.feature: feature file
• add_customer_steps.js: definition file
• add_customer_page.js: page file

25. • Report
Using POM with protractor and cucumber

26. (25’)
In each team, we can implement more
features based on the existed features
in codes. Our supporters will guide and
explain more codes.
After finishing, each team has a short
demo
PRACTICE

27. Using POM with protractor and cucumber