How to debug protractor in VS CODE?

Question

I'm trying to debug protractor test script but I'm not able to find good source to understand how to debug, can any one suggest me few best sites to refer and how many ways can we debug the protractor test script.

Possible duplicate of How to debug component/typescript code when running Protractor — Bharath Kumar S
– Bharath Kumar S, Commented Jan 3, 2019 at 4:26
Not a duplicate. Element explorer is going to be deprecated. This is (hopefully) going to use the --inspect-brk. See the following answer stackoverflow.com/questions/53986770/…. Also we have a youtube vid of this: youtube.com/watch?v=6aPfHrSl0Qk&t=1208s — craig
– craig, Commented Jan 3, 2019 at 6:49
you can add the launch.json and debug. check this blogs (blogs.msdn.microsoft.com/wushuai/2016/08/24/…) (lukasbehal.com/2017-06-16-ts-protractor-tests-debugging) — inbha
– inbha, Commented Jan 3, 2019 at 9:11

Artyk · Accepted Answer · 2019-01-03 14:33:32Z

5

you have 2 best ways.

Method A:

1) Configure VSCode.

This is my launch configuration: (change the folder path and files as needed).

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Backoffice",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
            "stopOnEntry": false,
            "args": ["${workspaceRoot}/e2e/backoffice/protractor_backoffice.js"],
            "sourceMaps": true,
            "outFiles": [ "${workspaceRoot}/e2e/backoffice/**/*.js" ],
            "smartStep": true
        }
    ]
}

2) Once you have done this you just can run the debugger and it should work.

INFO: To add breakpoints just write in your code "debugger;" (without quotes).

VERY IMPORTANT!!!! To syncronize your code with your browser you have use async functions and await methods.

example of async/await and breakpoint:

async myFunction() {
 debugger;
 await this.myElement.click();
}

Method B:

Open a terminal in VSCode and write:

node --inspect-brk path/to/protractor/bin/protactor path/to/protractorconfig.js

example:

node --inspect-brk .\node_modules\protractor\bin\protractor .\e2e\backoffice\protractor_backoffice.js

It opens dev chrome tools, in there is pretty much as VSCode debugger, but it gives a bit more information.

Good luck!

answered Jan 3, 2019 at 14:33

Artyk

662 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Artyk Over a year ago

PS: You can also use .then() to solve promises, but I prefer async/await.

Neh18 · Accepted Answer · 2020-01-30 06:49:24Z

0

I was facing alot of issues to debug. After so many research i got this solution and my code is not getting debugged.

My Launch.json file

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",

        "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
            "stopOnEntry": false,
            "args": ["${workspaceRoot}/FolderNameIFAny/conf.js"],
            "sourceMaps": true,
            "outFiles": [ "${workspaceRoot}/JSFiles/Tests/**/*.js" ],
            "smartStep": true
        }
    ]
}

in "args" give your conf.js file in which you will provide your spec file. Dont change "outFiles" and "Program".

If you try to give ts file then it will not run. so please provide .js file path.

after setting the path in conf.ts run command

tsc

to set your conf.ts file to conf.js

set the breakdown at your mentioned file in conf.ts file and press f5 to debug.

answered Jan 30, 2020 at 6:49

Neh18

1722 silver badges12 bronze badges

1 Comment

Neh18 Over a year ago

Yes, you are right. Please guide me for non async functions.

Collectives™ on Stack Overflow

How to debug protractor in VS CODE?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related