E2E automation testing framework for angularJS web apps - Workshop preso for Meetup

1. 1
Kapil Sethi
kapil.sethi9@gmail.com
Jagannath
vjagannath09@gmail.com

2. 2
About Us…
• Quality Analysts
• Automation enthusiast
• Worked with

3. 3
Protractor Introduction
• E2E testing framework for Angular JS Web apps
• Wrapper around WebDriverJS
• Takes advantage of selenium grid to run multiple
browser at once
• Uses javascript test frameworks like Jasmine, Mocha
to write test suites

4. 4
Protractor Set-up
• Install node.js
• Check the node.js version – node --version
• Check npm version - npm -v

5. 5
Protractor Set-up
• Install JDK
• Check java version - java -version
• Install protractor - npm install -g protractor
• Check protractor version – protractor --version

6. 6
Protractor Set-up
• Run webdriver-manager update
• Check webdriver manager is updated – webdriver-
manager status
• Start selenium server – webdriver-manager start

7. 7
Writing First Protractor Test
• Protractor uses Jasmine test framework for its
testing interface
• Protractor needs 2 files to run, a 'spec' and a
'configuration' file

8. 8
Sample Conf File
exports.config = {
framework: 'jasmine2',
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: [
'*-spec.js'],
capabilities: {
browserName: 'chrome'}
};

9. 9
Running Against Different Browsers
exports.config = {
framework: 'jasmine2',
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: [
'*-spec.js'],
capabilities: {
browserName: 'firefox'}
};

10. 10
Running Tests In Parallel
exports.config = {
framweork: "jasmine2",
seleniumAddress: "http://localhost:4444/wd/hub",
specs: [
'*-spec.js'],
capabilities:{
browserName: 'chrome',
shardTestFiles: true,
maxInstances: 2,
},
};

11. 11
Running Tests with DirectConnect
exports.config = {
framweork: "jasmine2",
//seleniumAddress: "http://localhost:4444/wd/hub",
specs: [
'*-spec.js'],
capabilities:{
browserName: 'chrome',
shardTestFiles: true,
maxInstances: 2,
},
};

12. 12
Running Tests in Headless Mode
• Install phantomjs - npm install phantomjs
exports.config = {
framweork: "jasmine2",
seleniumAddress: "http://localhost:4444/wd/hub",
specs: [
'*-spec.js'],
capabilities:{
browserName: 'phantomjs',
'phantomjs.binary.path': require('phantomjs').path,
shardTestFiles: true,
maxInstances: 2,
},
};

13. 13
References
Readings:
• Tutorial:
• https://angular.github.io/protractor/#/
• Config:
• https://github.com/angular/protractor/blob/master/docs/refer
enceConf.js
• Timeout:
• https://github.com/angular/protractor/blob/master/docs/time
outs.md
• Code:
• https://github.com/qabrains/ProtractorTests