Enabling debugging functionalities in Playwright tests for VSCode.

Playwright provides bunch of powerful features for debugging! And one of them is verbose logging. According to the Playwright documentation, by running the command:

DEBUG=pw:api npx playwright test

you can get detailed overview of what is happening behind the scenes.

If you make a step further and install Playwright Extension, which will give you the whole spectrum of opportunities for effective test development, like: running tests with a single click, easier configuration, codegen capabilities, etc.

While utilising all these awesome capabilities, you might miss verbose logging in test output.

How to put all these nice capabilities (leveraging Playwright Extension features and verbose logging) together? There is a way: let's add one line of code in VSCode Playwright Extension configuration file.

Steps to achieve it:

1. In your VSCode IDE navigate to Extensions

2. Find Playwright Extension and click on gear icon. Navigate to extension settings.

3. Click on Edit in settings.json

1. Add one line of configuration: "DEBUG": "pw:api"

        "playwright.env": {
            "DEBUG": "pw:api"
        }
   

2. Save setting.json file and close it.

3. Run test cases again in a Testing tab and check

4. Check Test Output and voilà!