I. What is a Playwright?

Playwright is an open-source framework for web automation created by Microsoft. It is a framework

aligned with a single API usage for Chromium, Firefox, and Web Kit. Various programming languages
support it, such as Python and Java, Net, and Javascript. The primary function of Playwright is to provide
reliable end-to-end testing to new Web applications or APIs.

 Features of Playwright :

o Open source: In simple language, the term “Open source” can be defined as a source
everyone can use. Playwright is an open-source tool that can be installed in any system
without any licensed platform through various code editors such as Vs. Code.

o Multi-Browser/Multi-Language/Multi-OS: Playwright is an end-to-end testing framework

used by several browsers in the same period. It can be installed on Linux or Microsoft
Systems and performed in various languages such as Javascript, Typescript, Java,
Python, .Net, etc.

o Easy Setup and Configuration: Installation of this tool on an operating system is

straightforward. It involves a series of commands, and Configurations are much simpler to
understand and interpret.

o Functional/API/Accessibility testing: Various kinds of Functional tests, Application

programming interfaces, or Accessibility tests can be performed simultaneously on the
Playwright tool through various windows.

o Built-in reporters/Custom Reporters: Built-in reporters are the reporters who provide
detailed information about the failures present in the code. These reports can be created in
HTML and JSON files. The playwright doesn’t need additional reporters to provide their
errors as they are present within the tool.

o CI CD /Docker support: CI CD refers to continuous integration and deployment. It is a

process that ensures quality assurance and perfect software delivery with zero errors
through continuously changing events. Playwright tests can be executed in a CI-based
environment. Docker is software used to build, test, and deploy applications using
containers. Container refers to the delivery of the application in the form of packages.
Docker can be used to deploy the application in the Playwright framework to be delivered in
containers.

o Recording/Debugging/Explore Selectors: Recording of the testing phase of any application

can be done by using specific features of this framework, such as Codegen, Trace-Viewer,
and Playwright Inspector. Selectors can be chosen based on the abovementioned features
and later in the document.
 o Parallel testing (Multiple browser Testing): Testing can be done on various browsers
through various tests simultaneously using Playwright. This helps for more accessibility and
adaptability of the applications across multiple browsers.

o Auto-Wait: Playwright is enabled with a feature called auto-wait. This strategy makes the
test script wait till the element appears and becomes ready for further actions. Due to this
strategy, explicit waits need not be applied to the test script as in other automation testing
frameworks.

o Built-in Assertions: Built-in assertions (Backend assertions) help the test case to provide less
flaky tests.

o Test retry, logs, Screenshots, and Videos: Playwright provides tools such as Playwright
Inspector to record the test execution through various stages using screenshots and video.
Tests can be retried again and again with the help of the logs.

o Fast: Playwright’s execution speed is much higher than selenium's. It even provides Auto-
wait's built-in feature to wait for the web page to load. Selection of selectors can be done
during Inspection, making it much faster than selenium.

II. Playwright Architecture:

Playwright has a unique client-server architecture that provides effective communication
between the client and the server. The test is served through a phased web socket to the
Playwright server, which then connects to various browsers such as Chromium, Microsoft Edge,
Firefox, Web Kit, etc. To understand this, let us demonstrate with a diagram.

Web Socket
PLAYWRIGHT
TEST
Server
 The above diagram shows that the web socket is responsible for the interaction between
the test script and the framework server.
So, What is a Web Socket ??. A web socket is an interactive resource that handles
multiple requests between the user(client) and the server. So, is the Web socket the same as the HTTPS
requests ???. No, it's not. The diagram below tries to distinguish these two communication channels to
understand this difference.

WEB SOCKET

HTTPS Handshake

CLIENT SERVER
Bi-Directional Messages

The diagram shows a single communication channel between the client and the server, which is
responsible for the user and server interaction. This is done using a handshake to create a channel for a Bi-
directional conversation. There is no need to establish HTTP requests again and again using Web Socket.
This provides an impetus for the smooth transition to the browser interface. This is not the case with other
testing frameworks, such as Selenium, which uses HTTPS(Hyper Text Transfer Protocol Server) requests
from the client through various channels to communicate to the server several times. But what is an HTTPS
request? Let's dive a little into HTTPS requests. HTTPS requests are Single-Directional usage communication
channels. These channels are “One-Directional,” i.e., they cannot process/use the same communication line
repeatedly.

III. Installation of Playwright on Windows:

Here are the steps to install Playwright on Windows using code editor VS code:

1. Install Vs. Code into Windows using the following steps :

 Go to https://code.visualstudio.com/
 Download the Vs. Code based on the System parameters.
 Change the path variables in the environment variables for the complete installation
of the VS. Code.
 Additionally, download Node js into the system to download the Playwright
framework completely.
 The framework appears as mentioned below.
 2. Open a folder in the Vs. Code using the New Folder option given on the screen. Go to the
terminal and type the following command given below :

npm init playwright

After the following command, Choose a scripting language between Javascript and
Typescript. Editor will install required libraries for playwright and the browsers on which the
following tests may be conducted. npm may not be installed in the Vs.code if one receives
such results during installation, as given below.

If such prompts emerge, we can use the following steps to rectify the above problem:
o checking the path variables for the npm package in the environment variables is advisable.

o Install Node js as mentioned above to rectify the problem if it is not present. You can also install
npm in the Vs. Code, but installing the Node JS in the system for path variables is advisable.

The playwright downloads the browser files again to accommodate testing. After installing
Playwright and the browser files, we can create the first testing script using Javascript or Typescript.

IV. Test Script Structure:

 To run the first test script, create a file with a name in the format given below:
File_name.spec.js
 Import Keywords that are necessary to create a test block, such as test and expect
from the Playwright libraries using the following Script expression :
import {test, expect} from ‘@playwright/test’
  Open the testing block through which the test script can be written using the following
format:
test(‘test_name’, async({page}) => {
Set of Statements
});
Let us create a basic test script to understand the basic test scripting structure further using VS.Code.
The below test script explains the basic test script to open a Google web page.

But this test script failed. This is mainly due to the loading of the page. To avoid this, we need keywords
such as “await” to wait to move to the following line after completing the first line. But what is responsible
in the test case for causing this? This is done by the keyword “Async”.
o Async is mainly used to command the test script to move to the following line with/without
executing the first line. However, this may cause irregular execution. To avoid this, we use Await.

o Await is primarily used to describe the page to move to the following line once the first line is
completed.
But why are async and await used??. Node js is asynchronous. These are used for the smooth scripting
transition. To solve each line in the script entirely, we use the terms async and await to complete the
promises made by the asynchronous function.
Let us define the terms most commonly used in test scripting in Playwright to understand the anatomy of
the test script deeply.
♦ Test: This is mainly used to introduce the test script to the server.
♦ Page: Page refers to a single tab or a window. It is mainly used to navigate the URL or the content in
the website or the browser.
♦ Import: Import is mainly used to provide the keywords from the libraries of Playwright Framework.
♦ Expect: Expect is mainly used to check whether the given element based on the reference is present
on the browser page or not. It is similar to the if-else statement used in programming languages
such as C, C++, Java, etc.
So, using import, we import keywords such as test and expect from the library to create the test scripts
with the help of Keywords such as Page to navigate the content of a given subject.

V. Locators/Selectors:
Locators are a way to find and interact with the elements present in the webpage or a
browser you want to be involved with. Several types of locators are used to find the object you want to
interact with. But first, let us try to understand the essential/primary kinds of methods to find these
locators.
 These methods include :
♦ Absolute path: Absolute path is the method that is mainly used to find the elements using the root
dictionary and a full path to the file.

♦ Relative path: Relative path is the method that points to the file location on the page where the
element is located. Unlike the Absolute path, Relative path does not include the domain name of
the file.
Both methods are essential for the location of the element, but most often used path in testing is Relative
path. The locators are found using the method “Selectors.”
o Selectors: Selectors are the String/Properties of Web Objects which are used to create Locators.

There are different types of Selectors that use the relative path to find the elements on the web page.
These include :
♦ ID
♦ CSS Selector
♦ XPath
♦ Class
♦ Link Text
♦ Partial Text
♦ Tag Name

The above methods are the most common methods that are used to Locate the elements in the webpage.
The syntax in order to find the elements is similar to all the selectors in the way of representation .
For,
CSS Selector: await page. locator(“ Css Selector reference”)
XPath : await page. Locator(‘Xpath=//input[Xpath reference])
Link Text: await page.Locator(“Text_reference”)
Similarly for the case of ID, Tag Name etc .