如何重置赛普拉斯不可清除的字段？

Question

当我尝试使用 cy.clear() 重置字段并且元素是下拉列表时，它失败了，因为它需要一个有效的可清除元素。

When('@userSettings.actions I reset Gender', () => { userSettings.form.getGenderDropdown().clear(); });

赛普拉斯给出的错误是，/ cy.clear() failed because it requires a valid clearable element.

Answer 1

请参阅。

下拉菜单通常有一个输入，因此您可以使用可能的建议 -

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([])

我在赛普拉斯测试中注意到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()

Answer 2

这段代码可以完成这项工作。请学习它并尝试为您修改它。我 select 编辑了一个可用选项，然后删除了 'disabled' 从默认选项到 select 的属性。

it('example', function () {
    cy.visit('https://www.seleniumeasy.com/test/basic-select-dropdown-demo.html');
    cy.get('[id="select-demo"]').select('Monday')
    cy.get('[id="select-demo"]').find('option').eq(0).then(($elem) => {
        $elem.removeAttr('disabled')
    })
    cy.get('[id="select-demo"]').select('Please select')
})

Answer 3

一种方法是重置表格，假设清除整个表格就是您的目标。

请看HTMLFormElement.reset()

The HTMLFormElement.reset() method restores a form element's default values. This method does the same thing as clicking the form's reset button.

If a form control (such as a reset button) has a name or id of reset it will mask the form's reset method. It does not reset other attributes in the input, such as disabled.

HTML

<form>
  <select class="form-control" id="select-demo">
    <option value="" selected="" disabled="">Please select gender</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
    <option value="Unknown">Unknown</option>
  </select>
</form>

测试

it('resets the form values', () => {

  cy.get('select').should('have.value', null);         // starts with empty value

  cy.get('select').select('Female')                    // select an option
    .should('have.value', 'Female');                   

  cy.get('form').then($element => $element[0].reset())

  cy.get('select').should('have.value', null);         // now empty again

})

如何重置赛普拉斯不可清除的字段？

How to reset a field which is not a clearable in Cypress?

javascript

testing

automation

cypress