Steps to Test an Angular Website using Protractor
Step 1:- Install and Setup Protractor on Windows Machine Link
Step 2:- Download WebStorm Link
Step 3:- Install and Setup WebStorm
Step 4:- Launch WebStorm
Step 5:- Click on File –> New –> Project
Step 6:- Select “Empty Project”
Step 7:- Enter the desired name of the project. e.g. Demo
Step 8:- Click on “Create”.
Step 9:- Now create a new directory under your project.
Select Your project –> Right Click on New –> Click on Directory –> Enter the desired name of your Directory
Here the name of the directory is DemoDirectory
Step 10:- Create a new “JavaScript file” under the newly created directory and name them conf.js
Step 11:- Create a new sub-directory under the directory “DemoDirectory” . Here the name of the sub-directory is fame1
Step 12:- Now add two JavaScript file under sub-directory fame1, login.po and login.spec respectively. Complete Structure of the Demo project is shown below:-
Step 13:- login.po.js file is used as an Object Repository where you can add the page objects as well as the actions performed on that objects.
Step 14:- login.spec.js file is used to create test cases.
Steps 15:- Setup of conf.js file
/** | |
* Created by Keshav on 6/9/2016. | |
* Configuration File Use By Protractor | |
* | |
*/ | |
exports.config = { | |
seleniumAddress: 'http://localhost:4444/wd/hub', | |
getPageTimeout: 95000, | |
capabilities: { | |
'browserName': 'chrome' //Name of the Browser on which you wants to run the test cases | |
}, | |
suites: { | |
Login: '../Demo/DemoDirectory/fame1/login.spec.js' //Test Case Location with their names | |
}, | |
jasmineNodeOpts: { | |
showColors: true | |
}, | |
baseUrl: 'https://fame.live/', //Base URL on which you wants to perform test | |
//Parameters Used as Test Input | |
params:{ | |
userName : 'ikeshav',password : '123456' | |
} | |
}; |
Steps 16:- Setup of login.po file
/** | |
* Created by Keshav on 6/9/2016. | |
* login.po.js file | |
*/ | |
var loginPage = function(){ | |
var params = browser.params; | |
//Object Locators | |
function loginPage() | |
{ | |
this.loginFame=element( by.css('[ng-click="loginDialog()"]') ); //Login Button Locator | |
this.loginEmail=element(by.model('email')); //Email Box Locator | |
this.loginPassword=element(by.model('password')); //Password Box Locator | |
this.loginSubmit=element(by.css('[ng-click="submit()"]')); //Submit Button Locator | |
} | |
loginPage.prototype.manualLogin = function (userName , password) // No datatypes required | |
{ | |
console.log("Entered inside manual——— "); //To print any desired value on Console | |
this.loginFame.click(); //Perform Click on Famelogin | |
this.loginEmail.sendKeys(userName); //Enters Username into Email field | |
this.loginPassword.sendKeys(password); //Enters Password into Email field | |
this.loginSubmit.click(); //Click on Submit Button | |
}; | |
return loginPage; | |
}(); | |
module.exports= loginPage; //To use the above mentioned function in another file |
Steps 17:- Setup of login.spec file
/** | |
* Created by Keshav on 6/9/2016. | |
* login.spec.js file | |
*/ | |
var loginPage = require('./../fame1/login.po.js'); | |
var beforeScenario=require('./../fame1/beforeTest.js') | |
describe('FameLiv HomePage', function() | |
{ | |
var params = browser.params; | |
var loginObject; | |
beforeEach(function () { | |
console.log("In before each"); | |
//isAngularSite(false); | |
var abc = new beforeScenario(); | |
abc.loginIntoFameApp(params.userName,params.password); | |
}); | |
afterEach(function () { | |
browser.manage().deleteAllCookies(); | |
console.log('cookies deleted successfully'); | |
console.log('********************************************************'); | |
browser.driver.sleep(500); | |
}); | |
//Test Case 1 | |
//If you don't wants to run a test case put "x" before it | |
xit('Manual Login Test', function() | |
{ | |
var loginO = new loginPage(); | |
loginO.manualLogin(params.userName,params.password); | |
console.log("first Test Case"); | |
browser.driver.sleep(5000); | |
}); | |
//Test Case 2 | |
it('Manual Login Test', function() | |
{ | |
console.log("first Test Case"); | |
browser.driver.sleep(5000); | |
}); | |
}); |
Steps 18:- Now your basic project code with their config file is setup.
Steps 19:- To run a Protractor Project, we have to update the selenium server first using below mentioned command in command prompt
webdriver-manager update
Steps 20:- After updating the webdriver-manager , we have to start it using below mentioned command in command prompt
webdriver-manager start
Steps 21:- Once the server is started, open a new command prompt and go to the specified location of the project and enter below mentioned command to run the Protractor project
C:UsersVikasWebstormProjectsDemo>protractor conf.js
After following all the above mentioned steps you will be able to run your first test successfully.