How to start with protractor

Guys,

Today we will see how to start up with protractor for your angularjs projects..

Prerequisites are nodejs and jasmine.

You can work with Jasmine and Protractor combination for end to end testing..similarly for unit testing you can work with jasmine and karma

Follow the steps from protractor guide

Now create a folder like end-end-testing like that and create the following files..

1. protractor.conf.js

exports.config = {

specs: [
// ‘./end-end-testing/**/*.js’
‘responsive_spec.js’
],

baseUrl: ‘http://localhost:8080/’,
capabilities: {
‘browserName’: ‘firefox’,
‘binary’: ‘C:/Program Files (x86)/Mozilla Firefox/firefox.exe’
},
};

responsive_spec.js:

describe(‘project homepage’, function() {

browser.driver.manage().window().setSize(400, 600);
var ptor = protractor.getInstance();
browser.get(‘https://application-url’);
it(‘Page description.’, function() {

expect(element(by.id(‘element_id’)).getText()).
toEqual(‘element_id description.’); // This is Correct!
}); // end of it() page description
it(‘Contact page’, function() {

element(by.id(‘Name’)).sendKeys(‘Your Name’); //name filling in textbox

element(by.id(‘HomeAddress’)).sendKeys(’24-9-888,nellore’);
element(by.id(‘zipcode’)).sendKeys(‘524121); // text box filling

ptor.findElement(protractor.By.css(‘option[value=”1″]’)).click(); //select option set
element(by.id(‘someid’)).all(by.tagName(‘md-radio-button’)).get(1).click(); //radio button set
ptor.selectOption = selectOption.bind(ptor);
ptor.selectOption(protractor.By.id(‘select_id_country’), ‘India’); //set select id alternative

// button click code

element(by.css(‘button.go’)).click();
browser.findElement(by.css(‘button.go’));
}); // end of it() – contact page

}); // end of describe

If you want to run only one module say contact page it()..then comment browser.get(‘https://application-url’); in describe function and do as follows:

iit(‘Contact page’, function() { //have iit instead of it

browser.get(‘https://application-url/contact-page’); //add this browser.get method for that page alone..

element(by.id(‘Name’)).sendKeys(‘Your Name’); //name filling in textbox

});

How to run??

just go to end-end testing folder where you have protractor.conf.js and responsive_spec.js

then type ‘protractor protractor.conf.js’

browser

The browser variable is a wrapper around the WebDriver instance. We use the browser variable for any navigation or for grabbing any information off the page.

We can use the browser variable to navigate to a page using the get() function:

 Debugging:

browser.debugger();

browser.pause();

If protractor wont run you may have to follow the set up of selenium drivers as shown below..

set path=%path%;.;C:\Program Files (x86)\Java\jre7\bin;
set path=%path%;.;C:\Users\userid\AppData\Roaming\npm;

npm install -g protractor

webdriver-manager update — dont run this command initially, copy 2 jars(below url links downloaded files) from path and paste it in Users/Appdata/Roaming/npm/node_modules/protractor/selenium)
https://selenium-release.storage.googleapis.com/2.44/selenium-server-standalone-2.44.0.jar

https://chromedriver.storage.googleapis.com/2.13/chromedriver_win32.zip

webdriver-manager start
protractor protractor.conf.js — in e2e folfer run this command, it open browser

Hints:

1.If you want to work with radio buttons and its selection that generates dynamically…you can achieve by following code..

var items = element.all(by.css(‘div.inputClass md-radio-group’));
items.count().then(function(count){
console.log(“item count “, count);

for(var i=0;i<count;i++){
browser.sleep(10000);
var controlid = ‘question’ + i;
console.log(“controlid=== “, controlid);
element(by.id(controlid)).
all(by.tagName(‘md-radio-button’)).get(0).click();
}
});

2. if you want to check where the control is..you can do same like in js files by using console.log(); here this will show in your command prompt.

3. you can use browser.sleep(10000) like that to check where the control is..

4. Similarly if you want to check the url where the control presents..try this..

browser.getLocationAbsUrl().then(function(text){
console.log(text);
}) ;

Learn:

https://docs.angularjs.org/guide/e2e-testing

http://angular.github.io/protractor/#/getting-started

http://ramonvictor.github.io/protractor/slides/#/1

http://www.ng-newsletter.com/posts/practical-protractor.html

Advertisements