Debug protractor script in Visual Studio Code

  • Article

Selenium is a popular open source project to support web end-to-end automation, especially it supports multiple programming languages, such as C#, Java and Python etc. Protractor is based on selenium webdriverjs and provides progamming support from JavaScript approach. Protractor has handy element location support for angularjs, this has made it very popular.

As protractor is based on Node.js and VS Code has built-in debugging support for Node.js runtime, it is easy to develop and debug protractor script in visual studio code. This article will introduce how to debug the script in vs code.

Prerequisite

Suppose you installed Node.js and configured protractor by "npm install protractor --save-dev". For more script development and basic selenium knowledge, please check with https://www.protractortest.org/

Protractor Configuration

The easiest way to begin with protractor configuration is copy node_modules\protractor\example\conf.js to your source repository. Suppose you have it named to protractor.conf.js and support the following two suites:

suites:{

smoke: 'spec/smoketests/*.js', full: 'spec/full/*.js' },

Create launch.json

Click on the Debugging icon in the View Bar on the side of VS Code. Click on the Configure gear icon on the Debug view top bar, choose Node.js as the debug environment and VS Code will generate a launch.json file under your workspace's .vscode folder.

vscode

Configure protractor in launch.json

Locate the "Launch" entry in launch.json, change program and args in the following

"name": "Launch", "type": "node", "request": "launch", "program": "${workspaceRoot}/node_modules/protractor/bin/protractor", "stopOnEntry": false, "args": ["${workspaceRoot}/protractor.conf.js"],

Debug

Now, you can click F9 to set breakpoint, F5 to debug the script. Watch and Call stack panels are handy to inspect the running status.

vscode2

Support Suite in Configuration

Suppose you just want to debug smoke test suite while don't want to change the Launch entry in the launch.json, you can simply copy and paste the Launch entry and rename it to SmokeTest shown below. Furthermore, add "--suite" and "smoke" to the args array entry.

"name": "SmokeTest", "type": "node", "request": "launch", "program": "${workspaceRoot}/node_modules/protractor/bin/protractor", "stopOnEntry": false, "args": ["${workspaceRoot}/protractor.conf.js", "--suite", "smoke"], "cwd": "${workspaceRoot}", "preLaunchTask": null,

 

Make sure you have chosen SmokeTest in the debug view and it will only run against smoke suite in the next debug session then.

For more information regarding to debug in visual studio code, there is a good introduction in https://code.visualstudio.com/docs/editor/debugging