Playwright Introduction

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!

Share On

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on tumblr
Share on email

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Lifetime Membership Club

LIFETIME MEMBERSHIP BIG SALE - ALL LIVE COURES JUST - 7000 RS/ 99 USD
Attend All Live courses in just 7000 rs / $99 - offer ends 1st Nov 2024