TestCafe 使用客户端函数从 HTML 数据表中获取数据

Posted 2023-02-18

【中文标题】TestCafe 使用客户端函数从 HTML 数据表中获取数据

【英文标题】：TestCafe using client Functions to get data from a HTML dataTable

【发布时间】：2019-08-21 08:30:47

【问题描述】：

我正在尝试从 UI 中的小块（即 html 数据表）抓取数据并使用 testCafe 客户端功能来执行此操作，但我没有成功。我对我的代码有一些疑问，希望有人指出正确的方向。

我首先将我的客户端函数放在包含我所有其他测试用例的测试文件 (test.js) 中，并从我的一个测试中调用该函数。就像这里的示例：-https://devexpress.github.io/testcafe/documentation/test-api/obtaining-data-from-the-client/examples-of-using-client-functions.html 检查部分“复杂 DOM 查询”但 testCafe 卡住了，浏览器关闭但执行卡住了

这是我的客户端函数。它在我的文件中，其中包含我所有的测试 - test.js

fixture`Getting Started`
    .page`$config.baseUrl`;

    const getTableRowValues = ClientFunction(() => 
        console.log("inside client function");
        const elements = document.querySelector('#bricklet_summary_studtable > tbody').querySelectorAll('tr td');
        const array = [];
        console.log(elements.length); 
        for (let i = 0; i <= elements.length; i++) 
            console.log("inside for");
            const customerName  = elements[i].textContent; 
                array.push(customerName);
        
        return array;
 );

这是我的测试用例：

test('My 4th test - Check the bricklet data matches the expected data', async t => 
    await t.navigateTo('https://myurl.com/app/home/students');
    await page_studTest.click_studentlink();
    await t
        .expect(await page_studTest.exists_ListPageHeader()).ok('do something async',  allowUnawaitedPromise: true )//check the compare button does not exists
    await t        .navigateTo('https://myurl.com/app/home/students/application/stud/id/details/test.html')
    await t
        .expect(await page_studTest.getText_studHeader(t)).eql('student123',
            "the header text does not match");
    let arr = await getTableRowValues();
    await console.log(arr);        
);

我认为这会从 UI 中获取数组中的值，然后将其与另一个测试值数组进行比较，稍后我将对其进行硬编码。

首先，我在我的页面类（页面对象模型：https://devexpress.github.io/testcafe/documentation/recipes/use-page-model.html）中尝试了客户端函数，我将客户端函数放在构造函数中，并从同一页面类中的异步函数调用它，并从我的测试.js。我所有的测试都是这样构造的，但这只会在控制台中打印以下内容

Valuesfunction __$$clientFunction$$() 
            const testRun = builder._getTestRun();
            const callsite = (0, _getCallsite.getCallsiteForMethod)(builder.callsiteNames.execution);
            const args = [];

            // OPTIMIZATION: don't leak `arguments` object.
            for (let i = 0; i < arguments.length; i++) args.push(arguments[i]);

            return builder._executeCommand(args, testRun, callsite);
        

这对调试问题没有用。

testCafe 网站上没有关于在使用页面对象模型时如何/在何处放置客户端功能的示例。有人可以分享一些见解吗？我有兴趣了解构建测试的最佳方式。

【问题讨论】：

我尝试在测试用例的末尾添加一个 testCafe sleep，认为客户端功能可能需要时间来执行。 TestCafe 等待 15 秒，然后关闭窗口，但执行卡在控制台中

【参考方案1】：

我在您的代码中没有发现任何可能导致 TestCafe 挂起的问题。我也没有发现任何语法错误或对 TestCafe 方法的错误调用。我只希望您注意不要在console.log 之前调用await 关键字。虽然这不应该导致任何问题。

在 allowUnawaitedPromise: true option 中使用自定义promise 可能会导致问题，但是如果没有完整的项目则很难确定。

我建议您准备一个包含示例测试文件的简单项目来演示问题，并使用以下 form 在 TestCafe 存储库中创建单独的错误报告

【讨论】：

感谢您查看这个问题和其他有关 testCafe 的问题。感谢您的时间。

【参考方案2】：

所以，最后我尝试从我的客户端函数返回一个承诺，然后它工作了。

const getTableRowValues = ClientFunction(() => 
    const array = [];
    return new Promise(resolve => 
        var elements = document.querySelectorAll('#bricklet_summary_studtable > tbody > tr > *');
        elements.forEach(function (element, i) 
            let text = element.textContent;
            array[i] = text.trim();
        );
        resolve(array);
    );
);

当我将客户端函数的结果与 2D 预期值进行比较时，我解析了一个单维数组，因为测试中的断言不适用于 2D 数组。不过，这暂时可以达到目的。

【讨论】：

我发现这是大多数 javascript 框架（量角器等）中最具挑战性的部分。 javascript 的异步行为以及如何将页面对象、辅助函数（测试咖啡馆中的客户端函数）包装到一个 Promise 中，并以浏览器对象不会在测试执行之前运行的方式构建代码。 TestCafe 非常棒，因为它等待页面转换和断言。然而，当编写复杂的测试时，会有很多服务调用和数据库调用，深入了解 promises/callback 很重要