如何获取带AJAX payload的Playwright测试步骤执行时长？

原代码不生效的原因：page.click() 无返回值，你解构得到的fir为undefined，timing()是Playwright请求/响应对象专属方法，仅适用于单独统计接口耗时的场景，不适用于你当前要统计「点击触发到页面元素渲染完成」全链路耗时的需求。

你不需要依赖测试报告，完全可以直接在代码里实现耗时统计，两种常用方案如下：

方案1：手动时间戳计算（最通用，完全匹配你的需求） #

直接在操作前后打点计算时间差即可，支持统计包含接口请求、前端渲染在内的总耗时，示例代码如下：

const { test, expect } = require('@playwright/test');

test('ApplicationLoadTime', async ({ page }) => {
  // 等待初始应用加载完成
  await page.waitForSelector('img[alt="Application"]');

  // 操作开始前打点
  const startTime = Date.now();
  await Promise.all([
    page.click('text=Further information requested'),
    page.waitForSelector('img[alt="Application"]')
  ]);
  // 计算耗时，单位为毫秒
  const costTime = Date.now() - startTime;
  console.log(`点击到应用加载完成耗时：${costTime}ms`);
});

如果你需要更高精度的时间统计，可以把Date.now()换成performance.now()，精度可以到微秒级。

方案2：单独统计触发的AJAX接口耗时 #

如果你只需要统计点击触发的后台AJAX接口本身的耗时，可以通过匹配接口请求获取响应对象后调用timing()方法，示例如下：

const { test, expect } = require('@playwright/test');

test('ApplicationLoadTime', async ({ page }) => {
  await page.waitForSelector('img[alt="Application"]');

  const [, response] = await Promise.all([
    page.click('text=Further information requested'),
    // 替换为你实际的后台AJAX接口匹配规则
    page.waitForResponse('https://your-api-domain.com/path/to/ajax')
  ]);
  const timing = response.timing();
  // 接口总耗时 = 响应结束时间 - 请求开始时间，单位为毫秒
  const apiCostTime = timing.responseEnd - timing.requestStart;
  console.log(`AJAX接口耗时：${apiCostTime}ms`);
  await page.waitForSelector('img[alt="Application"]');
});

内容的提问来源于stack exchange，提问作者sahmeepee