# Setting Up Playwright in VS Code

Setting up Playwright in Visual Studio Code (VS Code) is straightforward and can enhance your end-to-end testing workflow. This guide will walk you through the installation and initial setup of Playwright in VS Code, helping you get started with writing and running tests.

## Prerequisites

Before we dive into the setup, make sure you have the following installed on your system:

* [Node.js](https://nodejs.org/) (version 12 or higher)
    
* [Visual Studio Code](https://code.visualstudio.com/)
    

## Step 1: Create a New Project

First, create a new directory for your project and navigate into it using the terminal.

```bash
mkdir playwright-demo
cd playwright-demo
```

## Step 2: Initialize a Node.js Project

Initialize a new Node.js project by running the following command. This will create a `package.json` file in your project directory.

```bash
npm init -y
```

## Step 3: Install Playwright

Next, install Playwright and its dependencies by running the following command:

```bash
npm install --save-dev @playwright/test
```

## Step 4: Install VS Code Extensions

To improve your development experience, install the following VS Code extensions:

* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint): Ensures your code follows best practices and avoids common errors.
    
* [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode): Helps in maintaining consistent code formatting.
    
* [Playwright Test for VS Code](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright): Provides support for running and debugging Playwright tests within VS Code.
    

You can install these extensions directly from the Extensions view in VS Code.

## Step 5: Configure Playwright

Playwright requires some initial configuration to set up the testing environment. Run the following command to generate the initial configuration files:

```bash
npx playwright install
```

This command will create a `playwright.config.js` file and install the necessary browser binaries.

## Step 6: Create Your First Test

Create a new directory named `tests` in your project root. Inside this directory, create a new file named `example.spec.js` and add the following code:

```javascript
const { test, expect } = require('@playwright/test');

test('basic test', async ({ page }) => {
  await page.goto('https://example.com');
  const title = await page.title();
  expect(title).toBe('Example Domain');
});
```

This simple test navigates to [`example.com`](http://example.com) and checks if the page title is "Example Domain".

## Step 7: Run Your Tests

To run your tests, open the terminal in VS Code and use the following command:

```bash
npx playwright test
```

You should see output indicating that the test ran successfully.

## Step 8: Debugging Tests in VS Code

To debug your tests, you can use the built-in debugger in VS Code. Open the `example.spec.js` file, click on the gutter next to the line numbers to set breakpoints, and then run the debugger.

In the `launch.json` file in your `.vscode` directory, add the following configuration to enable Playwright debugging:

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Playwright Tests",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/@playwright/test/lib/test/cli.js",
      "args": ["${workspaceFolder}/tests"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "openOnSessionStart",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}
```

Now, you can run the debugger by selecting the "Debug Playwright Tests" configuration and hitting the run button.

## Conclusion

Congratulations! You have successfully set up Playwright in VS Code and run your first test. This setup will help you streamline your end-to-end testing workflow, making it easier to write, run, and debug tests.

Happy testing!

---