使用 TestCafe Selector，如何验证 <select> 中 selected 项的文本？

Question

我正在使用 TestCafe 1.8.1，与 https://devexpress.github.io/testcafe/documentation/recipes/test-select-elements.html 上的文档略有不同 - 我的问题是示例假定 <option> 的 value 及其文本内容相同，在我的例子中，value 是一个非常不可预测的值。

我可以毫无困难地select下拉列表中的项目，使用.withText(value)过滤选项，.click(item)到select它。但是，我的应用程序随后会刷新页面，并且应该在加载时重新 select 相关项目。这不起作用，我想测试一下。

所以我可能在 select 中有选项，例如：

<select id="foo">
  <option value="1234">100x100</option>
  <option value="5432">200x100</option>
  <option value="9999">100x200</option>
</select>

显然，如果我像文档中那样使用 .expect(citySelect.value).eql('London'); 进行测试，它将失败，因为这些值与文本内容完全不同，例如在下拉列表中单击“200x100”后，值变为“5432”。

我是否需要使用 ClientFunction 来获取 selected 项目的文本？我知道将数据传递到 ClientFunction 非常尴尬，我是否需要传递 select 的 id 以便 ClientFunction 可以 getElementById 找到 select 并检索它的 selected选项的文字内容？这听起来像是错误的做事方式。

Answer 1

尝试使用

.expect(citySelect.innertext).eql('London');

Answer 2

请检查以下使用 ClientFunction API 获取 option 值的示例：

import { Selector, ClientFunction } from 'testcafe';

fixture `Fixture 1`
    .page `https://kys0l.csb.app/`;

test('Test 1', async t => {
    const selector = Selector('select');

    const getValue = ClientFunction((index) => {
            const select = selector();

            return select.options[index].value;
    }, { dependencies: { selector } });

    await t
        .expect(getValue(0)).eql('1234')
        .expect(getValue(1)).eql('5432')
        .expect(getValue(2)).eql('9999');
});

另请参阅：Obtain Client-Side Info。

使用 TestCafe Selector，如何验证 <select> 中 selected 项的文本？

With TestCafe Selector, How to verify the text of the selected item in a <select>?

testing

automation

automated-tests

e2e-testing

testcafe

使用 TestCafe Selector，如何验证 <select> 中 selected 项的文本？

With TestCafe Selector, How to verify the text of the selected item in a &lt;select&gt;?

testing

automation

automated-tests

e2e-testing

testcafe

With TestCafe Selector, How to verify the text of the selected item in a <select>?