javascript - 在外部辅助函数中使用 Chosen Selectors 时出现的问题

Question

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

此函数获取一个 Chosen Selector 作为参数，并应将所选值返回给断言，但该函数始终返回列表的第一个元素而不是所选元素。

当我在测试中使用函数代码时，一切正常。该函数似乎没有关于 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...');
});