如何在 Cypress 中模拟文件选择器步骤以检查剩余步骤答案

【问题标题】：How to simulate file picker step in Cypress in order to check the remaining steps如何在 Cypress 中模拟文件选择器步骤以检查剩余步骤
【发布时间】：2019-01-04 21:29:48
【问题描述】：

我在 Angular 应用程序中测试 Cypress 中的文件上传方案时遇到问题。这些是步骤：

用户选择一个文件，点击“选择”并弹出一个表单并打开模式。
用户填写表格并点击确定。
文件被上传，表单值被发送到服务器。

赛普拉斯不支持文件选择器。但是我需要测试用户在选择文件时所做的其他步骤。如果在应用程序中此功能由文件输入更改事件触发，我如何在赛普拉斯中触发打开弹出窗口的功能？也许可以在测试中触发该功能（类似于单元测试，即 component.setSelectedFiles() ）并完全绕过文件选择器？

App.component.html

<label class="btn" (click)="$event.stopPropagation()">
  Upload
  <input type="file" multiple (change)="setSelectedFiles($event.target.files)"> 

</label>

App.component.ts

setSelectedFiles(fileArray) { // This function is triggered when user selects a file
  this.files = fileArray
  this.showModal = true    // this step opens a modal pop up.
}

【问题讨论】：

标签： angular cypress

【解决方案1】：

Cypress issue 对此进行了很多讨论。有很多赞成票的答案是下面这个，我在我们的测试中做了类似的事情。如果这不起作用，请阅读该问题，并且可能会有适合您的解决方法。

cy.fixture('path/to/image.png').as('logo')
  .get('input[type=file]').then(function(el) {
    return Cypress.Blob.base64StringToBlob(this.logo, 'image/png')
      .then(blob => {
        el[0].files[0] = blob
        el[0].dispatchEvent(new Event('change', {bubbles: true}))
      })
  })

【讨论】：