Playwright 101: Part-1 Network Analysis while running UI Automation

For the unawares Playwright is the famous new kid on the block in automation world.

It has gained immense popularity in couple of years due to its unique offerings which gives it an edge over its competitors.

Current trend of Playwright GitHub repo show 56K+ stars, 3.1k forks and frequent commits & releases.

Hearing good things we picked up Playwright quite early as a POC in our organization and found it be a quite reliable and robust framework.

Comparing it with our existing selenium based framework we found out be around 30% faster and less flaky.

Some exclusive features worth mentioning are:

• Auto waiting
• Muti-threading
• Trace Viewer
• Code Gen
• API testing

Coming back to topic at hand, we wanted to analyse the network data when running automation on our application. This will help us to identify any performance bottle necks along with functional issues.

Achieving this in a 2 step process:

• Capturing the network calls
• Reading & parsing captured info

Capturing Network Calls

Playwright creates independent browser sessions known as “Browser Context”, this class exposes some functions which can be used to capture network traffic in HAR files as well as replay this traffic in your tests.

• Starting Recording HAR programmatically:

BrowserContext context = browser.newContext(new Browser.NewContextOptions().setRecordHarPath(Paths.get(“<Name of HAR file>”));

• Saving the HAR file to disk

context.close();

Sample Code:

Checking file in mentioned file (/tmp/h1.har)

File contains all request and responses in entire flow:

Each n/w call made in the journey has been recorded in HAR file and includes response code, status, headers, cookies and response body as well as time taken by the API call.

For capturing specific network traffic

Now only the URL’s having “/api/” will be stored in HAR file

Extracting Network data from HAR file

Since the output file has a valid JSON we can use Object Mapper , GSON or similar over the counter library to extract the info. Below sample code shows how to extract request url, type, repose code and time taken

Sample Output:

Once this information is extracted we can store it in a DB and create a dashboard out of the data for further analysis.

That’s all for now folks, thanks for reading.

Stay Tuned for the next blog, we will explore the steps involved in capturing UI specific metrics using Playwright