無法在賽普拉斯中使用 PerformanceObserver

Question

是在 Cypress 中使用 PerformanceObserver 的方法嗎？ 對我來說，它似乎並不火。

我在劇作家那里做過

const { chromium } = require('playwright')

(async () => {
  const browser = await chromium.launch()
  const page = await browser.newPage()
  await page.goto('website')

  const totalBlockingTime = await page.evaluate(() => {
    return new Promise((resolve) => {
      let totalBlockingTime = 0
      new PerformanceObserver(function (list) {
        const perfEntries = list.getEntries()
        for (const perfEntry of perfEntries) {
          totalBlockingTime += perfEntry.duration - 50
        }
        resolve(totalBlockingTime)
      }).observe({ type: 'longtask', buffered: true })

      // Resolve promise if there haven't been long tasks
      setTimeout(() => resolve(totalBlockingTime), 5000)
    })
  })

  console.log(parseFloat(totalBlockingTime)) // 0

  await browser.close()
})()

這是我試過的，但它似乎沒有開火

let totalBlockingTime = 1;
cy.window().then((win) => {
  const o = new win.PerformanceObserver((list) => {
    const entries = list.getEntries();
    entries.forEach((entry) => {
      if (entry.entryType === "longtask") {
        totalBlockingTime += entry.duration;
      }
    });
  });
  o.observe({
    entryTypes: ["longtask"],
    buffered: true,
  });
});

Answer 1

我認為您擁有的代碼基本上是正確的，但是添加觀察者的時機對於賽普拉斯來說至關重要。

理想情況下，您希望在測試運行器設置 window 並即將加載頁面后添加它，因此onBeforeLoad事件。

我對longtask了解不多，除了它被標記為實驗性的，但這是一個使用mark和measure的概念驗證測試

cy.visit("http://example.com", {
  onBeforeLoad: (win) => {
    const o = new win.PerformanceObserver((list) => {
      list.getEntries().forEach(entry => {
        console.log("Name: "       + entry.name      +
                    ", Type: "     + entry.entryType +
                    ", Start: "    + entry.startTime +
                    ", Duration: " + entry.duration  + "\n");
      })
    });
    o.observe({
      entryTypes: ['measure', 'mark', 'longtask'],
      // buffered: true,                           // see note
    });
    win.performance.mark('registered-observer')    // issue mark
  },
})
  
cy.wait(1000)                 // vary this wait to see performance duration change

cy.window().then(win => {
  console.log('measuring...')
  win.performance.measure('after waiting');
})

筆記

buffer:true條目會引發警告

PerformanceObserver 不支持帶有 entryTypes 參數的緩沖標志。

控制台日志

Name: registered-observer, Type: mark, Start: 48.900000005960464, Duration: 0

measuring...
Name: after waiting, Type: measure, Start: 0, Duration: 1093.199999988079

Name: same-origin-ancestor, Type: longtask, Start: 1103.800000011921, Duration: 98