---
title: Playwright VS Code extension Installation and Execution
description: "**Installation of Playwright VS Code extension** **& Execution** \\* **Steps to Install Playwright VS Code extension** **1. Open the Extensions view.** In VS Code, click the Extensions icon on the left (or press Ctrl+Shift+X). ![](https://vinothqaacademy.com/wp-content/uploads/2025/08/pw12-1024x677.png) **2. Search for the extension**…"
url: "https://vinothqaacademy.com/docs/playwright-vs-code-extension-installation-and-execution/"
updated: "2025-08-24"
category: Playwright
tags:
  - Playwright Tutorials
---

# Playwright VS Code extension Installation and Execution

**Installation of Playwright VS Code extension**

**& Execution**

\* **Steps to Install Playwright VS Code extension**

**1. Open the Extensions view.**

In VS Code, click the Extensions icon on the left (or press Ctrl+Shift+X).

![](https://vinothqaacademy.com/wp-content/uploads/2025/08/pw12-1024x677.png)

**2. Search for the extension**

In the “Search Extensions in Marketplace” box, type: Playwright

![](https://vinothqaacademy.com/wp-content/uploads/2025/08/pw13.png)

**3. Pick the correct one**

Select **Playwright Test for VSCode** — publisher **Microsoft** (blue verified tick).

![](https://vinothqaacademy.com/wp-content/uploads/2025/08/pw14-1024x387.png)

**4. Install**

- Click **Install** on the extension details page.

- Wait until you see **Disable** / **Uninstall**, which confirms it’s installed.

![](https://vinothqaacademy.com/wp-content/uploads/2025/08/pw15-scaled.png)

**5. Open the Testing view & Verify tests are discovered**

- Click the Testing icon in the left sidebar(Bottom last).

- Under **TEST EXPLORER**, you should see your Playwright tests (e.g., `tests/example.spec.ts`) listed.

![](https://vinothqaacademy.com/wp-content/uploads/2025/08/pw16-1024x854.png)

**6. Choose browsers, quick settings (optional) & Execution**

- In the **PLAYWRIGHT** panel, ensure **chromium**, **firefox**, and **webkit** are checked.

- Optionally tick **Show browser** (headed mode) or **Show trace viewer**.

- Click the **Run Test** ▶️ button next to the test file/suite (or the top “Run” icon).

![](https://vinothqaacademy.com/wp-content/uploads/2025/08/pw17-428x1024.png)

**7. View results**

- Check **TEST RESULTS**: you’ll see green checkmarks for each test across the selected browsers (e.g., “6 passed” when two tests run in three browsers).

![](https://vinothqaacademy.com/wp-content/uploads/2025/08/pw18-1024x362.png)

\* ****Running Playwright Te**sts using Terminal**

**1. Open the terminal in VS Code**

- Run the following command

```
npx playwright test
```

- Playwright will automatically execute all the tests defined inside the tests/ folder.

![](https://vinothqaacademy.com/wp-content/uploads/2025/08/pw19-1024x404.png)

**2. Generate and View the HTML Report**

- After the tests complete, Playwright suggests a command to open the last test report.

- Run the following command

```
npx playwright show-report
```

- This will start a local server and display the HTML report in your browser.

![](https://vinothqaacademy.com/wp-content/uploads/2025/08/pw20-1024x181.png)

**3. Analyze the Test Report**

The report provides a **detailed breakdown** of each test:

- ✅ Passed / ❌ Failed / ⚠️ Flaky / ⏭ Skipped
- Execution time for each test
- Browser-wise results (Chromium, Firefox, WebKit)

![](https://vinothqaacademy.com/wp-content/uploads/2025/08/pw21-1024x501.png)

**✅****Summary**

With just two commands, you can run your Playwright tests and instantly get a professional HTML report:

1. Run tests → npx playwright test

2. Open report → npx playwright show-report