Protractor Configuration with VSCode

On previous post we have configured Eclipse with Protractor but we could not configure with latest version of node.js.

To overcome this issue here we will learn to configure VSCode

Step1:

Download node.js from here.

Now install node.js after clicking on few next button.

We can verify the installation of the Node.Js using the following commands.

• node -v or we can use node --version 
• npm -v or we can use npm –version

Step 2:

Now we need to install protractor on our machine using the following command     

npm install -g protractor or npm -g protractor@version

After installation we can find Protractor directory under this location

Now we need to type the following command to download drivers to run our script on firefox or chrome

webdriver-manager update

After executing this command drivers should be downloaded under the following path.

Step3:

Download VSCode from here.

Install it after few click on next button.

Step 4:
Install the following plugins for protractor.

Step 5:

Now we need to import the workspace in VSCode. To open the workspace we can follow any one step from below

• Create WorkSpace Folder and browse it from VS code.
• Create WorkSpace Folder and drag and drop to Editor.
• Navigate to VScode WorkSpace from cmd and type code

Step6:

Copy this following 2 files from the below location and keep it under newly created project directory in VSCode.

We will discuss it later in details of these 2 files for now we can say cong.js is require for protractor configuration and example_spec.js is for testcases.

Copy the protractor modules to VSCode project folder structure.

Step 7:

Click on debug option from side bar and from top menu bar option select the option start without debugging.

Now the default launch.json file will be created and we will modify it as mentioned below

{

    // Use IntelliSense to learn about possible attributes.

    // Hover to view descriptions of existing attributes.

    // For more information, visit: https://go.microsoft.com/fwlink/?link...

    "version": "0.2.0",

    "configurations": [

        {

            "name": "ng e2e",

            "type": "node",

            "request": "launch",

            "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",

            "protocol": "inspector",

            "args": ["${workspaceFolder}/e2eTest/config/conf.js"]

          }

    ]

}