I am unable to run my angular e2e test in debug mode. browser.debug() is not working.
Node Version - 10.13.0
Angular 8
protractor - 5.4.2
Here is a sample of my launch.json file of vs code.
{
"version": "0.2.0",
"configurations": [
{
"name": "ng e2e",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
"protocol": "inspector",
"args": ["${workspaceRoot}/e2e/protractor.conf.js"]
}
]
}
Error Log ::
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (internal/modules/cjs/helpers.js:20:18)
Error log Image
Don't use the browser.debug() method, it's not working with disabled control flow.
You have two options:
Add debugger keyword to the test case that you want to debug.
it('should greet the named user', async function() {
debugger;
await browser.get('http://www.angularjs.org');
await element(by.model('yourName')).sendKeys('Julie');
var greeting = element(by.binding('yourName'));
expect(await greeting.getText()).toEqual('Hello Julie!');
});
Add a breakpoint in the VSCode.
Then press F5 or Ctrl+F5 buttons to run tests.
Here is my launch.json file that works:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Run",
"program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
"protocol": "inspector",
"args": [
"${workspaceRoot}/e2e/protractor.conf.js",
],
"console": "integratedTerminal"
},
]
}
Related
I am writing a Flutter tutorial project in VS Code with multiple main() functions.
For example:
main.dart //Contains a main() function
step1.dart //Contains a main() function
step2.dart //Contains a main() function
If I have step1.dart open, then pressing F5 runs main.dart and not step1.dart in debug mode.
I can hover the mouse over the main() function in step1.dart, and then select 'debug' from the context menu. This works as expected and runs step1.dart in debug. However, there is no associated shortcut.
What can I press to run the active open file in debug mode, not main.dart?
As long as I have experience of having multiple flutter projects on a workspace (not too good feedback at all), the key is to set the pre-build process configuration file .vscode/launch.json, you can get more info on debugging#_launch-configurations.
When you create the file, it will look something like:
{
"version": "0.2.0",
"configurations": [
{
"name": "Flutter",
"request": "launch",
"type": "dart",
}
]
}
Then add "program": "lib/your-entry-point.dart":
{
"version": "0.2.0",
"configurations": [
{
"name": "main",
"request": "launch",
"type": "dart",
"program": "lib/main.dart"
},{
"name": "step1",
"request": "launch",
"type": "dart",
"program": "lib/step1.dart"
},{
"name": "step2",
"request": "launch",
"type": "dart",
"program": "lib/step2.dart"
}
]
}
This will then create the following launch options.
I made this launch.json file in the .vscode folder.
Worked like a charm.
{
"version": "0.2.0",
"configurations": [
{
"name": "Dart: Current File",
"type": "dart",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}"
},
]
}
Here are the variables you can use in launch.json.
https://code.visualstudio.com/docs/editor/variables-reference
I am trying to setup VSCode to run and debug my KeystoneJS application.
I currently run the application using npm run dev or yarn dev - in package.json, the dev script is set like this:
"scripts": {
"dev": "cross-env NODE_ENV=development DISABLE_LOGGING=true keystone dev"
},
If I try to run cross-env NODE_ENV=development DISABLE_LOGGING=true keystone dev from my prompt, I get the error, command not found. I would love to understand why this is not working...
I tried to setup my debug configuration in launch.json like this:
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/keystone",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceFolder}",
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"PORT":"3030",
"NODE_ENV":"development",
"DISABLE_LOGGING":"true"
}
}
]
}
but it returns the error
this is how you can do this by changing npm script for dev
"dev": "cross-env PORT=4000 NODE_ENV=development NODE_OPTIONS=--inspect DISABLE_LOGGING=true keystone dev",
NODE_OPTIONS=--inspect or NODE_OPTIONS=--inspect-brk does the magic.
You must do this after cross-env as indicated above and not like below.
"dev": "NODE_OPTIONS=--inspect cross-env PORT=4000 NODE_ENV=development DISABLE_LOGGING=true keystone dev", (does not work)
Edit: 8 may
You can use following config in launch.json in vscode, (ideally the npm script should be called debug)
With NPM
{
// 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 via NPM",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"dev"
],
"port": 9229,
"skipFiles": [
"<node_internals>/**"
]
}
]
}
with YARN
{
// 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 via NPM",
"runtimeExecutable": "yarn",
"runtimeArgs": [
"dev"
],
"port": 9229,
"skipFiles": [
"<node_internals>/**"
]
}
]
}
change port only if you change port in NODE_OPTIONS in package.json script
I am trying a very simple test in VSCode which I am trying to ensure my environment is set up to debug tests. However, I do get errors which have nothing to do with my test.
I am simply trying to run Jest with Angular 6 in VSCode and debug both my application and the tests.
environment.ts
export const environment = {
production: false
};
environment.spec.ts
import { environment } from './environment';
describe('Production environment', () => {
it('should have the environment not set for production', () => {
expect(environment.production).toBeFalsy();
});
});
environment.prod.ts
export const environment = {
production: true
};
environment.prod.spec.ts
import { environment } from './environment.prod';
describe('Production environment', () => {
it('should have the environment set for production', () => {
expect(environment.production).toBeTruthy();
});
});
Error I receive:
FAIL src/environments/environment.prod.spec.ts ● Test suite failed to run
ReferenceError: XMLHttpRequest is not defined
at patchXHR (node_modules/zone.js/dist/zone.js:2926:39)
at node_modules/zone.js/dist/zone.js:2919:5
at Function.Object.<anonymous>.Zone.__load_patch (node_modules/zone.js/dist/zone.js:84:33)
at node_modules/zone.js/dist/zone.js:2917:6
at Object.<anonymous>.FUNCTION (node_modules/zone.js/dist/zone.js:9:65)
at Object.<anonymous> (node_modules/zone.js/dist/zone.js:12:2)
at Object.<anonymous> (node_modules/jest-preset-angular/setupJest.js:5:1)
setup-Jest.ts
/**
* Jest setup file for automated testing
*/
import 'jest-preset-angular';
import './jestGlobalMocks';
.vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest All",
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
"args": [
"--runInBand"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
},
{
"type": "node",
"request": "launch",
"name": "Jest Current File",
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
"args": [
"${relativeFile}"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
This appears to happen simply from importing the basic code needed to get Jest to run. However, this does run in the bash environment without an error.
I was troubleshooting this. For me, in jest.config.js, setting testEnvironment to jsdom instead of node fixes the problem.
I'm struggling to get the Visual Studio Code debugger working in with Jest tests.
Here is my launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest All",
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
"args": ["--runInBand"],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"sourceMaps": true
}
]
}
Here are my Jest tests with a couple of breakpoints:
When I hit the green play button to run the tests with the debugger, the breakpoints are never hit.
Any help would be appreciated
Personnally I use this configuration
{
"name": "Launch e2e test",
"type": "node",
"request": "launch",
"env": {
"NODE_ENV": "test"
},
"args": [
"--colors",
"--config=${workspaceFolder}/jest-e2e.config.js",
"--runInBand",
"--coverage"
],
"runtimeArgs": [
"--nolazy"
],
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
},
"outputCapture": "std",
"internalConsoleOptions": "openOnSessionStart"
}
Change jest-e2e.config.js by your configuration file. And remove or keep coverage
Like Laura Slocum said you will certainly have problem with line number. In my case personnaly think that the problem come from the jest configuration, the transform :
transform: {
"^.+\\.(t|j)s$": "ts-jest"
},
This configuration let's me debug the jest test. Unfortunately hitting a breakpoint in the component does not show the correct line, even though it is stepping through the correct code. I believe this is probably a VSCode error though
{
"name": "Jest", // This is the configuration name you will see in debug sidebar
"type": "node",
"request": "launch",
"port": 5858,
"address": "localhost",
"stopOnEntry": false,
"runtimeExecutable": null,
"env": {
"NODE_ENV": "development"
},
"console": "integratedTerminal",
"preLaunchTask": "compile",
"runtimeArgs": [
"--inspect-brk", // node v8 use debug-brk if older version of node
"${workspaceRoot}/node_modules/.bin/jest",
"--watch",
"--bail",
"--runInBand"
],
"cwd": "${workspaceRoot}"
},
I had the same problem with line numbers being off. In the source file I had almost 30 lines of requires, and the test file that loaded in the debugger added a blank space between each require. So the file that got loaded in vscode was about 60 lines longer.
I found this post that fixed my problem: Debugging Jest Tests in VS Code: Breakpoints Move
The problem for me was the value of the program attribute in launch.json. If your launch.json is as follows:
"program": "${workspaceFolder}/node_modules/jest/bin/jest"
Check if ${workspaceFolder}/node_modules/jest/bin/jest is actually valid. For me, the node_modules did not exist here, but in a subdirectory of workspaceFolder.
The following is the only launch.config that worked for me after trying out everything else :|
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest",
"program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
"args": [
"-i"
],
"skipFiles": [
"<node_internals>/**/*.js", "node_modules",
]
}
]
}
If you are using transformers like babel or swc to transform your tests before running the actual tests, the debugger in vscode may not work.
For me I'll just use the debugger.
I was trying to debug Cucumber scenarios in Visual Studio code and made below changes in the launch.json.
{
"name": "e2e",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}\\node_modules\\.bin\\cucumber-js",
"stopOnEntry": false,
"args": ["--no-timeouts", "--colors"],
"cwd": "${workspaceRoot}",
"runtimeExecutable": null,
"outFiles": [
"${workspaceRoot}\\features\\step_definitions\\*.js"
]
},
However, I am not able run a debug session using the above configuration. The step def. files I created in JavaScript.
So, just need a help on the script above if that looks fine?
You could try below configuration to make your debug working in VS Code. In the outFiles give your feature file path.
{
"name": "e2e",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/cucumber/bin/cucumber.js",
"outFiles": [
"${workspaceRoot}/features/*.feature"
]
}
============================================
UPDATE AS OF cucumber ^5.0.2:
{
"name": "NPM Cukes",
"type": "node",
"request": "launch",
"console": "integratedTerminal",
"program": "${workspaceRoot}/node_modules/cucumber/bin/cucumber-js",
"args": [
"path/to/features/**/*.feature",
"-r",
"path/to/steps/**/*",
"--tags",
"#your-tags"
]
}
If you want to debug only CURRENT feature, add this to launch.json
{
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/node_modules/.bin/cucumber-js",
"args": ["${relativeFile}"],
"name": "Cukes current",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"windows": {
"program": "${workspaceFolder}/node_modules/cucumber/bin/cucumber"
}
}
When working with Ruby, it could be used on this way to run specific feature files:
{
"name": "Cucumber",
"type": "Ruby",
"request": "launch",
"cwd": "${workspaceRoot}",
"program": "${workspaceRoot}/bin/cucumber",
"args": [
"--tags", "#Mytags",
]
}
Tweaking the answer from Mukesh Rawat plus ensuring additional file paths were correct, got it working for me, :
Launch.json
{
"name": "DebugMode",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/cucumber/bin/cucumber-js",
"args": [
"${workspaceRoot}/features/*.feature",
"--tags", "#debug"
]
}
Workspace.json
{
"cucumberautocomplete.steps": [
"features/steps/*.js"
],
"cucumberautocomplete.syncfeatures": "features/*.feature",
"cucumberautocomplete.strictGherkinCompletion": true,
"settings": {},
"folders": [
{
"path": "/Users/{me}/Documents/{project folder}/{project name}"
}
]
}
Package.json
"scripts": {
"debug": "node --inspect=1337 --debug-brk --nolazy node_modules/cucumber/bin/cucumber-js --tags #debug --format json:./reports/report.json",
CucumberTest.feature
#debug
Scenario: Validate I can get debug working
This works
{
"name": "DebugMode",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/cucumber/bin/cucumber-js",
"args": [
"${workspaceRoot}/features/*.feature",
"--tags", "#debug"
]
}
Here's the simplest way I've found to run Cucumber.js in the VS Code debugger:
Set JavaScript debugger auto attach to "onlyWithFlag" (Ctrl+Shift+P, type "Toggle Auto Attach")
Run Cucumber.js as follows: node --inspect ./node_modules/.bin/cucumber-js <args...>
For convenience, set an NPM run script in your test project for "debug" so you can run this as npm run debug -- <args...>
with the latest Cucumber, Playwright, typescript as of January 2023 - F5 (run in VSCode) - set debugger in ts step files and use .vscode/launch.json (you might tweak your reports location)
{
"version": "0.1.0",
"configurations": [
{
"name": "debugMode",
"type": "node",
"request": "launch",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"program": "node_modules/#cucumber/cucumber/bin/cucumber-js",
"args": [
"./features/*.feature",
"--require-module",
"ts-node/register",
"--require",
"./steps/*.steps.ts",
"--tags",
"#demoX",
"--format", "progress",
"--format", "json:./Reports/cucumber_report.json"
]
}
]
}