Sometimes you create a Playwright test but can’t seem to actually run it in Visual Studio Code. Here are the most common reasons why, and how to fix it.
Incorrect File Name
Playwright uses certain conventions to identify test files. Depending on the language you’re using, ensure that your test files end with:
- .spec.ts
- .test.ts
- .spec.js
- .test.js
Playwright Test Framework Not Installed
A common mistake made when installing Playwright is to install just the core Playwright browser driver modules and not the entire Playwright test framework.
So instead of installing Playwright using:
npm install playwrightinstall the whole test framework:
npm install @playwright/testAn alternative if you’re using Visual Studio Code is to install the excellent extension “Playwright Test for VSCode” by Microsoft, then press Ctrl-Shift-P to open the Command Panel (Cmd-Shift-P for Mac) and enter “Install Playwright”.
Test File Location Configuration
Playwright searches specific folders for files containing tests, so if you inadvertently create a test file outside this folder structure then Playwright won’t find them.
The location(s) are defined in the playwright.config.ts file (for Typescript) – look for testDir or testMatch.
export default defineConfig({
testDir: './tests',
.
.
});No Run Triangle or Right-Click Options
Sometimes when a new test file is created and tests added to it, then Visual Studio Code doesn’t give you the option to execute them using either the “triangle” icon displayed on the left of the test, or allow you to right-click on the test description to run or debug the test. But previously created tests seem to work fine.
This is just VSCode getting a bit confused and can be rectified by simply closing and re-opening the application.
Alternatively press Ctrl-Shift-P (Windows/Linux) or Cmd-Shift-P (Mac) and enter Reload Window. After a short delay the “triangle” should be visible and the context menu available.