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

Question

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

Answer 1

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

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

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

Answer 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 数组。不过，这暂时可以达到目的。