如何使用 Cypress 或任何其他 UI 自动化工具捕获性能监视器和 Javascript Profiler

Question

有没有一种方法可以使用 Cypress 自动捕获浏览器 DevTools 中的

Performance Monitor

和

Javascript Profile

数据？ 或任何其他 UI 自动化工具，可以在浏览器页面上执行任何单击时实现此目的。

例如导航至

https://develop.convosight.com/about/

并单击

About

链接。捕获此流程的 CPU 利用率和配置文件。

Answer 1

您可以使用 Console Utilities API 并利用

cy.window()

调用来调用探查器。看起来您可以使用它来分析正在采取的特定操作，结果会作为单独的分析会话出现在下拉列表中的性能面板中。

这还允许您使用不同的有效负载和模拟端点运行探查器，以根据需要获取组件、webgl 等案例，并且它还具有可重复的额外好处。

您可能需要打开 DevTools 并为要保留的内容设置标志（CPU 是默认值，但也支持内存和屏幕）。

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

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

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

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