使用Cypress selectFile()测试Svelte拖拽文件上传组件失败

我正尝试使用Cypress测试基于svelte-file-dropzone实现的文件上传组件功能，已尝试多组测试代码，但所有测试均无法完成文件上传，不过在Cypress的Chrome浏览器中手动拖拽上传可成功。

对应的HTML结构：

<div tabindex="0" role="button" class="dropzone  svelte-817dg2" style="">
<input accept="image/*" type="file" name="avatar" autocomplete="off" tabindex="-1" style="display: none;"> 
<p>Drag 'n' drop some files here, or click to select files</p>
</div>

已尝试的测试代码：

• 代码片段1：

const filePath = './cypress/fixtures/example.jpg'

cy.get('.dropzone')
  .selectFile(filePath, 
  { action: 'drag-drop',
    force: true, }).trigger('drop', {force: true})

• 代码片段2：

cy.get('.dropzone > input[type="file"]').should('exist').invoke('show')
  .selectFile(filePath, {
    action: 'drag-drop',
    force: true,
    log: true,
  })
  .trigger('drop', {force: true})

• 代码片段3：

cy.get('.dropzone')
  .children('input[type="file"]')
  .should('exist')
  .invoke('show')
  .selectFile(filePath, { force: true })
  .then(input => {
    expect(input[0].files[0].name).to.equal('example.jpg')
  })
  .wait(6000)
  .trigger('dragstart', { force: true, 
  dataTransfer: dataTransfer })
  .wait(50)
  .trigger('dragover', { force: true })
  .wait(50)
  .trigger('drop', { force: true })
  .wait(50)
  .trigger('dragend', { force: true })
  .wait(50)
  .trigger('change', { force: true });

• 代码片段4：

cy.document().get('.dropzone')
  .children('input[type="file"]').selectFile(filePath, { action: 'drag-drop' })

• 代码片段5：

cy.document().get('.dropzone')
  .children('input[type="file"]')
  .selectFile(filePath, { action: 'drag-drop', force: true })
  .trigger('drop', { force: true });

针对svelte-file-dropzone的Cypress测试，核心是匹配组件的事件监听逻辑，以下是两种可行的测试方案：

1. 直接操作隐藏input（简洁高效）
   组件的隐藏input是最终接收文件的载体，无需模拟拖拽流程，直接赋值并触发change事件即可：

const filePath = './cypress/fixtures/example.jpg'

cy.get('.dropzone input[type="file"]')
  .selectFile(filePath, { force: true })
  .trigger('change', { force: true });

Cypress的selectFile支持直接操作display: none的元素，不需要额外调用invoke('show')。

2. 模拟完整拖拽事件流（贴近真实操作）
   如果需要严格还原手动拖拽的行为，需要构造包含真实文件的dataTransfer对象，按顺序触发拖拽相关事件：

const filePath = './cypress/fixtures/example.jpg'

cy.fixture(filePath, 'base64').then(fileContent => {
  const dataTransfer = new DataTransfer()
  const file = new File([fileContent], 'example.jpg', { type: 'image/jpeg' })
  dataTransfer.items.add(file)

  cy.get('.dropzone')
    .trigger('dragenter', { dataTransfer, force: true })
    .trigger('dragover', { dataTransfer, force: true })
    .trigger('drop', { dataTransfer, force: true })
})

这种方式直接在dropzone容器上触发事件，和手动操作的事件序列完全一致，组件能正确识别拖拽的文件。

• 避免重复触发事件：selectFile本身会触发相关事件，额外的trigger('drop')可能导致逻辑冲突。
• dataTransfer需包含真实File对象：手动构造的dataTransfer必须正确添加文件，否则组件无法识别上传内容。
• 无需强制显示隐藏元素：Cypress的selectFile支持直接操作隐藏的input元素，无需额外显示操作。

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