Test timeout of 30000ms exceeded error

[iamAfrontendDev]

I have a playwright test case where I want to get a web vital score called cumulative layout shift from Layout Instability API but when I run the test case I am getting error of timeout exceeded as I tried to increase the time of the test case in the config file as well but the result is same error.

export const CumulativeLayoutShift = async (page: Page) => {
  const cummulativeLayoutShift: any = await page.evaluate(() => {
    return new Promise((resolve) => {
      const observer = new PerformanceObserver((list: any) => {
        const result = list.getEntries();
        resolve(result[0]);
      });

      observer.observe({ type: 'layout-shift', buffered: true });
    });
  });
  console.log(`SHIFT - ${cummulativeLayoutShift}`);
  return cummulativeLayoutShift;
};

test('network throttling fast 3g', async ({ page }) => {
  await page.goto(HOME_PAGE_URL, { timeout: 50000 });

  const client = await page.context().newCDPSession(page);
  await client.send('Network.enable');
  await client.send('Network.emulateNetworkConditions', FAST_3G_CONFIG);
  expect(await CumulativeLayoutShift(page)).toBeLessThan(CUMULATIVE_LAYOUT_SHIFT_TIME_THRESHOLD);
});

[yury-s]

The test case is timing out while waiting for PerformanceObserver's callback to be invoked.

There are a few things you can try to fix this issue:

• Disable network throttling to see if the issue persists.

• Try increasing the timeout value of your test case even more. I only see that you increase navigation timeout to 50s but the total test timeout is set to 30s. You can read more about different timeouts in playwright here.

• Try to see if you are able to get the layout shift score in the browser dev tools by running the same code in the browser console before running the test cases.

[iamAfrontendDev]

• I tried increasing the timeout in the playwright config file as well and disabled network throttling and ran the test the issue remains the same
• and coming to the layout shift score I am getting the score by running the code in the browser console.

• but when tried removing the console log and try running the loop to get the value property in the browser console it returns undefined