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

【问题标题】：How to reset a field which is not a clearable in Cypress?如何重置赛普拉斯中不可清除的字段？
【发布时间】：2021-01-07 07:47:03
【问题描述】：

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

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

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

【问题讨论】：

你能分享你正在尝试这个的 html dom 吗？
我在这种情况下使用 cy.reload() 但不确定它是否适用于您的情况
@AlapanDas - HTML DOM 在这里，
@RosenMihaylov - 是的 cy.reload() 与清除字段无关，因为它用于在没有缓存的情况下重新加载。但这只是清除字段上的输入数据，感谢 bdw。 :)
@AlapanDas - 这有助于清除下拉列表的值。 userSettings.form.getGenderDropdown().invoke('val', ' ')

标签： javascript testing automation cypress

【解决方案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()

【讨论】：

是的，它以下列方式工作。 userSettings.form.getGenderDropdown().invoke('val', ' ')

【解决方案2】：

这个 sn-p 完成了这项工作。请学习它并尝试为您修改它。我选择了其中一个可用选项，然后从默认选项中删除了“禁用”属性以供将来选择。

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')
})

【讨论】：

从技术上讲，这不是重置，该值以空字符串结尾，因为加载时的初始值为 null。
是的，我正在寻找清除字段的输入数据以及 cy.clear() 工作的文本字段或文本区域。但对于下拉菜单，cy.invoke() 是解决方案。

【解决方案3】：

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

请看HTMLFormElement.reset()

HTMLFormElement.reset() 方法恢复表单元素的默认值。此方法与单击表单的重置按钮执行相同的操作。

如果表单控件（例如重置按钮）的名称或 ID 为重置，它将屏蔽表单的重置方法。它不会重置输入中的其他属性，例如禁用。

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

})

【讨论】：