testcafe:在断言失败时报告页面HTML

在使用 TestCafe 进行端到端测试时，有时在断言失败时获取页面的 HTML 可能会非常有用，以便更好地调试问题。你可以通过在断言失败时捕获页面的 HTML 并将其记录到报告中来实现这一点。

以下是一个示例，展示如何在 TestCafe 中实现这一功能：

1. 安装 TestCafe

首先，确保你已经安装了 TestCafe。你可以使用 npm 来安装：

npm install -g testcafe

2. 创建一个 TestCafe 测试文件

创建一个新的测试文件，例如 test.js，并在其中编写测试代码。

3. 捕获页面 HTML 并在断言失败时记录

你可以使用 TestCafe 的 ClientFunction 来获取页面的 HTML，并在断言失败时捕获并记录它。

以下是一个示例代码：

import { Selector, ClientFunction } from 'testcafe';

// 获取页面 HTML 的 ClientFunction
const getPageHTML = ClientFunction(() => document.documentElement.outerHTML);

fixture `My Fixture`
    .page `http://example.com`;

test('My Test', async t => {
    const element = Selector('#non-existent-element');

    try {
        // 断言
        await t.expect(element.exists).ok('Element does not exist');
    } catch (error) {
        // 捕获页面 HTML
        const pageHTML = await getPageHTML();
        
        // 记录页面 HTML
        console.log('Page HTML at the time of failure:', pageHTML);

        // 重新抛出错误以确保测试失败
        throw error;
    }
});

4. 运行测试

使用 TestCafe 运行测试：

testcafe chrome test.js

解释

ClientFunction: getPageHTML 是一个 ClientFunction，它在浏览器上下文中执行并返回整个页面的 HTML。
try-catch: 在断言之前使用 try-catch 块来捕获断言失败的情况。
捕获页面 HTML: 在 catch 块中调用 getPageHTML 来获取页面的 HTML。
记录页面 HTML: 使用 console.log 将页面 HTML 记录到控制台。
重新抛出错误: 重新抛出捕获的错误以确保测试仍然失败。