javascript - 如何重置 Cypress 中不可清除的字段？

Question

当我尝试使用 cy.clear() 重置字段并且元素是下拉列表时，
它失败了，因为它需要一个有效的可清除元素。When('@userSettings.actions I reset Gender', () => { userSettings.form.getGenderDropdown().clear(); }); Cypress 给出的错误为，/cy.clear() failed because it requires a valid clearable element.

Answer 1

请参阅 How do I clear a multi-select input using Cypress 。
通常有一个下拉列表的输入，所以你可能会使用的建议 -

userSettings.form.getGenderDropdown()
  .invoke('val', '')
  .trigger('change')

userSettings.form.getGenderDropdown()
  .find('input')
  .invoke('val', '')
  .trigger('change')

其他一些建议浮出水面，但有点可疑——

userSettings.form.getGenderDropdown()
  .type({selectall}{backspace})

userSettings.form.getGenderDropdown()
  .select([])

我在 Cypress 测试中注意到 clear_spec.js

context('works on input type', () => {
  const inputTypes = [
    'date',
    'datetime',
    'datetime-local',
    'email',
    'month',
    'number',
    'password',
    'search',
    'tel',
    'text',
    'time',
    'url',
    'week',
  ]

  inputTypes.forEach((type) => {
    it(type, () => {
      cy.get(`#${type}-with-value`).clear().then(($input) => {
        expect($input.val()).to.equal('')
      })
    })
  })
})

这是一个相当长的有效类型列表，所以如果你在表单控件后面有一个输入，这可能就是你所需要的

userSettings.form.getGenderDropdown()
  .find('input')
  .clear()