Why Protractor?

You do not need selenium knowledge to learn protractor and Jasmine

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

Indeed, 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 the 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 the Jasmine Unit test framework, thus allowing you to write both unit and functional tests on Jasmine.

Protractor is an 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

Protractor Interview Questions

Protractor automation tool prerequisites

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.


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

Best IDE for Protractor

Install Protractor Video

Install NodeJs

We would be using end language like 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 the installation is complete, open cmd and type node, if cmd does not throw any error, then NodeJS got installed successfully.


Promise in 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 file.

In the case of Protractor, we would be installing an npm package called protractor, and we would be using selenium standalone server jar as a 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 in which you want to install the protractor if you are going to a local installation.

4. Install the Protractor using below command for global installation

npm install protractor -g
npm i protractor -g

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

npm install protractor
npm i protractor

6. Global installation : Global installation is nothing but the package will be installed at the 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:UsersuserAppDataRoaming pm ode_modules succesful-installation-protractor

Pros and Cons of Protractor

Install Jasmine

Jasmine is an automated unit testing framework for JavaScript

few people may say : Jasmine follows the 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 a map of manual and automation test cases.

This is just an introduction page; we have a different chapter to discuss the Jasmine framework with the protractor.

install Jasmine using the below command.

# Global installation
npm install jasmine


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


Jasmine Unit Testing Framework

Protractor Typescript / 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 to write the protractor code.

Microsoft has developed it as an extension to JavaScript, which 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 will 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 the below command in the terminal.

npm install typescript


Pop Ups in Protractor

Install Jars and exe files

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

webdriver-manager update


Integrate Protractor with VSCode

  1. Click Explorer option in VSCode: file-explorer-vscode-protractor
  2. 1. Click the 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
  3. 4. Name the file as test.ts [ We are using Typescript language] file-created-vscode-selenium
  4. 5. Just simply create a sample print statement inside the test.ts file sample-typescript-vscode-protractor
  5. 6. As I explained earlier, we have to convert the TS files into JS files.
    We can use the 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.


7. Now copy-paste below code into the test.ts file.

import { browser} from 'protractor'
describe('Protractor Typescript Demo', function() {
	it('title verifications', function() {
		console.log("The title is  : "+title)

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:ProtractorJSFilesLocation	est.js'],
  capabilities: {
	browserName: 'chrome'

how to run automation protractor

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

protractor ConfFilePath/conf.js

Create Select class in Protractor


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

I do not know about you, but I do not 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 the standard we have to compile (es5, es6 like that).

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

I am ignoring the files present in the node_modules folder; the compilation will create an 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": [
Important : For starting compiling the existing changes and upcoming changes, we have to use the below command on the directory where you have placed above tsconfig.json file.

You have to run this command when you open your VSCode (every day, I forget to do so, but you do not)
tsc -w


Handle Multiple Windows in Protractor

SetUp Launch.json

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

We have to provide details like where is our 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 a hidden folder.

Inside .vscode folder create 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"]


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

Package.json with Protractor

Don't repeat my mistakes

While I was writing this tutorial, I have made a few mistakes while setting up the above VScode protractor; below are the mistakes I because 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 did not give a correct test and conf file path
  • You will get below error if your protractor is not installed globally, try to install protractor globally to run protractor conf.js otherwise, you might need to provide the correct path of local installation like node path_to_Protractor_bin_Protractor conf.js
    protractor : the term 'protractor' is not recognized as the name of a cmdlet, function, script file, or operable program. check the spelling of the name, or if a path was included, verify that the path is correct and try again.

Protractor Interview Questions

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions
  • Neelam Das
    Hi, I'm using protractor with selenium. I've followed the installation part which you mentioned above. I wrote the below code in a ts file.
    import { browser, element, by } from "protractor";
    export class GooglePO {
        public static searchBar = element(by.name("q"))
        public static searchButton = element(by.name("btnK"))
        // using method
            return element(by.name("btnI"))
    I'm getting the below error while compiling the code.
    error TS2559: Type 'By' has no properties in common with type 'Locator'.
    3     public static searchBar = element(by.name("q"))
    POM_CherChertech/PO/GooglePO.ts:4:42 - error TS2559: Type 'By' has no properties in common with type 'Locator'.
    4     public static searchButton = element(by.name("btnK"))
    POM_CherChertech/PO/GooglePO.ts:7:24 - error TS2559: Type 'By' has no properties in common with type 'Locator'.
    7         return element(by.name("btnI"))
    Please hemp me to resolve this issue. I've restarted my system also, still not working.
  • KSHITIJ Bhargava
    currently, i have just started using visual studio code & BDDs with type script using cucumber framework 
    please  help us to know useful links or tutorials  i.e  finding elements , parameterized testing using BDDs   
  • Aman
    I have i have started protractor to follow above video i am stack in place where you enter then command 'Is' and "tsc -w" for creating a folder of "JSFilesLocation" but in my terminal that command isn't working please solve this issue ASAP.
  • sandeep
    Hi Pavan,
    I am using Java script for protractor and i tried to use "import {browser} from 'protractor'" in the spec files to get the protractor suggestions,it worked but giving error when running the tests.
    could you please help me on this.
    Thank you
  • Kundan Kotanagle
    (function (exports, require, module, __filename, __dirname) { import { browser} from 'protractor
    SyntaxError: Unexpected token {
    i use same code but give error like that
  • Đào Minh Đảm
  • Kavitha
    Hi Pavan, I am new to Selenium and Protractor and I need to select the diagrams inside a canvas and draw them into another canvas. If there is any sample code it will be really helpful for me. Thanks.
    • Author
      Hi kavitha, 
      I donot have code for, please let me know any similar application with Url. So that I can have some idea.
      • Hi Pavan,
        My application looks similar to this - https://app.mindmup.com/map/new/1553476457846. In this application, we have to double click to insert a node where as in mine, I have to drag and drop. Hope I can get some help and sorry for the delayed reply. Thanks. Kavitha
  • Suresh
    I initially asked help - However,I was able to resolve that.
  • Suresh
    Need help:
    I have to see whther a element is present.
    If not, I need to keep clicking a refresh button till the elem is displayed.
    I can verify with IsPresent() promise by using then(),  but if elem not displayed, I need to keep clik refresh button. The time taken by the elem to be displayed varies - from 20 sec to 46 seconds. So after every 5 seconds, I need to verify the IsPresent() and click Refresh button. So I may need to verify 15 times, which is not possible to use the IsPresent() promise - I will end up writing chaining for 15 or more times.
    In protractor + javascript, this is a big problem for me. Any sudo code?
  • Madhu
    I think Code is not compiled. I'm getting the below error. pls have a look. 
    PS D:protractor demo> tsc -w
    tsc : The term 'tsc' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the
    name, or if a path was included, verify that the path is correct and try again.
    At line:1 char:1
    + tsc -w
    + ~~~
        + CategoryInfo          : ObjectNotFound: (tsc:String) [], CommandNotFoundException
        + FullyQualifiedErrorId : CommandNotFoundException
    • admin[Karthiq]
      Hi Madhu,
      Please install typescript globally. 
      npm install typescript -g
      • madhu
        Tnx for the reply admin.
        I'm attempting to run the script as u suggested - It can able to lunch the browser but it doesn't enter the URL. Browser abruptly stopped.
        From Debug Console:-
        C:Program Files
        ode.exe --inspect-brk=32569 node_modulesprotractorinprotractor 'D:protractor demo/conf.js' 
        Debugger listening on ws://127.0.1:32569/df42d3f3-8a1f-4346-93dd-47d291e4399a
        [18:51:35] I/launcher - Running 1 instances of WebDriver
        [18:51:35] I/local - Starting selenium standalone server...
        [18:51:36] I/local - Selenium standalone server started at
        [18:51:40] I/local - Shutting down selenium standalone server.
        [18:51:40] I/launcher - 0 instance(s) of WebDriver still running
        [18:51:40] I/launcher - chrome #01 passed
  • 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