How to Debug Protractor Tests in Visual Studio Code?
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
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.
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
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.
- Error message: Could not find update-config.json. Run ‘webdriver-manager update’ to download binaries.
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
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
- 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
- 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