UI测试-用户交互和系统之间的响应时间

Question

我正在使用REACT技术测试SPA Web应用程序（使用javascript），目前，我想创建自动测试，以测量相关REACT组件的渲染时间。对于GUI测试，我使用puppeteer + jest。您是否知道一些好的做法，技术，最佳的解决方案，以及如何为此编写好的测试？ 我知道React Developer工具，但不知道如何与puppeteer一起使用

这是我的小主意：D

const start = async () => {
  const date = new Date();
  startTimeStamp = date.getTime();
  // console.log(startTimeStamp)
  return startTimeStamp;
};

const end = async () => {
  const date = new Date();
  endTimeStamp = date.getTime();
  // console.log(endTimeStamp)
  return endTimeStamp;
};


describe('Performance test', () => {
  beforeEach(core.init);  // core.init launch  puppeteer chromium and go to testing  page.URL 

  test('EPG display time', async () => {

    await core.logIn();  // function to Log In to application 

    let sumDifference = 0;

    for (let i = 0; i < 11; i++) {
      // 11 is number of measurements
      await page.keyboard.press('e').then(() => start()); // e displaye EPG
      await page.waitForSelector('div[class^="EpgGridStbWrapper"]', { waitUntil: 'load' }).then(() => end()); // Wait until EPG react component display, and get endTimeStampt  
      sumDifference += endTimeStamp - startTimeStamp;
      await page.keyboard.press('Escape'); // Escape from EPG 
      await page.waitForSelector('div[class^="EpgGridStbWrapper"]', { hidden: true }); // check if the EPG has been closed
    };
    averageScore = sumDifference / 10;  // calculate average
    console.log('Average EPG display time result:', averageScore, 'ms');
  });
  });