Luis Hernandez
Developer
lhernandez@nearsoft.com
Protractor is an open source E2E testing automation framework, designed specifically for AngularJS web applications. The Protractor automation tool is a Node.js program built on top of WebDriverJS.
Protractor works as a Solution integrator, combining powerful technologies like Node.js, Jasmine, Selenium, Mocha, Cucumber, and Web driver.
Testing system (NodeJS, Java, etc)
|
Webdriver (a.k.a. Selenium)
|
Your AngularJS App
" Testing is about gaining confidence that your code does what you think it should do"
$ sudo npm install protractor -g
$ sudo webdriver-manager update
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
capabilities: {
'browserName': 'chrome'
},
specs: ['example-spec.js'],
jasmineNodeOpts: {
showColors: true
}
};
describe('by model', function() {
it('should find an element by text input model', function() {
var username = element(by.model('username'));
var name = element(by.binding('username'));
username.clear();
expect(name.getText()).toEqual('');
username.sendKeys('Jane Doe');
expect(name.getText()).toEqual('Jane Doe');
});
});
browser: browser.get()
element and by: element(by.model('yourName'))
protractor: protractor.Key
// example-spec.js
describe('angularjs homepage', function() {
it('should greet the named user', function() {
browser.get('http://www.angularjs.org');
element(by.model('yourName')).sendKeys('Julie');
var greeting = element(by.binding('yourName'));
expect(greeting.getText()).toEqual('Hello Julie!');
});
});
First things first, open the terminal and start the webdriver server:
webdriver-manager start
After that, you can run Protractor in another terminal by typing:
protractor test/e2e/config.js // this is the relative path to your config.js file
Single element
element( by.binding('appName') );
Collection of elements
element.all( by.css('[ng-click="openPage()"]') ).get(2).click();
In your test
element( by.binding('myModel') );
In your application
<span ng-bind="myModel"></span>
<!-- or -->
<span>{{myModel}}</span>
In your test
element( by.css('[ng-click="sendMail()"]') );
In your application
<button ng-click="sendMail()">Send mail!</button>
element( by.css('[ng-click="submit()"]') ).click();
<button ng-click="submit()"><button>
element( by.model('commentText') ).sendKeys("Hi!", protractor.Key.ENTER);
<textarea ng-model="commentText"><textarea>
// Example of getText() promise
element( by.model('zipcode') ).getText()
.then(function(val) {
var num = val.substring(0, 4);
var isNum = !isNaN(num);
expect( isNum ).toBeTruthy();
});
WebDriverJS maintains a queue of pending promises, called the control flow, to keep execution organized.
it('should find an element by text input model', function() {
browser.get('#/home'); // (1) method browser.get
// (2) method by.binding
var login = element(by.binding('login'));
// (3) method getText
expect(login.getText()).toEqual('User');
});
projectfolder/
|-- css/
|-- js/
|-- img/
|-- tests/
|-- unit/
|-- e2e/
| |-- homepage/
| | |-- homepage.po.js
| | |-- *.spec.js
| |-- profile/
| | |-- profile.po.js
| | |-- *.spec.js
| |-- config.js
var AngularHomepage = function() {
this.nameInput = element(by.model('yourName'));
this.greeting = element(by.binding('yourName'));
this.get = function() {
browser.get('http://www.angularjs.org');
};
this.setName = function(name) {
this.nameInput.sendKeys(name);
};
};
var AngularHomepage = function() {
this.nameInput = element(by.model('yourName'));
this.greeting = element(by.binding('yourName'));
// ...
};
module.exports = AngularHomepage;
var AngularHomepage = require('./homepage.po.js');
describe('HomePage Tests', function() {
var angularHomepage = new AngularHomepage();
angularHomepage.nameInput.sendKeys('Rafael');
//...
});
Your Page Object file
Your Test file
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
capabilities: { 'browserName': 'chrome' },
suites: {
homepage: 'tests/e2e/homepage/**/*Spec.js',
search: ['tests/e2e/contact_search/**/*Spec.js']
},
jasmineNodeOpts: { showColors: true }
};
protractor protractor.conf.js --suite homepage
Your Page Object file
Running specific suite of tests
You only need to access the webdriver instance by using browser.driver:
browser.driver.findElement(by.css('[data-ptor="submit-btn"]'));
conf.js
onPrepare: function() {
global.dvr = browser.driver;
}
test
dvr.findElement(by.css('[data-ptor="submit-btn"]'));
tests
beforeEach(function() {
return browser.ignoreSynchronization = true;
});
conf.js
onPrepare: function() {
global.isAngularSite = function(flag) {
browser.ignoreSynchronization = !flag;
};
}
tests
beforeEach(function() {
isAngularSite(false); // isAngularSite(true), if it's an Angular app!
});
conf.js
onPrepare: function() {
global.isAngularSite = function(flag) {
browser.ignoreSynchronization = !flag;
};
}
tests
beforeEach(function() {
isAngularSite(false); // isAngularSite(true), if it's an Angular app!
});
http://ramonvictor.github.io/protractor/slides/