Protractor setup with jasmine & typescript in VScode

Refer protractor intro to get some insights, if you are new to protractor.

We will use typescript as our language to write protractor tests with jasmine framework.

Let’s see one by one all the libraries needed to run protractor tests.

 

Typescript in visual studio code

Typescript is super set of java script with advantages like

• • Purely OOPs – makes easier to work with class and modules
  • Static type checking
  • enum  and const support
  • Provides compilation error which makes easy correction before run
  • Offers a compiler that converts to java script code

• Several IDEs [like VSCode] supports code Intellisense

Refer setup and run typescript in VScode  and try to run a .ts file in VScode.

 

Note

Create a folder under C:\ drive, let’s say C:\Protractor\Test and open the folder in VSCode to get started with. – this process needs to be done first, from here we will install all libraries.

 

Install Protractor

As we know protractor is a node.js program, so we can install protractor using npm command

To install protractor globally and access from any folder location, Go to Start > Run > cmd and type

npm install -g protractor

this above statement downloads protractor package,and also installs 2 command line tools (like npm), protractor and webdriver-manager

Note: protractor package / folder will be downloaded and viewed under %appdata%\npm\protractor

protractor command is used to run the *.js file i.e conf.js

webdriver-manager command is used to update or start the selenium server and related browser drivers

 

Install Jasmine

To run tests in typescript, need to install type definitions for Jasmine, to do this, on VS Code, Key press CTRL + ` and enter

npm install @types/jasmine

and

npm install @types/jasminewd2

 

Install ts-node

npm install @types/node

 

package.json

To create a sample package.json, to open terminal – key press ctrl + `

and type

npm init -f

or

you can create a new file package.json and the content should be something like below

{
  "name": "example-typescript",
  "version": "1.0.0",
  "description": "a typescript example",
  "author": "",
  "license": "MIT",
  "scripts": {
  "tsc": "tsc",
  "pretest": "npm run tsc",
  "test": "protractor ConvertedJSfiles/conf.js"
},
"dependencies": {
  "@types/jasmine": "^2.5.47",
  "@types/jasminewd2": "^2.0.0",
  "jasmine": "^2.4.1",
  "protractor": "5.1.2",
  "typescript": "~2.1.6"
},
"devDependencies": {
  "@types/core-js": "^0.9.41",
  "@types/jasmine": "^2.5.51",
  "@types/jasminewd2": "^2.0.2",
  "npm-run-all": "^4.0.2",
  "ts-node": "^3.0.2"
}
}

dependencies section is for global installation.
devDependencies section is for local installation,

Either you can install individual libraries by using npm [as mentioned before] or mention in json file [ when we do npm install, will download all the libraries with specified versions].

Follow package.json docs for more format and options.

 

tsconfig.json

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

Note:
tsc is used to compile / transpile *.ts (typescript file) and convert to *.js file (.js file will be created under the folder specified under tsconfig.json i.e ConvertedJSfiles)

npm test will execute the value (protractor ConvertedJSfiles/conf.js) as mentioned under “test” (from package.json)