[Feature] Extraction of Performance metrics for soft navigation steps in SPAs

[sahajkotha]

Let us know what functionality you'd like to see in Playwright and what your use case is.

Playwright is widely known for its functional testing uses, an extension of Playwright to extract performance metrics for SPAs can help in a wider adoption. Currently, Playwright enables us to extract some of the performance metrics using the browser APIs but these work only for hard navigations, and these metrics do not get updated in cases of soft navigations in SPAs as the initial HTML document is typically loaded once, and subsequent navigation or state changes are handled by JavaScript frameworks or libraries.

Do you think others might benefit from this as well?

Soft navigation steps are an important part of web applications, as they allow users to navigate between pages without triggering a full page reload. However, measuring the performance of these steps can be challenging, as they do not always result in a clear change in the URL or page content. The ability to extract performance metrics would be especially useful for developers who are working on optimizing web applications.

Proposed solutions: In my project, I have created some common utils that are Higher order functions that accept Playwright scripts to perform some user actions and this function returns the time taken to perform these actions with the use of manual start and stop timers.

Sample code snippets:

await measurePerformance(async () => {
   await page.goto( 'https://www.easemytrip.com/);
  }, 'NavigateToEasemytrip');

  await measurePerformance(async () => {
   await page.getByText('Bangalore(BLR)').click();
   await page.locator('#toautoFill').getByText('Delhi(DEL)').click();
   await page.getByRole('button', { name: 'Search' }).click();    
   return page;
  }, 'SearchFlight');

In the above snippet, measurePerformance is the HOF and its internal implementation looks like this:

async function measurePerformance(executeSteps, stepName) {
    const start = performance.now();
    const page = await executeSteps();
    const end = performance.now();
    const timeElapsed = end - start;
    perfMetrics[step] = {
      stepName,
      timeElapsed: timeElapsed.toFixed(2),
}
step++;
}

To capture the latency of APIs, I'm making use of a listener requestfinished:

function captureRequests(page) {
    page.on('requestfinished', async request => {
        const timing = request.timing();
        const latency = timing.responseEnd - timing.requestStart;
         return latency;
    });
}

Can you suggest if there are better ways to evaluate the performance of soft navigation steps or if the above methods can be added to Playwright and expose them for users to measure the latency. Thanks in advance.

[BhaskarPhukan]

is there any update on this proposed feature?

[pavelfeldman]

Why was this issue closed?

Thank you for your involvement. This issue was closed due to limited engagement (upvotes/activity), lack of recent activity, and insufficient actionability. To maintain a manageable database, we prioritize issues based on these factors.

If you disagree with this closure, please open a new issue and reference this one. More support or clarity on its necessity may prompt a review. Your understanding and cooperation are appreciated.