How to capture Performance Monitor and Javascript Profiler using Cypress or any other UI automation tool

Question

Is there a way to Automate capturing the Performance Monitor and Javascript Profile data which is present in browser DevTools using Cypress for every new click? Or any other UI Automation tool which can make this possible while performing any clicks on the browser page.

E.g Navigate to https://develop.convosight.com/about/ and click About link. Capture the CPU utilization and profile for this flow.

Answer 1

You can invoke the profiler using the Console Utilities API and leveraging the cy.window() call. It looks like you can use this to profile specific actions being taken, and the result comes through in the performance panel in the drop down as a separate profiling session.

This will also allow you to run the profiler with different payloads and mocked endpoints to get at your components, webgl, etc. cases as you need to, and it also has the added benefit of being repeatable.

You may need to open the DevTools and set the flags for what you are retaining (CPU is default, but memory and screens are also supported).

describe("About", () => {
    it("PROFILING - Show Panel", () => {
        cy.open("/");

        cy.window().then(() => {
            console.profile("Load About");
        });

        cy.get("#about").click();

        cy.window().then(() => {
            console.profileEnd("Load About");
        });
    })
})