如何使用cypress-file-upload实现未上传文件场景的负面测试

核心逻辑：cypress-file-upload 插件的设计定位是模拟合法的文件上传操作，内置了文件存在性、入参合法性校验，不需要强行调用该插件实现未上传文件的校验场景测试，可根据你的表单触发校验的逻辑选择对应方案：

• 方案1：表单提交触发校验（绝大多数业务场景适用）
  直接模拟用户未选择任何文件、直接点击提交按钮的操作即可触发校验：

  // 直接点击提交按钮
  cy.get('button[type="submit"]').click()
  // 校验报错提示
  cy.get('.alert').should('be.visible').and('contain', 'You poor guy did not upload a file...')
  

  如果之前的测试步骤有上传过文件，可先清空文件输入框再提交：

  cy.get('input[type="file"]').clear()
  cy.get('button[type="submit"]').click()
  

• 方案2：文件选择框 change 事件触发校验
  如果你的表单校验逻辑是在用户选择文件后（即输入框触发change事件时）立即触发，可手动设置空文件列表并触发change事件：

  cy.get('input[type="file"]').then($input => {
    // 手动设置空的文件列表
    $input[0].files = new DataTransfer().files
    // 触发change事件模拟用户操作
    $input.trigger('change')
  })
  // 校验报错提示
  cy.get('.alert').should('be.visible').and('contain', 'You poor guy did not upload a file...')
  

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