在 Chrome 中运行时如何使用 Cypress 测试文件下载答案

【问题标题】：How Can I Test A File Download Using Cypress When Running In Chrome在 Chrome 中运行时如何使用 Cypress 测试文件下载
【发布时间】：2019-04-24 10:09:49
【问题描述】：

我有以下测试需要验证单击链接是否会下载 PDF。这一点尤其重要，因为我们使用的是 Gatsby，而 Gatsby 又使用 Reach Router 的链接组件，并且相对容易错误配置，以便路由器接管链接并导航到 404 页面而不是启动下载。

describe.skip(`Downloads`, () => {
  it(`Downloads the expected file`, () => {
    cy.visit(pagePath)
    cy.getByHref(downloadPath)
      .should(`have.attr`, `target`, `_blank`)
      .click()
    cy.location(`pathname`).should(`eq`, pagePath)
  })
})

虽然这并不完美，但它至少会检查单击链接后是否没有导航。

问题在于，当使用在 Chrome 中运行测试的 cy run 运行此测试时，由于 Chrome 的下载对话框，测试会挂起。

如何防止测试挂起？

请注意，downloadPath 解析为静态目录中的 pdf，例如 /static/example.pdf。没有服务器组件。

另请注意，这是一个不同的问题：How can I use Cypress.io to assert that a file download has been initiated without actually downloading?

【问题讨论】：

你检查过这个问题吗？我认为这正是您所描述的github.com/cypress-io/cypress/issues/433
另外，这正在处理中：github.com/cypress-io/cypress/issues/311
这可能对dev.to/viveknayyar/…有帮助
@VivekN 谢谢。我没有考虑检查文件，但这依赖于使用具有固定时间的等待，根据我的经验，这是易碎测试的秘诀。

标签： javascript google-chrome testing download cypress

【解决方案1】：

其实我搜索了很多，发现在安装了浏览器扩展的情况下，无法在无头模式下运行测试，因为无头模式下唯一支持的浏览器是 Electron，而 Electron 不支持文档中所述的扩展。

尚不支持运行无头 Chrome。看到这个问题：#488 https://github.com/cypress-io/cypress/issues/488

这是一个在 2019 年 2 月被标记的问题并没有那么老

https://github.com/cypress-io/cypress/issues/832 https://github.com/cypress-io/cypress/issues/1235

【讨论】：

感谢您的回复，但我没有提到浏览器扩展 - 这只是当链接设置了 download 属性时 Chrome 的默认下载行为。

【解决方案2】：

有很多方法可以测试这个，所以这取决于。您需要了解实际导致下载的原因，然后想办法测试该机制。

如果您的服务器发送特定的处置标头导致浏览器提示下载，您可以确定该请求发往哪个 URL，并使用 cy.request() 直接点击该 URL。然后你可以测试服务器是否发送了正确的响应头。

如果是启动下载的锚点，您可以测试它是否具有正确的 href 属性。只要您可以验证单击该按钮会发出正确的 HTTP 请求，就没有其他需要测试的了。

最后，由您来了解自己的实现并进行足够的测试以涵盖所有内容。

【讨论】：

【解决方案3】：

您可以通过禁用询问文件保存位置的对话框来防止测试挂起。完成后，chrome 会愉快地下载您的文件，并且 Cypress 可以继续运行您的测试。

在chrome中转到设置->高级->下载->在下载前询问每个文件的保存位置并确保它已关闭。

在 Apolo 提供的链接中有更复杂的解决方案，但这是一个快速的解决方法。

【讨论】：