How to Debug Protractor Tests in Visual Studio Code?

Debugging is one of the main features of any IDE, It’s quite difficult to understand the issue without debugging. Sometimes especially for Javascript/Typescript to enable debug feature we need a complex set up. Fortunately, Visual Studio Code Supports debugging for Typescript/Javascript based applications. Since Protractor falls in this category we can debug protractor tests too using VSCode. Debugging feature needs some Simple and Easy configuration. In this article, I have illustrated step by step guide to set up debug configuration for protractor tests/specs using VSCode.

Create launch.json file

Create launch.json file

In Visual Studio Code Navigate to Debug Menu > Click on Add Configuration

Choose Node.js from Select Environment Section

Launch.json file will be created with default values like below

Default launch.json file created by VSCode

Above is default launch.json file which is created by VSCode, This might not work as is always. So we need to configure according to our project set up.

Provide correct value for the program option.

Program: Program option specifies usually tool which we rely on to run the tests. So in our case its protractor, usually, the protractor is located inside node_modules directory in your project. So we need to specify the relative path to protractor. Below is an example.

“program”: “${workspaceFolder}\\node_modules\\protractor\\bin\\protractor”,

In order to execute the protractor test, we need to mention config file, That is mentioned as an argument. In launch.json file its args

“args”:[“${workspaceFolder}\\conf.js”],

Please remember conf.js is your protractor configuration file, You need to specify the relative path where it is located.

Below is the Example of Sample launch.json File

Your Launch file is ready.

Now, You can put the breakpoint in your spec file and hit F5. Control should stop in your breakpoint. Alternatively, you can choose Debug > Start Debugging in VSCode Menu User Interface.

Commonly Experienced Errors.

1. Error message: Could not find update-config.json. Run ‘webdriver-manager update’ to download binaries.

Solution:

Navigate to ~\node_modules\.bin folder and Open Command Prompt here, Type webdriver-manager update (Please note that it’s not bin, its .bin folder)

2. Visual Studio Code debugger doesn’t stop at breakpoints

This is one of the common issues that we face. You have created the launch.json file and you have set the breakpoint in VSCode but when you start debugging, the breakpoint is just ignored that is control just doesn’t stop at the breakpoint and it continues. This issue is mainly observed if you are using typescript and protractor.

Resolving the above Issue

The main reason for this issue is your tsconfig.json file. tsconfig.json file contains compilerOptions under that we have a set of values. Ensure that you have defined correct values for below parameters

outDir : This Redirects output structure to the directory, i.e compiled typescript(.ts) files will be saved in this directory as javascript (.js) file (Refer image below).

mapRoot : This is the main section for debugging in VSCode. This option Specifies the location where debugger should locate map files instead of generated locations. Use this flag if the .map files will be located at run-time in a different location than the .js files. The location specified will be embedded in the sourceMap to direct the debugger where the map files will be located. Usually, it will be the same as outDir value (Refer image below).

sourceMap : Generates corresponding .map file, Default is false, make it true. (Refer image below).

Below is the example of tsconfig.json file

The said issue should resolve if you have set all three compiler options correctly.

You may also face issues in below cases

1. If protractor installed globally i.e using npm install — g protractor sometimes VSCode doesn’t pick the protractor so it is recommended to install protractor locally using npm install — save protractor
2. Incorrect program in launch.json or Incorrect directory, Always ensure that you have specified correct relative path for the protractor in program option. If VSCode can’t locate the specified program in a specified location it will not be able to execute any tests.

Visual Studio Code Keyboard Shortcut for Debugging

F9 : Toggle Breakpoint
F5 : Start
F5 : Continue
Ctrl+F5 : Start Without Debugging
F6 : Pause
F11 : Step Into
Shift+F11 : Step Out
F10 : Step Over
Shift+F5 : Stop
Ctrl+K Ctrl+I : Show Hover