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

Question

我试图获取（废弃，如果你愿意）来自UI中的bricklet数据（即HTML dataTable）并使用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）中尝试了客户端函数，然后将客户端函数放在构造函数中，并从同一页面类中的异步函数调用它，并从test.js调用async函数。我的所有测试都以这种方式构建，但这只会在控制台中打印以下内容

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

Answer 1

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

使用{ allowUnawaitedPromise: true })选项的自定义承诺可能会导致问题，但是如果没有完整的项目，很难确定它。

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

Answer 2

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

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数组。但是这样做现在的目的。