Cypress测试时上传MP4到模态框后点击Add按钮无法关闭问题

问题根因 #

你代码的核心问题是异步逻辑执行顺序错误：文件上传属于异步任务，写在cy.fixture回调外的Add按钮点击代码会优先于上传完成执行，此时Add按钮还处于未激活状态，点击自然不会触发关闭模态框的逻辑。另外你上传MP4时指定的encoding参数配置错误，也可能导致文件上传失败，阻塞后续操作。

修复后代码 #

// 点击添加视频按钮
newStoryPage.getAddVideoToStory().click({force: true})
// 显式等待模态框加载完成，替换无意义的硬等待
newStoryPage.getDragAndDropFiles().should('be.visible')

cy.fixture('sample-mp4.mp4','binary').then(mp4 => {
  const files = [{ 
    fileName: 'sample-mp4.mp4', 
    fileContent: mp4, 
    mimeType: 'video/mp4', 
    encoding: 'binary' // 修正编码配置，二进制文件不能使用utf8编码
  }]
  // 执行拖拽上传
  newStoryPage.getDragAndDropFiles().attachFile(files, {
    subjectType: 'drag-n-drop', 
    events: ['dragenter', 'drop'] 
  })
  // 等待Add按钮可点击后再执行点击操作
  newStoryPage.getAddButton()
    .should('be.visible')
    .and('be.enabled')
    .click()
})

补充排查方案 #

如果修改后问题仍然存在，可以按以下步骤排查：

• 点击Add按钮时添加{force: true}参数，避免模态框退场动画未结束、元素被判定为不可交互的问题
• 增加上传成功断言，比如先校验模态框内是否渲染出视频预览、上传文件名等内容，确认上传逻辑执行完成后再点击按钮
• 如果业务逻辑中上传视频后会触发前端校验、转码等耗时操作，需要对应增加等待逻辑，避免处理过程中执行后续操作

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