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

Question

我使用 Testcafe 来测试一个使用 jquery 插件 Chosen 和 我想根据外部辅助函数 (getSelectedOption) 返回的值在我的测试代码中进行断言。

这个函数获取一个选择的选择器作为参数并且应该将选择的值返回给断言，但是这个函数总是返回列表的第一个元素而不是选择的那个。

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

这是一个来自测试代码的sn-p：

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

这是一个来自外部函数的sn-p：

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...');
});