TestCafe中能否在断言失败时执行函数获取浏览器控制台日志？

问题根因 #

你原来的写法不符合预期是因为JavaScript函数执行时会先计算所有传入参数的值再调用函数，ok()方法的参数不管断言是否通过，都会在断言执行前提前计算完成，所以t.getBrowserConsoleMessages()无论如何都会执行。

方案1：单断言单独捕获（灵活控制指定断言） #

用try/catch包裹目标断言，仅在捕获到断言失败异常时，读取控制台消息并输出，再抛出错误即可：

import { Selector } from 'testcafe';

test('示例测试', async t => {
  try {
    await t.expect(Selector('#elementId').visible).ok("The test has failed");
  } catch (err) {
    // 仅断言失败时才执行以下逻辑
    const consoleMessages = await t.getBrowserConsoleMessages();
    // 把控制台消息追加到错误信息中
    err.message += `\n浏览器控制台日志：\n${JSON.stringify(consoleMessages, null, 2)}`;
    // 输出日志或者重新抛出错误，保证测试正常标记为失败
    console.error(err.message);
    throw err;
  }
});

方案2：全局钩子统一处理（所有测试失败都自动追加控制台日志） #

如果需要给所有测试的失败场景统一加这个逻辑，可以直接用TestCafe的全局钩子，不用逐个修改断言：

// 可以写在测试文件顶部，或者全局hooks配置文件中
fixture`全局配置示例`
  .afterEach(async t => {
    // 测试执行完成后如果状态为失败，再获取控制台日志
    if (t.testRun.errs.length > 0) {
      const consoleMessages = await t.getBrowserConsoleMessages();
      // 把日志追加到每个错误信息中
      t.testRun.errs.forEach(err => {
        err.errMsg += `\n浏览器控制台日志：\n${JSON.stringify(consoleMessages, null, 2)}`;
      });
    }
  });

test('你的测试用例1', async t => {
  await t.expect(Selector('#elementId').visible).ok("The test has failed");
});

test('你的测试用例2', async t => {
  // 其他测试逻辑
});

两种方案都可以保证只有断言/测试失败时，才会执行读取浏览器控制台日志的逻辑，不会额外增加测试运行的性能消耗。

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