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.