Overview of Playwright
Looking to automate your browser tests smoothly? One of the fastest ways to get started is to install Playwright, a powerful end-to-end testing framework built by Microsoft. Whether you’re working on Windows or macOS, Playwright makes it simple to write reliable tests for modern web applications.
In this guide, we’ll walk you through the complete Playwright setup process with quick steps, from installation to running your first test. You’ll also learn how to use npm init playwright@latest, install supported browsers, and even set things up in VS Code. Let’s get started and make your test automation workflow easier and faster!
Steps to Install Playwright Quickly
Playwright is lightweight automation framework and you can install in just 2 minutes. Before you Configure Playwright in VS Code, ensure that Node.js and Visual Studio Code are already installed on your system. If not, don’t worry, let’s walk through how to download and install both for your Playwright automation framework setup.
Step #1: Download and Install Node.js
Download Node.js
- Visit the official Node.js download Page.
- Click on the Get Node.js button. It will take you to the Node.js download page.
- Select your Operating system and download compatible Node.js version.
Install Node.js
- Run the Node.js installer, then simply follow the default setup instructions in the installation wizard.
Verify Node.js Installation
To verify Node.js Installation:
- Open the command prompt
- Run the node -v command
- You will now see the version of Node.js that’s installed on your system. This confirms that the installation was successful.
Step #2: Visual Studio Code Installation Steps
Download VS Code
- Go to the official Visual Studio Code download page to get the latest version for Windows or macOS.
- Select your operating system (Windows, macOS) and click on the “Download” button to begin.
Install VS Code
- Use the Visual Studio Code setup wizard to install VS Code on your Windows or macOS.
Launch VS Code
- Start Visual Studio Code by clicking its icon in the Start menu (Windows) or Applications folder (macOS).
Step #3: Configure VS Code and Install Playwright
Let’s set up Visual Studio Code by adding the Playwright Test extension and installing the Playwright framework.
Open a New Project Folder
- Create and open a folder named Playwright Automation in the D: drive. This will be your project workspace for setting up Playwright test automation.
- Click on File > Open Folder (or Press Ctrl + K then Ctrl + O) and select your workspace folder in VS Code.
Install the Playwright Test for VSCode Extension
- Search and install “Playwright Test for VSCode” extensions from the Extensions view (Ctrl+Shift+X)
Install Playwright
Now you’re all set to begin the Playwright installation process.
To Set up Playwright inside VS Code, just follow these easy steps and run a few quick commands in the terminal. This will complete your Playwright project setup and get your automation project ready to go.
- To open the terminal in VS Code, go to the top menu and click View > Terminal, or simply press Ctrl + ` on your keyboard.
- This will launch the integrated terminal in VS Code, where you can run the commands needed to configure Playwright in VS Code.
- In the integrated terminal of VS Code, type the following command and hit Enter to start installing the latest version of Playwright:
npm init playwright@latest
- This command will begin the Playwright installation steps using the most recent version available.
- Now, the terminal will prompt you with the question:
- “Do you want to use TypeScript or JavaScript?”
- Choose JavaScript and press Enter to continue with the Playwright test environment setup using JavaScript.
- Next, Playwright will ask:
- “Where to put your end-to-end tests?” with a default value of tests.
- Keep the folder name as tests and press Enter to continue the Playwright test automation setup.
- Next, Playwright will ask:
- “Add a GitHub Actions workflow? (y/N)” with a default value of false.
- You can type y to enable GitHub Actions integration or n to skip it and continue the Playwright setup process.
Playwright Supported Browsers Installation
- Next, Playwright will prompt:
- “Install Playwright browsers (can be done manually via ‘npx playwright install’)? (Y/n)” with the default set to true.
- Press Y to install all Playwright-supported browsers(Chromium, WebKit, and Firefox) automatically and continue the setup process.
That’s it!
Playwright will now install everything you need, the Playwright framework, supported browsers, and all required configuration files within a few seconds.
Now your Playwright project structure should look like the example shown below.
This folder structure is automatically generated during the Playwright setup and includes all necessary files for running your first test.
Step #4: Write and Run Your First Playwright Test
Write First Playwright Test
- Create a new test file named playwrightdemo.spec.js inside the tests folder.
- This file will contain your first Playwright test script and is part of the recommended Playwright project structure.
- Now, write the following Playwright test code inside your playwrightdemo.spec.js file.
- This script will open the Facebook login page and verify the page title.
// playwrightdemo.spec.js
const { test, expect } = require('@playwright/test');
test('Visit Facebook login page and verify title', async ({ page }) => {
// Navigate to Facebook login page
await page.goto('https://www.facebook.com/');
// Expect the page title to contain 'Facebook'
await expect(page).toHaveTitle(/Facebook/);
});Run First Playwright Test
- Running Playwright test in headed mode:
- To run your test in visual (headed) mode, open the VS Code terminal and enter the following command. This allows you to see the browser UI while the test runs.
npx playwright test tests/playwrightdemo.spec.js --headed- Running Playwright test in headless mode:
- To run your test without opening the browser UI, enter the command below in the VS Code terminal. This runs your Playwright test in headless mode, which is faster and ideal for CI/CD pipelines.
npx playwright test tests/playwrightdemo.spec.jsThe command above will run your Playwright test in all three supported browsers: Chromium, WebKit, and Firefox.
This ensures your test is cross-browser compatible and works across major browser engines.
View Test Result Report
Once the Playwright test execution is complete, you can view the HTML report using the command below. This report provides a detailed summary of your test results in a browser-friendly format.
npx playwright show-reportBasic Playwright Commands for Beginners
| Command | Description |
| npx playwright test | Runs all tests in headless mode by default. |
| npx playwright test –headed | Runs tests in visual (headed) mode to see browser UI during execution. |
| npx playwright test tests/filename.spec.js | Runs a specific test file (replace filename with your test file name). |
| npx playwright codegen | Launches the Playwright Inspector to auto-generate test scripts by recording user actions on a given URL. |
| npx playwright show-report | Opens the HTML test report in your browser after test execution. |
| npx playwright install-deps | Installs necessary dependencies, mostly used in Linux environments. |
| npx playwright open | Opens the specified URL using Playwright’s browser context, useful for debugging. |
Final Words
Installing Playwright is quick and beginner-friendly, especially when using Visual Studio Code. With just a few commands, you can set up Playwright, install supported browsers, and start writing automated tests in no time. Whether you’re testing on Chromium, Firefox, or WebKit, Playwright provides a reliable and powerful framework for modern test automation. Now that your setup is complete, you’re ready to write your playwright tests and explore all the features Playwright has to offer.
FAQs on Installing Playwright Using Visual Studio Code
What is Playwright used for?
Playwright is a lightweight, modern automation tool for testing web applications across multiple browsers like Chrome, Firefox, and Safari.
How do I install Playwright in Visual Studio Code?
First, install Node.js and Visual Studio Code. Then open VS Code, open your project folder in the terminal, and run npm init playwright@latest.
Is Node.js required to install Playwright?
Yes, Node.js is required because Playwright is a Node-based automation library. You must install Node.js before setting up Playwright.
Do I need to install browsers separately?
No, Playwright automatically installs Chromium, Firefox, and WebKit when you initialize it using the setup command.
Can I install Playwright on a specific drive like D:\?
Yes, you can install and run Playwright from any drive or folder as long as Node.js is properly configured in your system path.
What is the recommended code editor for Playwright?
Visual Studio Code is highly recommended because it offers extensions, syntax highlighting, and integrated terminal support for Playwright projects.
How do I verify if Node.js is installed?
You can open Command Prompt and run node -v. If installed, it will display the Node.js version number.
Does Playwright support cross-browser testing?
Yes, Playwright supports Chromium, Firefox, and WebKit, allowing you to run the same test on different browsers easily.
How do I run my first Playwright test?
After initializing Playwright, use the terminal to run npx playwright test and it will execute sample tests created during setup.
Hi, I’m Aravind — a seasoned Automation Test Engineer with over 17 years of hands-on experience in the software testing industry. I specialize in tech troubleshooting and tools like Selenium, Playwright, Appium, JMeter, and Excel automation. Through this blog, I share practical tutorials, expert tips, and real-world insights to help testers and developers improve their automation skills.In addition to software testing, I also explore tech trends and user-focused topics, including Snapchat guides, codeless test automation, and more.
