Playwright 101: Part-2 Page Performance Analysis while running UI Automation

In previous blog we discussed about network traffic analysis using playwright, in this blog we will extend the discussion to page data analysis.

In the industry people mostly rely on Lighthouse reports for measuring UI performance. It grades the UI performance on basis of universally accepted UI standards collectively called as Core Web Vitals.

Sample report for URL: https://github.com/microsoft/playwright/graphs/code-frequency

What is Core web vitals?

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web. These are classified as below:

• Largest Contentful Paint (LCP): It measures the time taken between the user initiating page load to rendering largest image or text in page. Ideal range is within 2.5 sec.
• First Input Delay (FID): It tracks the time between user’s first interaction with webpage to the time when browser starts processing the interaction. Ideal range is less than 100ms .
• Cumulative Layout Shift (CLS): It helps to quantify how often user experience layout shifts such as banner getting loaded or page shifting down to load elements. Ideal range is 0.1 or less

To ensure we are providing good experience to most users visiting our webpage we need to ensure that 75th percentile of page loads are within above mentioned values.

Executing Javascript functions using Playwright

Playwright Page class provides us with evaluate() API function which can run a JavaScript function in the context of the web page and bring results back to the Playwright environment.

Browser global variables such as window, document etc can be used in evaluate()

Executing few of them in browser manually

Now executing the same using Playwright

O/P of above execution:

https://www.google.com/
https://www.google.com/

Measuring Core Web Vitals using Playwright

We can take advantage of playwright’s evaluate() method to extract the core web vitals from the browser using PerformanceObserver interface which stores all performance related data in the browser.

Supported Entries in PerformanceObserver

Executing JavaScript function from playwright:

page.navigate("https://github.com/microsoft/playwright");
page.click("#insights-tab");
 
page.waitForLoadState(LoadState.NETWORKIDLE);
String clsExpression =
    "var resultZ; var testZ = () => {new PerformanceObserver((list) => { resultZ = list.getEntries(); }).observe({type: 'layout-shift', buffered: true});}; testZ(); resultZ;";
String fidExpression =
    "var resultX; var testX = () => {new PerformanceObserver((list) => { resultX = list.getEntries(); }).observe({type: 'first-input', buffered: true});}; testX(); resultX;";
String lcpExpression =
    "var resultY; var testY = () => {new PerformanceObserver((list) => { resultY = list.getEntries(); }).observe({type: 'largest-contentful-paint', buffered: true});}; testY(); resultY;";
 
page.evaluate(clsExpression);
page.evaluate(fidExpression);
page.evaluate(lcpExpression);

Output:

CLS:[{name=, entryType=layout-shift, startTime=2800.2000000476837, duration=0, value=0.01586129421657986, hadRecentInput=false, lastInputTime=1449.2000000476837, sources=[{previousRect={x=704, y=1018, width=896, height=64, top=1018, right=1600, bottom=1082, left=704}, currentRect={x=704, y=1142, width=896, height=64, top=1142, right=1600, bottom=1206, left=704}}, {previousRect={x=704, y=1146, width=1792, height=294, top=1146, right=2496, bottom=1440, left=704}, currentRect={x=704, y=1393, width=1792, height=47, top=1393, right=2496, bottom=1440, left=704}}, {previousRect={x=1296, y=1114, width=608, height=48, top=1114, right=1904, bottom=1162, left=1296}, currentRect={x=1296, y=1361, width=608, height=48, top=1361, right=1904, bottom=1409, left=1296}}]}, {name=, entryType=layout-shift, startTime=2841.100000023842, duration=0, value=0.0011666666666666668, hadRecentInput=false, lastInputTime=1449.2000000476837, sources=[{previousRect={x=704, y=1142, width=896, height=64, top=1142, right=1600, bottom=1206, left=704}, currentRect={x=704, y=1078, width=896, height=192, top=1078, right=1600, bottom=1270, left=704}}]}]

FID: [{name=pointerdown, entryType=first-input, startTime=1449, duration=88, processingStart=1450.5, processingEnd=1451.5, cancelable=true}]

LCP:[{name=, entryType=largest-contentful-paint, startTime=1266.4000000357628, duration=0, size=26617, renderTime=1266.4000000357628, loadTime=0, firstAnimatedFrameTime=0, id=, url=}]

Similar values are shown by Lighthouse as well

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

Stay Tuned for the next blog, we will explore Playwright further.