如何从 Cypress 中的普通下拉列表框中测试所有选项

Question

我们如何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>

//下面的测试只能检查一个选项，我们如何验证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')
   });
});

Answer 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)并使用深度等于比较数组。

我没有测试过这个，所以代码可能需要一些调整。