Tutorial 1 - Introduction to Playwright
Welcome you all to the brand new ‘Playwright Automation’ blog series! In this entire series, we would be learning about Playwright Test Automation tool. We would be starting with basics and then move to advance topics. So let’s begin!!
What you will Learn in this blog:
Playwright Quick Overview
Setup Node.js in Windows OS
Setup Visual Studio Code Editor
Setup Playwright folder
Create package.json file
Install @playwright/test
Install browsers for playwright testing using simple command
Playwright Quick Overview
Playwright is the most recent Test Automation tool in the software testing industry. It is developed and supported by Microsoft and is one of the best tools for UI and API testing. Playwright does not require any complicated configuration. Everything like – Typescript, assertion library, Test runner etc are packed by default inside playwright.
https://playwright.dev/ is the official documentation for Playwright
Setup Node.js in Windows OS
Node.js is the pre-requisite for playwright.
To setup Node.js, refer steps a and b in the blog https://www.way2automation.com/install-cypress-on-windows-os/
After installing Node.js, open command prompt and execute ‘npm’. If you see below output, than it means that Node.js is correctly installed in your machine 
Setup Visual Studio Code Editor
To write our Playwright scripts, we need Visual Studio code editor (just like we use Eclipse IDE to write java code).
To setup Visual Studio Code Editor, refer step f in the blog https://www.way2automation.com/install-cypress-on-windows-os/
Type ‘Visual Studio Code’ in windows start panel
Open ‘Visual Studio Code’ application
Setup Playwright folder
Create a Playwright folder on your machine. Give it any name
Open this folder in visual studio code editor
Next, we will opena a terminal ‘Terminal > New Terminal’
We can now see a terminal with default folder location
Create package.json file
The package.json file contains the information about our project, script and list of installed packages.
Execute ‘npm init’ command to create package.json file
We would be asked to enter the package name as shown above. Hit Enter to keep the default.
Similarly, keep hitting ‘Enter’ for rest of the questions as well
As shown below, type yes at the end and hit Enter
Notice below that package.json file is created under the folder
Click this json file to see its contents on the right hand side
Install @playwright/test
Let us now install playwright/test package.
On the terminal, execute the below command and hit Enter:
npm install @playwright/test
See below, the playwright packages are installed
Open json file again.
Notice below that ‘dependencies’ section is added. This section shows the playwright version 1.23.0 that got installed
Install browsers for playwright testing using simple command
Next, we will execute a simple command to install all the browsers required for playwright testing. The command is:
npx playwright install
Notice below that Chromium/Firefox/Webkit browsers are now installed. Webkit browser engine is used by safari.
In the next article, we would write our first playwright test.
Thank you for reading!