Playwright VS Code Extension, projects and global setup
Tags: playwright, webdev, javascript, testing
Published: 2024-05-21 13:28:39

With the latest release of the [VS Code Extension](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright), you can now easily select which projects to run your tests on as well as choose to run your setup tests only once. Make sure you have the latest version of the extension installed, which is v1.1.* as well as the latest version of [Playwright](https://playwright.dev/docs/intro) which is v1.44.*.

To update to the latest version of Playwright, run the following command:

```bash
npm install -D @playwright/test@latest
```
Also download new browser binaries and their dependencies:

```bash
npx playwright install --with-deps
```

## Opening the testing sidebar

The testing sidebar can be opened by clicking on the testing icon in the activity bar. This will give you access to the test explorer, which will show you all the tests in your project as well as the Playwright sidebar which includes projects, settings, tools and setup.

![Testing Sidebar](https://github.com/microsoft/playwright/assets/13063165/d203fe83-6015-4e7a-b816-35d373906b24)

## Running tests on multiple projects

The first section in the Playwright sidebar is the projects section. Here you can see all your projects as defined in your Playwright config file. The default config when installing Playwright gives you 3 projects, Chromium, Firefox and WebKit. The first project is selected by default.

![Projects section in VS Code extension](https://github.com/microsoft/playwright/assets/13063165/58fedea6-a2b9-4942-b2c7-2f3d482210cf)

To run tests on multiple projects, select each project by checking the checkboxes next to the project name. Then when you run your tests from the sidebar or by pressing the play button next to the test name, the tests will run on all the selected projects.

![Selecting projects to run tests on](https://github.com/microsoft/playwright/assets/13063165/6dc86ef4-6097-481c-9cab-b6e053ec7ea6)

You can also individually run a test on a specific project by clicking the grey play button next to the project name of the test.

![Running a test on a specific project](https://github.com/microsoft/playwright/assets/13063165/d29a27ab-07b5-4ca6-b4d7-1ad6d44bf222)

## Multiple configurations

If your project contains more than one playwright configuration file, you can switch between them by first clicking on the gear icon in the top right corner of the Playwright sidebar. This will show you all the configuration files in your project. Select the configuration files you want to use by checking the checkbox next to each one and clicking on the 'ok' button.

![Selecting a configuration file](https://github.com/microsoft/playwright/assets/13063165/ff9ff838-d27a-403d-b939-94e6c295e1d7)

You will now have access to all your tests in the test explorer. To run a test click on the grey triangle next to the file or project name. 

![Switching between configuration files](https://github.com/microsoft/playwright/assets/13063165/70930de5-0a0c-45e0-a6ee-b51f727f0e35)

To run all tests from all configurations click on the grey triangle at the top of the test explorer.

![Running all tests from all configurations](https://github.com/microsoft/playwright/assets/13063165/b3de4ce1-d311-4527-b2c7-b3e2f179a685)

To choose a configuration file to work with simply toggle between them by clicking on the configuration file name in the Playwright sidebar. Now when you use the tools, such as Record a test, it will record a test for the selected configuration file. 

![Recording a test for a specific configuration file](https://github.com/microsoft/playwright/assets/13063165/a8ecbcd1-fab8-4012-bdaa-428951f233a2)

You can easily toggle back and forth between configurations by clicking on the configuration file name in the Playwright sidebar.

## Project Dependencies

You can use project dependencies to run tests that depend on other tests. This is useful for **setup** tests such as logging in to a website. 

### Running setup tests

To run your setup tests select the **setup** project, as defined in your configuration file, from the project section in the Playwright sidebar. This will give you access to the **setup** tests in the test explorer.

![setup tests in vscode](https://github.com/microsoft/playwright/assets/13063165/7a9eccd5-a5b3-431f-9eff-9b2971501e07)

When you run a test that depends on the **setup** tests, the **setup** test will run first. Each time you run the test, the **setup** test will run again. 

![running setup tests in vscode](https://github.com/microsoft/playwright/assets/13063165/a54b3868-3f9f-4e74-8d42-a93443f099fc)

### Running setup tests only once

To run the **setup** test only once, deselect it from the projects section in the Playwright sidebar. The **setup** test is now removed from the test explorer. When you run a test that depends on the **setup** test, it will no longer run the **setup** test, making it much faster and therefore a much better developer experience.

![deselecting setup tests in vscode](https://github.com/microsoft/playwright/assets/13063165/ebc50e38-c98d-4538-82fe-ec08491f8487)


## Global Setup

**Global setup** tests are run when you execute your first test. This runs only once and is useful for setting up a database or starting a server. You can manually run a **global setup** test by clicking the `Run global setup` option from the **Setup** section in the Playwright sidebar. You can also run **global teardown** tests by clicking the `Run global teardown` option.

Global setup will re-run when you debug tests as this ensures an isolated environment and dedicated setup for the test.

![running global setup](https://github.com/microsoft/playwright/assets/13063165/bcf5fec7-2d7d-4cb9-a277-5f41e19b8d52)

## Check out the video

{% embed https://youtu.be/mQmcIBMsc38 %}

## Useful links
- [Playwright documentation](https://playwright.dev/)
- [Subscribe to our YouTube channel](https://www.youtube.com/channel/UC46Zj8pDH5tDosqm1gd7WTg)
- [Star us on GitHub](https://github.com/microsoft/playwright)
- [Join our Discord server](https://aka.ms/playwright/discord)