Question

我使用Testcafe测试使用jquery插件Chosen和我想根据外部帮助器函数（getSelectedOption）返回的值在测试代码中声明一个内容。

此函数将选择的选择器作为参数，应将选定的值返回到断言，但是该函数始终返回列表的第一个元素，而不是所选择的元素。

当我在测试中使用功能代码时，一切正常。似乎该函数没有关于HTML数据的实际状态，并且看不到已经选择了一个元素。

这是测试代码的片段：

await t
 .click(await getOptionByText('salutation', 'Frau'))
 .expect(await getSelectedOption('gender')).eql('weiblich')

这是外部功能的摘录：

export const getChosenSelectorFromName = selectName => `#${selectName}_chosen`;

        export const getSelectedOption = async selectName => {
          const selectedOptionText = await 
     Selector(getChosenSelectorFromName(selectName))
            .find('.chosen-single')
            .innerText;
          return selectedOptionText.toLowerCase().trim()
        };

        export const getOptionByText = async (selectName, optionText) => {
          const chosenSelectorString = getChosenSelectorFromName(selectName);
          await t.click(Selector(chosenSelectorString));
          return await Selector(chosenSelectorString)
            .find('.chosen-drop')
            .find('li')
            .withText(optionText);
        };

当我在测试中使用类似getSelectedOption函数的代码时，一切正常：

const genderSelect = Selector('#gender_chosen);

.click(await getOptionByText('salutation', 'Frau'))
       .expect(genderSelect.innerText).eql('WEIBLICH')

Answer 1

如果您致电await Selector(<some value>)，则TestCafe将立即在当前时刻从网页重试数据。您可以告诉TestCafe从网页重试数据，直到数据等于期望值为止。为此，您需要将DOM操作功能移至ClientFunction：

import { Selector, ClientFunction } from "testcafe";

fixture `Fixture`
        .page('https://harvesthq.github.io/chosen/');

const getChosenSelectorFromName = selectName => `#${selectName}_chosen`;

const getSelectedOption = ClientFunction(selector => {
    var choosenDiv    = document.querySelector(selector);
    var singleValueEl = choosenDiv.querySelector('.chosen-single');

    return singleValueEl.innerText;
});


test('test', async t => {
    await t.expect(getSelectedOption('.chosen-container')).eql('Choose a Country...');
});

在外部帮助器函数中使用选择的选择器时出现问题

1 个答案: