html - 如何在 TestCafe 中获取下拉值的所有选项

Question

我有一个包含 n 个选项值的下拉列表。如何获取所有这些选项值，然后在 Test Cafe 中一次性断言它们。我在文档中没有找到任何东西。请让我现在该怎么做。

假设我有以下下拉列表：

<select id="city">
    <option>New York</option>
    <option>London</option>
    <option>Paris</option>
</select>

Answer 1

您可以在 TestCafe 文档中找到类似的示例（我们将在不久的将来提供更扩展的示例）。在您的情况下，您可以使用以下代码：

import { ClientFunction } from 'testcafe';

fixture `Get option values`
    .page `https://example.com`;

const getOptionNames = ClientFunction(() => {
    const select  = document.querySelector('#city');
    const options = select.querySelectorAll('option');
    const values  = [];

    for (let option of options)
        values.push(option.textContent);

    return values;
});

test('test', async t => {
    await t.expect(getOptionNames()).eql(['New York', 'London', 'Paris']);
});

Answer 2

此解决方案假设您的页面上没有其他optionhtml 项。他们都在下面<select id="city"

test('TestCafe - Verify all Options', async (t) => {
    const optionList = Selector('option');
    for( var i = 0; i < await optionList.count; i++){
        const optionText = await optionList.nth(i).innerText;
        // Perform some validation/comparision on the text to see if it is as you expect....
    }
})