Steps to Test an Angular Website using Protractor

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

                                 Create a New 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:-

                                      Structure

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'
}
};

view raw
Conf.js
hosted with ❤ by GitHub

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

view raw
login.po.js
hosted with ❤ by GitHub

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);
});
});

view raw
login.spec.js
hosted with ❤ by GitHub

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.

Link to Download or Clone the above code from Git

Leave a Reply

%d bloggers like this: