TestCafe с использованием клиентских функций для получения данных из HTML-таблицы данных

Question

Я пытаюсь получить (отбросьте, если хотите) данные из набора в пользовательском интерфейсе (т. Е. 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);        
});

Я думал, что это получит значения из пользовательского интерфейса вмассив, и я буду сравнивать его с другим массивом тестовых значений, которые я буду кодировать позже.

Сначала я попробовал клиентские функции в своем классе страниц (объектная модель страницы: https://devexpress.github.io/testcafe/documentation/recipes/use-page-model.html), и я поместил клиентскую функцию в конструктор, вызвал ее из асинхронной функции в том же классе страниц и вызваласинхронная функция из моего test.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.Я только хотел бы, чтобы вы приняли к сведению, что ключевое слово await не должно вызываться до console.log.Хотя это не должно приводить к каким-либо проблемам.

Возможно, использование настраиваемого обещания с опцией { allowUnawaitedPromise: true }) может привести к проблемам, однако определить его без полного проекта сложно.

Я рекомендую вам подготовить простой проект с образцом тестового файла, чтобы продемонстрировать проблему, и создать отдельный отчет об ошибках в репозитории 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-значением. Однако пока это служит цели.