使用 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

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

这样您就不必担心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.`)
  },
})

Answer 2

您正在测量 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.`);
})