С помощью TestCafe Selector, Как проверить текст выбранного элемента в <select>?

Question

Я использую TestCafe 1.8.1 и немного отличается от документации на https://devexpress.github.io/testcafe/documentation/recipes/test-select-elements.html - моя проблема в том, что в примере предполагается, что value для <option> и его текстовое содержимое будет таким же, и в моем случае value является очень непредсказуемым значением.

Я могу без проблем выбрать элемент в раскрывающемся списке, используя .withText(value) для фильтрации параметров и .click(item) для его выбора. Однако мое приложение обновляет страницу и должно повторно выбрать соответствующий элемент при загрузке. Это не работает, и я хочу проверить его.

Так что у меня могут быть опции в 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, чтобы получить текст выбранный предмет? Я понимаю, что довольно неудобно передавать данные в ClientFunction, нужно ли мне передавать id выбора, чтобы ClientFunction могла getElementById найти и выбрать текстовое содержимое выбранного параметра? Все это звучит как неправильный способ делать вещи.

Answer 1

Пожалуйста, проверьте следующий пример, который использует 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');
});

Answer 2

Попробуйте использовать

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