sakamoto66 / vscode-playwright-test-runner Goto Github PK

View Code? Open in Web Editor NEW

3.0 1.0 1.0 34.83 MB

License: MIT License

HTML 4.22% CSS 3.79% TypeScript 86.10% JavaScript 5.89%

vscode-playwright-test-runner's Introduction

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.

vscode-playwright-test-runner's People

Contributors

Stargazers

Watchers

Forkers

iqbmo04

vscode-playwright-test-runner's Issues

Clicked inspect for a specific test, runs every test on that page.

I just wanted to inspect one specific test. Clicking the inspect button now runs 5 tests total when all i wanted to do was debug the last one. Why put buttons on each individual test, if it just executes the whole file?

no tests found

Hi,tnx for the great extension!
It looks like the single/multi running test not working because of the regex , for example for this test section:

test.describe("Example page tests", () => {
  test("example add new item showing correctly", async ({ page }) => {
  .... })
})

when I try to run that spesific test with the Run button I see that command on terminal:
npx playwright test "Example.test.ts" -c "e2e/playwright.config.ts" -g "Example\s+page\s+tests\s+example\s+add\s+new\s+item\s+showing\s+correctly$"

and I got as output: no tests found.

when I run a command only with a test name it's working:
npx playwright test "Example.test.ts" -c "e2e/playwright.config.ts" -g "example add new item showing correctly"

inside my playwright.config.ts I have the testDir property to the correct location, I try to remove it also but it looks like it's not related to that.

Any idea?tnx

Escape equals sign in env variable when

How can i escape equals sign in env variable when I add it to settings --> user --> Playwright Environment Variables.
For example when I add
ENV_VAR1=kGN1b7UrPpjp6Zk37jE-_HRf3ma+ARxuN9nBx55pqVwCdXGOXjvJ=qDSgQ9W=g26
and try to access process.env.ENV_VAR1 I get the value as kGN1b7UrPpjp6Zk37jE-_HRf3ma+ARxuN9nBx55pqVwCdXGOXjvJ. It strips off the value =qDSgQ9W=g26

I tried escaping by putting in quotes, ^ and \ but still cannot read the entire value
ENV_VAR1="kGN1b7UrPpjp6Zk37jE-_HRf3ma+ARxuN9nBx55pqVwCdXGOXjvJ=qDSgQ9W=g26"
ENV_VAR1=kGN1b7UrPpjp6Zk37jE-_HRf3ma+ARxuN9nBx55pqVwCdXGOXjvJ^=qDSgQ9W^=g26
ENV_VAR1=kGN1b7UrPpjp6Zk37jE-_HRf3ma+ARxuN9nBx55pqVwCdXGOXjvJ=qDSgQ9W=g26

Where are env variables stored?

In order to run our tests, I have to set around 10 environment variables in the extension settings. When I switch to a different test environment, I need to change 10 environment variables in the extension settings one after the other. Changing in UI has been tedious.
So I was wondering if the env variables are stored any where in a file? That way I can copy/paste all the env variables I need in one go and reload VSCODE.

Bug in support of interpolated strings in test name

First of all, thanks for the extension, really handy when developing tests.

import { test } from '@playwright/test';

test.describe('TestClass', () => {
  for (const bool of [true, false]) {
    test(`Test ${bool}]`, ({}) => {
      console.log(bool);
    });
  }
});

When clicking on 'Run' above the test, the following command will be triggered:

npx playwright test "test.spec.ts" -g "TestClass\s+Test\s+(.*?)\]$"
This command fails to launch the tests with the following error:
\]$ was unexpected.

Removing the parenthesis in the command seems to fix the issue:

npx playwright test "test.spec.ts" -g "TestClass\s+Test\s+.*?\]$"

Runner doesn't displays buttons with 'import' rather than 'require'

Hello @sakamoto66 ! Thank you for this helpful extension.
I'm facing the same issue reported there with a difference that the file has .spec.js suffix.
It does work if i replace import with require.

I run with node 18.12.1 on mac.

No Run/Debug/Inspect buttons

Hi. For some reason I don't see run/debug/inspect buttons, why can this be happening?