DEV Community 👩‍💻👨‍💻

ryanrosello-og
ryanrosello-og

Posted on

Easiest way to setup a VSCode launch config for your Playwright tests

In this article we will look at an alternative approach to the Playwright VSCode extension by configuring our own VSCode launch config file. This will allow us to have finer control over specific launch configurations settings for our tests.

To begin with, create a new script in your package.json file called vscode-debug. (You might need to tweak the name of the playwright config file to suite your needs.)

"scripts": {
  "vscode-debug": "playwright test --config ./playwright.config.ts --workers=1"
},

Enter fullscreen mode Exit fullscreen mode

Next, create a .vscode folder at the root of your project. In this folder, create a new json file named launch.json.

Input the following placeholder configuration details into the file

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Playwright tests",
      "console": "integratedTerminal",
      "skipFiles": [
        "<node_internals>/**"
      ],

    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

If you try and run the profile via clicking the play button below (or pressing F5), you will notice that it will do nothing.

Play button will do nothing

Let us make configuration usable by adding the following entries:

"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "vscode-debug", "--", "${fileBasename}"],
Enter fullscreen mode Exit fullscreen mode

Setting the runtimeExecutable to npm will allow you to invoke the npm script (vscode-debug) you created above. The --, "${fileBasename}" arguments will tell the launcher to pass the current highlighted file you have opened in your editor.

We can now test our settings by opening a spec file into your editor and clicking the run button:

Play button does smth

To debug, simply place a breakpoint next to the line of code you desire and click the play button:

Debug using profile

If you were to highlight and set focus onto a file that is not a spec file, running the profile should result in the following:

Not a spec file

Ok so far so good, what if we wanted to launch into the Playwright inspector? This can be achieved by simply duplicating the profile created above and tweaking it slightly by changing the name to Playwright Inspector and we introduce a new key env which sets the PWDDEBUG environment variable to 1:

{
  "type": "node",
  "request": "launch",
  "name": "Playwright Inspector",
  "console": "integratedTerminal",
  "skipFiles": [
    "<node_internals>/**"
  ],
  "runtimeExecutable": "npm",
  "runtimeArgs": ["run-script", "vscode-debug", "--", "${fileBasename}"],
  "env": {
    "PWDEBUG": "1",
  }
}
Enter fullscreen mode Exit fullscreen mode

Test your new profile by selecting "Playwright Inspector" and clicking the play button.

Playwright Inspector

Pretty easy. You can get creative with these profiles to suit your needs. Other use cases could include:

  • Setting up profile to launch your tests to execute on various test environments
  • Create a launch profile to execute a test against a specific browser.

The possibilities are endless 🤯

Final solution

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠