Protractor with visual studio code and javaScript/typeScript

Pre – Requisites:

Visual Studio Code Installed

Node Js Installed

(All commands will be in italics)

Setup of Project :

Steps:

Open Visual Studio code and add new folder.

Step 2 : Init the npm for the package.json file.

Open Terminal from Terminal – > New Terminal

Use below command

npm init

Enter all details – some dummy details, for lisence details you can simply hit enter to generate dummy configuration

After all select yes.

Now you will see the package.json file in the left

Now install protractor locally with following command

npm install –save protractor

if you see below error change the protractor to protractor 2 in the json file and try again

Install

npm install –save jasmine

Install

npm install –save typescript

Create new folder called specs

Create folder inside specs and keep driver inside it.

Now its time to create tsconfig.json file for the configuration of type script.

{

    “compilerOptions”: {

       //ts “module”:”commonjs”,

        “noImplicitAny”: true,

        “removeComments”: true,

        “preserveConstEnums”: true,

        “moduleResolution”: “node”,

        “sourceMap”: true,

        “types”:[“jasmine”]

    },

    “typeRoots”: [

        “node_modules/@types”

      ],

    “exclude”: [

       “node_modules”,

        “**/*.spec.ts”

    ]

}

Tsconfig.json file is configuration of the tsc compiler.

We are going to use typescript and typescript compiler to compile the code and convert to java script.

Now create the script for our selenium test with scripts.ts in the specs.

Once we start writing the test we don’t see this in the code console, only type script and jasmine are seen. Let us fix this.

Install

npm install -d @types/jest

update the package.json file with below content.

{

  “name”: “typescript”,

  “version”: “1.1.0”,

  “description”: “test”,

  “main”: “config.js”,

  “dependencies”: {

    “@types/jasmine”: “^3.5.11”,

    “@types/jest”: “^26.0.3”,

    “@types/mocha”: “^7.0.2”,

    “jasmine”: “^3.5.0”,

    “protractor”: “^7.0.0”,

    “typescript”: “^3.9.5”

  },

  “devDependencies”: {},

  “scripts”: {

    “test”: “test”

  },

  “repository”: {

    “type”: “git”,

    “url”: “test”

  },

  “keywords”: [

    “test”

  ],

  “author”: “test”,

  “license”: “ISC”

}

Also re-install the protractor, if its not got installed already.

npm install –save protractor

 now create test script which opens the google and enters some text.

import {browser, element, by} from ‘protractor’

import {} from ‘jasmine’

    describe(‘sanity’, ()=>

    {

        it(‘expected valuidations’, ()=>

        {

            browser.ignoreSynchronization=true;

            //browser.manage().timeouts().pageLoadTimeout(180000);

            browser.get(‘http://google.com’,100000).then(()=>console.log(‘browserOPened’)).then(

                ()=>

                {

                    browser.getTitle().then((title:string)=>console.log(title));

                }

            ).then ( ()=>

            {

                element(by.name(‘q’)).sendKeys(‘ConsolidatedChoas’).then( ()=>

                {

                    element(by.name(‘btnK’)).click();

        });

        }

        )

    });

})

Now we need to convert this to java script code wit tsc

Run following command and observe the changes.

tsc

Now the code gets compiled and you see new file gets generated in the folder.

Now to run the protractor, we need config.js file which tells the chrome browser for to take the options and capabilities.

Config.js — below

exports.config = {

    // launch locally when fields directConnect and seleniumAddress are not provided

    chromeDriver: ‘./specs/driver/chromedriver.exe’,

    specs: [‘./specs/scripts.js’],

    capabilities: {

      browserName: ‘chrome’,

      chromeOptions: {

        args: [“–headless”, “–disable-gpu”, “–window-size=800×600”]

    }

    }

  }

Now we are all ready to run our first script.

For running follow below step.

Protractor config.js

The result should display as below.

Points to be Noted:

  • Package.json must have all the modules you are using for compiler to understand
  • Tsconfig.json must have include and exclude what you want to include exclude while compiling the code
  • MOST IMPORTANTLY EVERY TIME YOU MAKE CHANGES TO TYPESCRIPT FILE, YOU NEED TO USE TSC COMMAND TO REGENERATE THE JAVA SCRIPT FILES.
  • The chrome can be invoked headless or with UI, in this we illustrated headless mode.
  • Check the modules, types that are listed in config files and make sure that you have those in the npm_modules folder for verification.
  • Following is link for the git project.