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' }] ]
}

• step 2
  Run playwright

• step 3
  show playwright test report

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.