Как все параметры из раскрывающегося списка (выбрать) можно протестировать в Cypress?
Как мы можем выбрать все options из обычного раскрывающегося списка и проверить их с помощью Cypress?
<select id = "cars_list">
<option value = "volvo">Volvo</option>
<option value = "saab">Saab</option>
<option value = "mercedes">Mercedes</option>
<option value = "audi">Audi</option>
</select>
//The below test can check only for one option, how can we verify the rest?
describe("Select all values from drop down list", function() {
it("Cypress test and verify all options", function() {
cy.visit("Https://sometestingsite.com")
cy.get('#cars_list').then(function($select){
$select.val('volvo')
})
cy.get('select').should('have.value', 'volvo')
});
});
Возможно, неправильный код скрывает вопрос - я думаю, тест должен подтвердить, что список опций имеет ожидаемые значения - вы можете подтвердить @soccerway?
Да, я хотел бы подтвердить, что option list имеет ожидаемые характеристики. Кто-то проголосовал против, не знаю почему?
Извините за резкий комментарий по поводу вашего кода. Не могли бы вы показать DOM на выбранном элементе? Я думаю, вы могли бы использовать что-то вроде cy.get('#cars_list').its('options').then(options => ...).
Хорошо, DOM - это именно то, что вы уже показали. Может, cy.get('#cars_list option').then(options => ...) подойдет?
Я добавил образ DOM
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я бы предположил, что тест может выглядеть так
cy.get('#cars_list option').then(options => {
const actual = [...options].map(o => o.value)
expect(actual).to.deep.eq(['volvo', 'saab', 'mercedes', 'audi'])
})
ИЛИ
cy.get('#cars_list').children('option').then(options => {
const actual = [...options].map(o => o.value)
expect(actual).to.deep.eq(['volvo', 'saab', 'mercedes', 'audi'])
})
ИЛИ
cy.get('#cars_list').find('option').then(options => {
const actual = [...options].map(o => o.value)
expect(actual).to.deep.eq(['volvo', 'saab', 'mercedes', 'audi'])
})
Выбор нескольких дочерних элементов с помощью cy.get(), затем их разворачивание с помощью [...options], сопоставление с их значением с помощью .map(o => o.value) и использование глубокого равенства для сравнения массивов.
Я не тестировал это, поэтому код может нуждаться в доработке.
Я получаю сообщение об ошибке типа cypress_runner.js:161489 TypeError: Invalid attempt to spread non-iterable instance
Возможно, console.info варианты. Мы ожидаем, что Cypress выберет несколько элементов, поэтому он должен быть повторяемым.
Я только что заметил, что вы спросили о голосовании против. Я поддержал не меня. Наверное, просто проходил какой-то тролль.
Нет проблем, Хирам, это работает с указанным выше кодом HTML DOM. Но могу ли я спросить еще одну вещь, если у тега select есть <option selected = "selected" disabled = "true">--Please Select --</option> в html DOM, при запуске его счетного массива 5, поскольку AssertionError: ожидается [Array (5)], чтобы глубоко равняться [Array (4)]
Кажется, вам нужно взглянуть на документацию по массиву javascript? Поможет в построении ваших тестов. Функцию slice() можно использовать для получения подмножества массива.
Спасибо, я использую shift () для удаления первого значения, теперь все в порядке
Я не знал, что это лучший выбор, чем slice().
Вы рассматривали какую-то петлю? Но действительно ли полезно проверить, что если вы выбираете значение, это значение выбирается?