Playwright Test Setup in VSCode

This note walks through setting up Playwright tests in VSCode using project-scoped tasks, and user-scoped keybindings.

package.json

To begin with, I have a test script,

{
  "scripts": {
    "test": "playwright test"
  }
}

This is the most permissive test, running all tests and projects. This is because this is the CI command as well, and so should stay broadly scoped. For local testing, we can use project tasks and keybindings to narrow the scope as desired.

Project Tasks

You can create a .vscode/tasks.json file manually or via the command palette via "Tasks: Configure Task" and selecting "Other" to configure a manual task.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "all",
      "type": "shell",
      "command": "npm run test -- --project=chromium"
    },
    {
      "label": "file",
      "type": "shell",
      "command": "npm run test -- ${file} --project=chromium",
      "runOptions": {
        "reevaluateOnRerun": false
      }
    },
    {
      "label": "line",
      "type": "shell",
      "command": "npm run test -- ${file}:${lineNumber} --project=chromium",
      "runOptions": {
        "reevaluateOnRerun": false
      }
    }
  ]
}

• ${file} and ${selectedText} are vscode task variables
• runOptions -> reevaluateOnRerun: false is a particular task run behavior that does not re-substitute the variables when you rerun the test. Task variables will check your cursor position, amongst other things, to determine the content of the variable, like file name. This is "reevaluation". Turning it off, by setting it to false, tells VSCode to use the old, original value instead. So, now, you can edit the source code that caused the failing test, and immediately rerun the test using the old variable values. You are basically telling vscode, "just rerun the test, don't reevaluate the variables."
• --project=chromium tells playwright to only run a single project. If you have 20 tests and 5 projects, that's 100 tests every time you run all the tests. That's not ideal for fast feedback loops. You can prune it down by using the project flag. See Playwright#Running one project locally and all projects on CI for more.

User Keybindings

You can access these in the command palette via "Preferences: Open Keyboard Shortcuts (JSON)". This file is deep inside system dirs and can be controlled by settings sync.

[
  {
    "key": "alt+a",
    "command": "workbench.action.tasks.runTask",
    "args": "all"
  },
  {
    "key": "alt+f",
    "command": "workbench.action.tasks.runTask",
    "args": "file"
  },
  {
    "key": "alt+l",
    "command": "workbench.action.tasks.runTask",
    "args": "line"
  },
  {
    "key": "alt+r",
    "command": "workbench.action.tasks.reRunTask"
  }
]

• The last keybinding, reRunTask, is the command associated with the reevaluateOnRerun: false setting from above. So when I press alt+r, I will rerun the previously ran test, no matter where my cursor is. (The location of the cursor determines the ${file} and ${lineNumber} task variables.)

Now, for example, if your cursor is on the line number where a particular test begins, you can press alt+l to run that test. Also, these user-scoped keybindings can be associated with any project-level task with the same name, so in theory these keybindings work across languages and frameworks, etc. For example, I use these same keybindings to run tests in Elixir (Elixir Test Setup in VSCode) and Jest (Jest Test Setup in VSCode).