如何在Cypress中取消选中禁用状态下文件输入框的文件？

针对禁用状态的<input type="file">，用selectFile('filepath', { force: true })选中文件后，常规的clear({ force: true })和selectFile(null, { force: true })没法清除选中状态，试试这两种方案：

• 直接重置DOM元素的value属性
  绕过Cypress内置方法的限制，直接操作DOM清空文件输入框的value，同时用force: true忽略元素禁用状态：

  cy.get('input[type="file"]').invoke('val', '').should('have.value', '', { force: true })
  

• 克隆元素替换原元素
  如果上面的方法不生效，可以克隆一个无选中状态的相同输入框，替换掉原禁用元素：

  cy.get('input[type="file"]').then(($input) => {
    const $clone = $input.clone();
    $clone.val('');
    $input.replaceWith($clone);
  })
  

原因在于禁用的表单元素会被浏览器限制部分默认操作，Cypress的内置清除方法对这类元素的支持有限，直接操作DOM的方式能更直接地绕过这些限制，达到清除选中文件的效果。

内容的提问来源于stack exchange，提问作者marcel