Table of Content
- What is Playwright?
- Prerequisites
- How to download and install Node Js
- How to download and install Visual Studio Code
- VS Code Extensions
- Run Test
- Conclusion
What is Playwright?
Playwright is a free open-source framework for web and mobile automation testing created by Microsoft. The main objective of Playwright Node.js is to provide a single API to support software development teams to automate web and mobile apps in all the three major browser engines (Chromium, WebKit, and Firefox). It is widely used as part of software automation testing services to ensure cross-browser compatibility and seamless functionality.
Prerequisites
- Before installing Playwright, make sure you have the following installed:
- Node.js → Download here
- Install Visual Studio Code → Download here
How to download and install Node Js
Step 1: Install Node.js
1. Visit nodejs
2. Download the LTS (Long-Term Support) version
3. Install Node.js by following the setup wizard
Verify installation by opening the terminal or command prompt and running:
node –v
npm –v
How to download and install VS code
Step 1: Install VS code
Visit visual studio
Download and install the.exe file for Windows
Step 2: Run the Installer:
- Follow the setup wizard
- Choose options like "Add to PATH" and "Register as default editor" (recommended)
Step 3: Launch VS Code after installation
Let’s add Playwright to VS Code via VS Code extensions.
Step 1: Create a folder in your file directory (wherever you wish to store your projects) and add it into VS code.
Created a new folder in file directory
Step 2: Open the VS code and click on the File >> Open folder >> Select the create folder.
Folder is now added to VS code
Step 3: Navigate to extensions section in VS Code and install Playwright extension by Microsoft.
Click Extension section from side menu
Search and select Playwright by Microsoft and install it
Step 4: Once Playwright installation is complete, go to “View” option from top menu bar
Click on “Command palette” >> type “Playwright” >> select “Install Playwright” >> check the required check boxes of browsers you need to work with >> and click “OK”
- This will install all the libraries and create project folders.
Searching Install Playwright in command palette >> select and installing all libraries by clicking “OK” button
- There are some advantages of using VS Code extension for Playwright instead of command prompt because this gives options to directly run our tests, debug tests etc.
Step 5:To view all the options like run, debug, refresh and different browsers to run the tests as well.
Click on “Command palette” >> type “Playwright” >> select “Testing focus on Playwright view”.
How to get to Playwright view using command palette
Playwright view
How to Run tests in Playwright?
Step 1: To install all the configurations and packages, run the below command >> npm init playwright@latest
- By default, it will create a test folder under the project.
- Need to first navigate to the tests folder in the playwright project, Inside the “tests” folder >> Write the script (e.g: Login script) and save it as a “Login.spec.js”
Test folder in playwright project
Step 2: Open the terminal and run the command >> npx playwright test
Test run by using command
- After successfully execution it is basically executed on headless mode so by default playwright will execute all the tests in a headless mode. Cannot see any browser launching or any UI.
- The one command that need to provide, and will open the browsers, and can see execution on the browser.
Step 3: Run the command >> npx playwright test --headed
- It will execute on the Headless mode and the HTML report generated by default
Step 4: To show the HTML report run the below command: npx playwright show-report
TTest report generated by playwright
- Test will run in all the available browsers.
- If want to run any specific file, then use this command >> npx playwright test Login.spec.js
Here’s a list of Playwright test run commands:
| Command | Description |
| npx playwright test | Runs all tests on all configured browsers in headless mode (no UI). |
| npx playwright test login.spec.js | Runs a specific test file (in this case, MyTest.spec.js). |
| npx playwright test MyTest.spec.js --project=chromium | Runs the specific test file only in the Chromium browser. |
| npx playwright test MyTest.spec.js --project=chromium --headed | Runs the test file on Chromium in headed mode (opens browser window). |
| npx playwright install | Installs the necessary browser binaries (Chromium, Firefox, WebKit). |
| npx playwright show-report | Opens the HTML report of the last test run. |
Conclusion:
Testing web apps across multiple browsers or integrating tests into a CI/CD pipeline, Playwright’s seamless integration with development tools makes it an ideal choice for modern test automation. This guide has provided a step-by-step walkthrough to help you get started quickly and confidently.
About Author
Divya Panchal is an ISTQB-certified QA Tester at PixelQA a Software Testing Company with expertise in both manual and automation testing. She has evolved from a trainee to a key contributor across multiple projects, consistently ensuring software quality and reliability. With a strong focus on continuous professional development, Divya is dedicated to expanding her knowledge in automation and API testing, underscoring her commitment to delivering high-quality software solutions.