Debugging using Mocha and Puppeteer

[rippo]

I have asked this question also on stack overflow,

• VSCode Version: 1.20.0
• OS Version: Windows 10 Pro
• Does this issue occur when all extensions are disabled?: Yes

My mocha/puppeteer script

const { expect } = require('chai');
const { test } = require('../../browser');

describe('When reseting the super admin login', () => {

  let page;

  it('it shows correct title', test(async (browser, opts) => {

    console.log(browser !== undefined, opts !== undefined);

    page = await browser.newPage();

   //testing code here

    expect(html).to.be.equal("OK");

  }));
});

My launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
            "cwd": "${workspaceFolder}",
            "args" : ["--timeout", "10000", "./runner.js", "${file}"],
            "protocol": "inspector",            
            "runtimeArgs": [
                "--harmony",
                "--no-deprecation"
            ]            
        }
    ]
}

When hitting F5 and debugging in VSCode the browser and opts parameters are undefined, as in the image below:-

When running from the console everything works ok

I am hoping its a setting in my launch.json that I am missing?

PLEASE NOTE this is not a question about breakpoints NOT being hit in Vscode rather than I am getting different results depending whether I am running in vscode or from a command prompt.

[weinand]

What is the result when you run your test from the command prompt:

• by using node's buitlin debugger by adding the "debug" command line option and then using the "c" command (for continue).
• in debug mode, e.g. by passing a --inspect-brk command line option and then attaching VS Code to the 9229 port.

[rippo]

For first point:-

rippo@DESKTOP-123456 d:\Projects\Websites\lm3online.com\Source\Ui.Testing.Puppeteer
> mocha debug --timeout 10000 ./runner.js Tests/Aardvark/_reset.js
(node:18700) [DEP0068] DeprecationWarning: `node debug` is deprecated. Please use `node inspect` instead.
< Debugger listening on ws://127.0.0.1:9229/b7bec8fe-8936-4ae2-88f6-9e6f0483ca3e
< For help see https://nodejs.org/en/docs/inspector
Break on start in C:\Users\rippo\AppData\Roaming\npm\node_modules\mocha\bin\_mocha:1
> 1 (function (exports, require, module, __filename, __dirname) {
  2 'use strict';
  3
debug> c


<   When reseting the super admin login
< true true
<     √ it shows correct title (543ms)


< Debugger attached.
< Waiting for the debugger to disconnect...
<   1 passing (1s)
debug>

[weinand]

In the second case don't use the "debug" since you want to use VS Code (and "--inspect-brk" option is sufficient).
And add a "protocol": "inspector"to the attach configuration you are using.

[rippo]

If I use mocha debug --inspect-brk ... I get an error if I use mocha inspect --inspect-brk ...` it works. Rerunning now

[weinand]

No, just use "mocha --inspect-brk ..." and then attach VS Code.
The idea is to launch your test outside of VS Code but still use the VS Code Debugger.

[rippo]

ok it works although breakpoint doesn't get hit in my test file

[weinand]

@roblourens any idea what is going on here?

[roblourens]

I think that when you launch with mocha it runs the tests in a different process which is why you didn't hit your breakpoint.

If you run from the command line with the exact command that vscode uses minus the --inspect-brk param (node --harmony --no-deprecation /node_modules/mocha/bin/_mocha ...) does it work?

Otherwise, since you are using a relative require for browser, is the CWD correct in your launch config?

Or can you look up call stack to debug test and get some clues as to why it's passing in undefined for browser and opts?

[rippo]

This does not work from the command line

node --harmony --no-deprecation 
  node_modules\mocha\bin\_mocha --timeout 10000 
  D:\Projects\Websites\lm3online.com\Source\Ui.Testing.Puppeteer/runner.js
  d:\Projects\Websites\lm3online.com\Source\Ui.Testing.Puppeteer\Tests\Aardvark\_Reset.js

This also does not work with same error from the command line

mocha --timeout 10000 
  D:\Projects\Websites\lm3online.com\Source\Ui.Testing.Puppeteer/runner.js 
  d:\Projects\Websites\lm3online.com\Source\Ui.Testing.Puppeteer\Tests\Aardvark\_Reset.js

These two do work

node --harmony --no-deprecation 
  node_modules\mocha\bin\_mocha --timeout 10000 
  ./runner.js 
  d:\Projects\Websites\lm3online.com\Source\Ui.Testing.Puppeteer\Tests\Aardvark\_Reset.js

mocha --timeout 10000 ./runner.js 
  d:\Projects\Websites\lm3online.com\Source\Ui.Testing.Puppeteer\Tests\Aardvark\_Reset.js

I will check the CWD and also the relative paths for the requires. As something is amiss

[rippo]

Intestingly If I use from the command line and attach all works fine and I hit the breakpoints

node --inspect-brk --harmony --no-deprecation 
  node_modules\mocha\bin\_mocha --timeout 10000 
  ./runner.js 
  d:\Projects\Websites\lm3online.com\Source\Ui.Testing.Puppeteer\Tests\Aardvark\_Reset.js

with the following kaunch.json

 "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach",
            "protocol": "inspector",            
            "port": 9229
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Mocha Tests",
            "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
            "cwd": "${workspaceFolder}",
            "args" : ["--timeout", "10000", "./runner.js", "${file}"],
            "protocol": "inspector",            
            "runtimeArgs": [
                "--harmony",
                "--no-deprecation"
            ]            
            //"console" : "externalTerminal"
        }
    ]

However with same setup and hitting F5 in vscode it still bombs out, this is the debug console:-

node --harmony --no-deprecation --inspect-brk=43586 node_modules\mocha\bin\_mocha --timeout 10000 ./runner.js d:\Projects\Websites\lm3online.com\Source\Ui.Testing.Puppeteer\Tests\Aardvark\_Reset.js 
Debugger listening on ws://127.0.0.1:43586/4703bf63-23de-4d82-b91b-3014a4ba80f3
Setting options
MOCHA BEFORE ROOT
  When reseting the super admin login
false false
    1) it shows OK
MOCHA AFTER ROOT
  0 passing (11s)
base.js:332
  1 failing
base.js:348
  1) When reseting the super admin login
base.js:240
       it shows OK:
     TypeError: Cannot read property 'newPage' of undefined
      at test (d:\Projects\Websites\lm3online.com\Source\Ui.Testing.Puppeteer\Tests\Aardvark\_Reset.js:13:29)
      at Context.<anonymous> (d:\Projects\Websites\lm3online.com\Source\Ui.Testing.Puppeteer\browser.js:39:7)

[roblourens]

Does it work if you launch it in the integrated terminal? "console" : "integratedTerminal"

Is the CWD definitely correct in your launch config?

Or can you look up call stack to debug test and get some clues as to why it's passing in undefined for browser and opts?

[rippo]

Firstly thanks for continued support...

1. The "console" : "integratedTerminal" shows same error
2. CWD is correct I am 99.9% sure
3. When debugging and looking at the call stack it seems that the context is different. Running from the command or when using attach in code, my browser.js file this.browser is defined

When I debug straight from code this.browser is undefined. Look at this gist L40

In all cases L20 is always called first (from command, attach OR from debugging from code)

[weinand]

Two things you could try:

• are your tests relying on some environment variables? If yes, please add them explicitly to the launch config (via the "env" attribute).
• sometimes drive letter casing makes a difference. Please replace the variables in your launch config by absolute paths and then vary the case of their drive letters.

[vscodebot]

This issue has been closed automatically because it needs more information and has not had recent activity. See also our issue reporting guidelines.

Happy Coding!