arbisoft brand logo
arbisoft brand logo
Contact Us

How to Install and Use Playwright for Web App Testing - A QA Beginner's Guide

Asfa 's profile picture
Asfa AkbarPosted on
9-10 Min Read Time

Have you ever wondered what the Playwright tool is and why everyone is talking about it? Automation is changing, and Playwright is leading the way. But why is it so important? Let’s dive into what Playwright is, explore its amazing features, and see how to set it up and install it. In this blog, I have shared super easy steps to help you understand the installation process, so any beginner can easily follow it.

 

What is Playwright tool?

  • Playwright is a tool developed by Microsoft. 
  • It is a test automation tool. 
  • It is to test web apps.

Purpose

  • End-to-end testing
  • Cross-browser testing
  • Support for Web, Mobile Web, and API testing

 

 

Main Features of Playwright 

  • It's a free and open-source framework. 
  • It supports multiple browsers, multiple languages and multiple OS. 
  • It's easy to set up and configure. 
  • Testing like Functional, API, and accessibility testing can be performed with Playwright. 
  • It has built-in reporters, but you can also add custom reports. 
  • It supports CI/CD and Docker. 
  • The Playwright has the option to create and explore selectors for you. 
  • It supports recording and debugging. 
  • Playwright itself is fast but it also provides parallel testing capability. 
  • Auto wait is a built-in feature in Playwright. 
  • Built-in assertions are present in Playwright. 
  • Tests are less flaky.
  • There are options to retry logic and generate logs.
  • It provides options for screenshots and videos. 
  • It supports multiple tabs and multiple windows. It is a very important feature of Playwright. 
  • Playwright can handle frames and shadow DOM objects. 
  • It can emulate mobile devices and geolocations. 
  • It also supports test parameterization.

Supported Applications:

Applications that the Playwright supports:

 

  • Web browser applications
  • Mobile web apps 
  • API 

Supported Languages:

Languages that the Playwright supports:

 

  • JavaScript
  • Typescript
  • Java
  • Python
  • .NET (C#)

Supported Browsers:

Browsers that the Playwright supports:

 

  • Chromium
  • Webkit
  • Firefox

Supported Operating System (OS):

OS that the Playwright supports:

 

  • Windows
  • macOS
  • Linux
  • CI runs

 

Prerequisites for Installing Playwright

  • Install Node.js (npm –version or npm -v)
  • Visual Studio Code (or any preferred code editor)
  • Supported OS:
    • Windows
    • MacOS
    • Linux
  • Basic understanding of JavaScript/TypeScript

 

How to Install Playwright?

To install Playwright, follow the steps:

Step 1: Install Node

  • Write command: npm –version or npm -v. 

 

Npm is the node package manager that gets installed along with node.  It will show that the node is installed and display its package details. 

 

image4.png
 

  • Node –version or node -v

 

It will show the version of the node.  
 
 

image8.png
 

 

Step 2: Setup IDE (Integrated Development Environment)

  • Visual Studio code.

 

Create a folder and open it in VS Code. 

 

image2.png

 

Step 3: Installation of Playwright in VS code

a) Create a folder in VS Code. E.g. PlaywrightProject
b) Go to the terminal and run commands: npm init playwright@latest. 

 

It will install the latest Playwright. 

 

image1.png

 

  • Do you want to use TypeScript or JavaScript? … JavaScript
  • Where to put your end-to-end tests? · tests
  • ✔ Add a GitHub Actions workflow? (y/N) · true
  • ✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true
  • Initializing NPM project (npm init -y)…

 

The Playwright is installed. 

 

image7.png
 

 

image5.png

 

 

The following are the files that will be added:

 

  • Package.json: This is a very essential file that manages the Node project. It shows all the libraries that we have added in the project.
  • playwright.config.js: It contains all the configuration files. 
  • Tests Folder: It has test example files in it. 
  • Gitignore File: It is used during commit and push.
  • Playwright.yml:  It is used during CI/CD testing. 

 

c) To check if Playwright is added, run the command: npm playwright -v
 

It will show the version of Playwright. 

 

image6.png
 

 

d) To check the playwright command options, run the  command: npx playwright –help or npx playwright -h

 

image3.png
 

 

Running Playwright Tests

There are very useful commands for running tests in Playwright. There are simple commands to run tests easily. Now, a QA engineer can run single or multiple tests in one or more browsers simultaneously. It is an easy and efficient way to run tests, saving QA time and effort.

The following are the commands:

 

Command

Description

npx playwright testRuns all tests on all browsers in headless mode
npx playwright test --workers 3Runs with 3 workers in parallel
npx playwright test one.spec.jsRuns a specific test file
npx playwright test one.spec.js two.spec.jsRuns the specific file that you want to test
npx playwright test one twoRuns files that have one or two (name) in the filename
npx playwright test -g check titleRuns test with a matching test title
npx playwright show-reportIt shows the report of the running test
npx playwright test --project=chromiumRuns tests on a specific browser (Chromium)
npx playwright test --headedRuns tests in headed mode (browser visible)
npx playwright test --debugDebug tests that you run
npx playwright test example.spec.js --debugDebug a specific test file
npx playwright test example.spec.js:21 --debugDebugging from a specific test line

 

 

 

 

 

 

 

 


 

 

Conclusion

Playwright is a very useful tool for automating test cases. It has significantly reduced the manual effort required to test applications repeatedly. It is easy and convenient for QA engineers to use. Many businesses are moving their automation frameworks to Playwright because of its strengths in automation.

 

With the help of AI, it has become even easier to use Playwright, as AI has built-in features that assist in writing code. One can use different AI platforms to write test cases here. Using Playwright, anyone can write test cases with the help of AI. This is a significant advancement in the field of automation.

 

I have described a simple and beginner-friendly way to install Playwright and explained its features and importance. I hope this blog has helped you understand the installation process of Playwright, and that you were able to install it easily just by following my instructions. Thanks for reading!

Explore More

Have Questions? Let's Talk.

We have got the answers to your questions.