Playwright Test Runner
Running or debugging a specific test or test-suite by playwright.
VisualStudio Marketplace
Features
Simple way to run or debug a specific test
As it is possible in IntelliJ / Webstorm
Run, Debug and Inspect your Playwright from
- Context-Menu
- CodeLens
- Command Palette [ strg(ctrl) + shift + p ]
Supports
- Run playwright test
- Debug playwright test
- Inspect playwrigt test
- Show Playwright Test Report By json format
- Genrate Playwright Test Code
Extension Settings
Playwright Test Runner will work out of the box, with a valid Jest config.
If you have a custom setup use the following options to configure Playwright Test Runner:
Variable
sample : /workspace/packages/sample/tests/test.spec.js
| Variable |
Description |
sample |
${workspaceRoot} |
the path of the project opened in vscode. |
/workspace |
${packageRoot} |
the path of directory with package.json. |
/workspace/packages/sample |
${currentFile} |
the current file |
/workspace/packages/sample/tests/test.spec.js |
${fileBasename} |
the current file name with ext. |
test.spec.js |
${fileBasenameNoExtension} |
the current file name without ext. |
test.spec |
${fileExtname} |
the current file name with ext. |
.js |
${fileDirname} |
the current file name with ext. |
/workspace/packages/sample/tests |
Extension Settings for playwright
| Command |
Description |
| playwrightrunner.playwrightCommand |
Define an alternative playwright command (e.g. npx playwright) |
| playwrightrunner.playwrightConfigPath |
Playwright config path (relative to ${packageRoot} e.g. playwright.config.ts) |
| playwrightrunner.playwrightRunOptions |
Add CLI Options to the playwright Command (e.g. --headed) https://playwright.dev/docs/test-intro |
| playwrightrunner.playwrightRunProject |
Specify the project to run Test (e.g. chromium) |
| playwrightrunner.playwrightDebugProject |
Specify the project to run Debug (e.g. chromium) |
| playwrightrunner.playwrightInspectProject |
Specify the project to run inspector (e.g. chromium) |
| playwrightrunner.playwrightEnvironmentVariables |
Add Environment Variables (e.g. NODE_ENV=product) |
Extension Settings for common
| Command |
Description |
| playwrightrunner.disableCodeLens |
Disable CodeLens feature |
| playwrightrunner.codeLensSelector |
CodeLens will be shown on files matching this pattern (default **/*.{test,spec}.{js,jsx,ts,tsx}) |
| playwrightrunner.projectPath |
Absolute path to project directory (e.g. /home/me/project/sub-folder) |
| playwrightrunner.changeDirectoryToWorkspaceRoot |
Changes directory to workspace root before executing the test |
Shortcuts
click File -> Preferences -> Keyboard Shortcuts -> "{}" (top right)
the json config file will open
add this:
{
"key": "alt+1",
"command": "playwrightrunner.runTest"
},
{
"key": "alt+2",
"command": "playwrightrunner.debugTest"
},
{
"key": "alt+3",
"command": "playwrightrunner.inspectTest"
},
Want to start contributing features?
Some open topics get you started
Show Playwright Test Report
You can check the reporter (json) output by Playwright.
- step 1
create playwright.config
module.exports = {
reporter:[ ['list'], [ 'json', { outputFile: 'reports.json' }] ]
}
Genearete Playwright Test Code
You can generate Playright test code.
step 1
select "Generate Playwright Test Code" from right menu on explorer.
step 2
please input filename to generate playwright test code.
step 3
open browser and inspect
step 4
close browser and genrate test code.
