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

Question

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

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

我试过使用 cy.clock() 但 returns 0。所以我可能在那里做错了什么。我使用了 performance.now() ，它有点管用，但无论加载时间如何，总是 returns 相同的值。我用过 Date.getTime()，但也用过 returns 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

在我的例子中，我需要在点击后准确测量页面加载时间，所以我编写了以下代码：

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 3

有一个 cypress-timings 给出了每个 cypress 命令的一般时间。安装以下内容并将其添加到 support/index.js

中非常简单

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

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

Using cypress, measure page load time

performance

integration-testing

typescript

cypress