时间戳

首页 > 解决方案 > 从包含重复值的下拉列表中选择一个值

drop-down-menu - 从包含重复值的下拉列表中选择一个值

问题描述

嗨，我是赛普拉斯的新手，并试图自动化这个场景 -

我有一个这样的下拉列表，其中包含重复的值：

  <select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="volvo">Volvo</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>

现在我想选择出现在列表中的第二辆沃尔沃。我尝试过的事情：

cy.get('select#cars').select('Volvo') //This selects the first Volvo

编辑：现在基于上面的选择，网页上显示了一个新元素，我正在检查该元素的内部文本 -

cy.get('selector', {timeout: 8000}).should('have.text', some text)

标签： drop-down-menucypress

解决方案

查看源代码，.select()命令向所选选项调度input和change事件。

你可以做同样的事情，“手动”选择

cy.get('option').eq(1).then($option => {

  const input = new Event('input', { bubbles: true, cancelable: false })
  $option.get(0).dispatchEvent(input)

  const change = document.createEvent('HTMLEvents')
  change.initEvent('change', true, false)
  $options.get(0).dispatchEvent(change)
})

参考：/driver/src/cy/commands/actions/select.js

这也有效

cy.get('option').eq(1)
  .trigger('input', { force: true })   
  .trigger('change', { force: true })  
  // force because select is not open so option isn't visible

虽然任何一种方式都会触发事件，但它不会选择该选项。

这将做到这一点，

cy.get('option').eq(1)
  .trigger('input', { force: true }) 
  .trigger('change', { force: true })
  .then($option => {
    cy.get('select').then($select => $select.val($option.val()))
  })

推荐阅读