使用 cypress，测量页面加载时间

Question

我正在使用 cypress 来测试网站，我需要一种方法来测量加载或执行某些 cypress 命令所需的时间。例如：

//var startTime = SomeStopwatchFunction();
cy.visit("/a website");
cy.get("Some item");
//cy.log(SomeStopwatchFunction - startTime);

我尝试使用

cy.clock()

但返回 0。所以我可能在那里做错了什么。我使用过

performance.now()

，它有点工作，但无论加载时间如何，总是返回相同的值。我使用过

Date.getTime()

但它也返回 0。它与 cypress 执行代码的方式有关，但似乎没有任何作用。

Answer 1

您正在测量 Cypress 队列上异步发生的事情，因此您还需要使用

cy.wrap()

将计时命令插入队列中。

否则它们将在页面加载之前执行并给你一个非常小的差异。

const t0 = performance.now()
cy.visit("/a website");
cy.get("Some item");
cy.wrap(performance.now()).then(t1 => {   // this is now a queued command which will 
                                          // only run after the previous command
  cy.log(`Page load took ${t1 - t0} milliseconds.`);
})


 

Answer 2

接受的答案（来自用户9161752）可能会导致奇怪的结果。就我而言，持续时间大约太长了 5 秒。在我看来，

const t0 = performance.now()

在

beforeEach

中的内容运行之前被调用，因此结果包含了我的情况下登录过程的持续时间。

所以你还必须异步设置开始时间。这对我有用：

let start = 0;
cy.then(() => {
    start = performance.now();
});
cy.visit("/a website");
cy.get("Some item").then(() => {
    cy.log(`duration: ${performance.now() - start} ms`);
});

Answer 3

有一个 cypress-timings 给出了每个 cypress 命令的一般时序。安装并将以下内容添加到您的

support/index.js

中非常简单

import { commandTimings } from 'cypress-timings'
commandTimings()

Answer 4

就我而言，我需要测量点击后的页面加载时间，所以我编写了以下代码：

cy.get(loginLoginBtn).should('exist').then(() => {
        const t0 = performance.now();

        cy.get(loginLoginBtn)
        .click()
        .location('pathname').should('eq', '/package_selection')
        .wait('@recentProfiles').its('response.statusCode')
        .should('eq', 200)
        .then(() => {
            const t1 = performance.now();
            const packagePageLoadTime = ((t1 - t0) / 1000);
            cy.log(`Page load took ${packagePageLoadTime} seconds.`)
            cy.writeFile(packagePageLoadFile, '[]', {flag: 'w+'});
            cy.readFile(packagePageLoadFile).then((writeTimeToFile) => {
                writeTimeToFile.push({dateOfExecution: executionDate, timeInSeconds: packagePageLoadTime});
                cy.writeFile(packagePageLoadFile, writeTimeToFile);
            });
            expect(packagePageLoadTime).to.be.lessThan(5);
        })
    });

Answer 5

计时页面加载的最简单方法是使用提供的事件。

这样您就不必担心测试设置中出现的

before()

挂钩代码或其他“内务”命令。

cy.visit('http://localhost:3000/#/users', {
  onBeforeLoad: (win) => {
    win.t0 = performance.now()
  },
  onLoad: (win) => {
    t1 = performance.now()
    cy.log(`Page load took ${t1 - win.t0} milliseconds.`)
  },
})