Why Protractor ?

You do not need selenium knowledge to learn protractor and Jasmine

Protractor is a test framework for Angular JS applications which uses Selenium to automate the browser behaviour (Protractor uses JS but still communicates with Selenium using WebDriverJS) .

It’s true you could still use Selenium Web Server API as an alternative to Protractor (with a language of your choice that’s supported) to talk to the Selenium Server, but you will have overheads to handle asynchronous process

This might not be the best choice for non-angular applications because you may prefer more specific synchronization approaches and the API might not be as flexible as you need.

Protractor allows tests to be organized based on Jasmine, thus allowing you to write both unit and functional tests on Jasmine.

Protractor is open source framework specifically for automation of AngularJS applications although it can be used to automate non-angular web based applications. So in case your application is designed using AngularJS for the front end, so it would be recommended to use Protractor

Pre-Requsites for Protractor

VS Code :


1. Install VSCode, VSCode is nothing but another version of Visual Studio but available for free.

2. Navigate to https://code.visualstudio.com/

3. Click download button

4. Download the VSCode software according to your operating system.

VSCode-download-protractor

5. Install the VScode like any other exe file, go along with the recommended setting only.

6. Launch the VSCode, and UI will look like below. VSCode-ui-protractor

Install NodeJs

We would be using end language as Javascript, so we must install NodeJs for using supporting functions and supporting packages.

1. Navigate to : https://nodejs.org/en/download/

2. Download the package according to your operating system. install-nodeja-protractor 3. Install the downloaded NodeJs file.

4. Once installation is complete, open cmd and type node, if cmd doesnot throw any error then NodeJS got installed successfully.

nodejs-successful-installtion-protractor

Install Protractor

In Java selenium, we would be using Selenium standalone jar file for executing the selenium, sometimes we may also use selenium-java jar fil.

In case of Protractor we would be installing a npm package called protractor and we would be using selenium standalone server jar as server for executing the protractor.

1. You can install all the packages from the VS code itself.

2. Open VSCode and click View -> Integrated Terminal

3. Navigate to the folder on which you want to install the protractor, if you are going in local installation.

4. Install the Protractor using below command for global installation


									npm install protractor -g
											OR
									npm i protractor -g
									


5. For Local installation you should use above command without -g


									npm install protractor
											OR
									npm i protractor
									


6. Global installation : Global installation is nothing but package will be installed at user level and available in all folder of your file system, you can find these packages at %appdata%/roaming/npm/node_modules

7. Local Installation : The package we install is available only to a particular folder.

8. I am installing Locally, I would recommend you to install locally installtion-protractor-VSCode 9. If everything installed successfully then you should see the stupid yellow messages.
Protractor is installed in : C:\Users\user\AppData\Roaming\npm\node_modules succesful-installation-protractor

Install Jasmine

Jasmine is an automated unit testing framework for JavaScript

few people may say : Jasmin is a Jasmine follows Behavior Driven Development (BDD) framework and which is nicely integrated with angular.js

jasmine keeps you User stories and test cases as different entities so that you can keep map of manual and automation testcases.

This is just introduction page, we are having different chapter to discuss about the Jasmine framework with protractor.

install Jasmine using below command.


									# Global installation 
									npm install jasmine			
									


jasmine-installtion-protractor-vscode We have to install the dependency file for jasmine, otherwise you face import error for 'describe', 'it', 'expect' statements.


									npm install --save-dev @types/jasmine		
									


install-jamine-devs-protractor-decribe-it-expect-error

Install Typescript

TypeScript is a superset of the JavaScript language, typescript will provide more functionalities than javascript along with javascript functionalities

JavaScript is more or less the programming language of the web. It is one of the few languages you can use to create animations, dynamic content, games and pretty much anything else you can imagine, and run it on a website.

You can use javascript write the protractor code.

It has been developed by Microsoft as an extension to JavaScript, that means that all valid JavaScript code is also valid TypeScript code.

You can write javascript code inside Typescript code, and typescript will not complain about it

In addition, TypeScript provided certain features, such as classes, before they were formally added into JavaScript.

Typescript is scripting language with Object Oriented Programming structure

I recommend you to use TypeScript on top of JavaScript. It will save you a ton of time in the long run.

If you are familiar with any OOP language, it would become easier for you to lean typescript

End of the day, Typescript will be converted into JavaScript and will get executed.


To install typescript, we have to enter below command in the terminal


									npm install typescript			
									


install-typescript-protractor

Install Jars and exe files

We can install all the required Jars and Exe files using the below command


									webdriver-manager update			
									


webdriver-manager-update-protractor

Integrate Protractor with VSCode

1. Click Explorer option in VSCode: file-explorer-vscode-protractor 1. Click folder icon and create a folder called Specs, which will contain all our test cases. 3. Right click on the specs folder and select New File newfile-explorer-vscode-protractor 4. Name the file as test.ts [ We are using Typescript language] file-created-vscode-selenium 5. Just simply create a sample print statement inside the test.ts file sample-typescript-vscode-protractor 6. As I explained earlier, we have to convert the TS files into JS files.
We can use below command in the terminal to compile the existing files.


									tsc test.ts		// earlier i wrote tsc -test.ts, it was a mistake from my side.	
									


js-file-created-vscode-protractor 7. Now copy paste below code into the test.ts file.


									import { browser} from 'protractor'
									describe('Protractor Typescript Demo', function() {
										it('title verifications', function() {
										  browser.get('https://angularjs.org/');
										  browser.getTitle().then(function(title){
											console.log("The title is  : "+title)
											browser.sleep(5000);
										  })
										});
									});			
									


8. Create a new file called conf.js outside the specs folder and enter below content


									exports.config = {
									  // launch locally when fields directConnect and seleniumAddress are not provided
									  chromeDriver: 'D:/Eclipse progs/driverserver/chromedriver.exe',
									  seleniumServerJar: 'D:/Eclipse progs/jars/selenium-server-standalone-3.11.0.jar',
									  specs: ['D:\\Protractor\\JSFilesLocation\\test.js'],
									  capabilities: {
										browserName: 'chrome'
									  }
									}			
									


You can start the run from the cmd, by writing like below but after compiling the TS files:


									protractor ConfFilePath/conf.js			
									

tsconfig.json

Few steps back we have compiled the ts file using 'tsc' command, do you prefer doing that for every change and for every files.

I donot know about your, but I donot prefer it. So with tsconfig.json help we can minimize the amount of compilation effort.

tsconfig will have all the details like what to compile and what not to compile, if we compile when do we need to save the compiled files, to standard we have to compile (es5, es6 like that).

In below file I am compiling all the TS files into Js files and placing them on JSFilesLocation folder

I am ignoring the files present in the node_modules folder, compilation will create exact folder structure in js files like TS files


									{
										"compilerOptions": {
										  "target": "es6",
										  "module": "commonjs",
										  "moduleResolution": "node",
										  "inlineSourceMap": true,
										  "declaration": false,
										  "noImplicitAny": false,
										  "outDir": "JSFilesLocation"
										},
										"exclude": [
										  "node_modules"
										]
									}			
									


Important : For starting compiling the existing changes and upcoming changes we have use below command, on the directory where you have placed above tsconfig.json file.

You have to run this command when you open your VSCode (everyday, I forget to do so, but you donot)

									tsc -w			
									


tsc-w-compile-typescript-protractor

SetUp Launch.json

Unlike other Major editor, Vscode provides the launch configurations using json format file.

We have to provide details like where is out protractor location and the conf.js file location.

conf.js file is the trigger for the Protractor framework.

Create a folder called .vscode, all the launch configurations should be present in this folder. Yes, this is an hidden folder

Inside .vscode folder crate a file called Launch.json and paste the below content into it.


									{
									  "version": "0.2.0",
									  "configurations": [
										{
										  "type": "node",
										  "request": "launch",
										  "name": "Launch Program",
										  "program": "C:/Users/user/AppData/Roaming/npm/node_modules/protractor/bin/protractor",
										  "args": ["${workspaceRoot}/JSFilesLocation/conf.js"]
										}
									  ]
									}			
									


laucnh-vscode-protractor-jasmine For running protractor/conf,js file , all you have to do is, press the run button under debug tab on VS code. run-protractor-typescript

Donot repeat my mistakes

While I was writing this tutorial, I have made few mistakes while setting up the above VScode protractor, below are the mistakes I hbeacuse ave made.

  • I have installed protractor Globally, but when we integrate the global protractor with IDE you may face import error, so install protractor on your folder level
  • I have downloaded only the Jasmine but forgot to add the dependencies because of which i was facing import errors for describe, it, and expect statement
  • I was running the code without compilation
  • I didnot give correct test and conf file path

 
Join My Facebook Group
Join Group
 

About Author

Myself KarthiQ, I am the author of this blog, I know ways to write a good article but some how I donot have the skills to make it to reach people, would you like help me to reach more people By sharing this Article in the social media.

Share this Article Facebook
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions
  • karthiQ [ admin]
    Hi Vijay,
    
    Due special character present in you message, out commenting system was not able to accept your comment:
    
    1. You need to navigate to folder where tsconfig.json is present then type tsc -w
    2. before that check you have installed nodejs
    Reply
  •  
    Selenium-Webdriver.Com [Group]
    Facebook Group · 801 members
    Join Group
    Learn Selenium Webdriver Concepts and Interview Questions Learn and code
     
    Copyright © CherCher Tech