赛普拉斯：检测是否点击了 <a download>答案

【问题标题】：Cypress: Detect if <a download> was clicked赛普拉斯：检测是否点击了 <a download>
【发布时间】：2021-03-25 19:00:42
【问题描述】：

我有一个 vue 3 应用程序，它提供从 assets 文件夹中下载的文件。现在，在 cypress 测试中，我想确保此下载确实按预期工作，尤其是与 assets 文件夹的连接（它是否在本地开发模式和部署在 CDN 上工作）。

触发下载的元素是锚点：

 <a href="/images/myw3schoolsimage.jpg" download>

Source

点击链接会弹出下载界面（firefox），用户可以在里面决定是否打开、下载等...

我发现这个stackoverflow question 的方向相似，但不完全是我想要的。

是否甚至可以检查这一点，因为实际交互是通过浏览器本身完成的，而不是应用程序？此外，这也可以用 cypress 进行检查吗？

【问题讨论】：

您依赖于浏览器来处理该 HTML 属性，请确保这是您希望您的应用程序/网站可见的所有浏览器的支持功能 - 关于赛普拉斯，它没有太多可以做的事情请记住，在 Cypress/Puppeteer/etc 中，您可以将路径传递给元素，例如 a[download] ... here's the running test
感谢您指出兼容性！我会仔细检查如何改变这种方法。并感谢您的建议！我现在写了一个类似的测试，它有效！我对赛普拉斯还很陌生，不知道您可以轻松访问下载的文件。如果您将评论转换为答案，我可以立即接受；-)

标签： javascript html cypress

【解决方案1】：

您依赖浏览器来处理该 HTML 属性，请确保它是 supported feature of all browsers 您希望您的应用/网站可见

关于 Cypress，没有什么是它不能做的，记住在 Cypress/Puppeteer/etc 中你可以传递一个元素的路径，比如a[download]

这是正在运行的测试

Cypress可以轻松测试可下载文件since version 6.3.0

./index.html

<!DOCTYPE html>
<html>
<body>

<h1>The a download attribute</h1>

<p>Click on the image to download it:<p>
<a href="/myw3schoolsimage.jpg" download>
  <img src="/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>

<p><b>Note:</b> The download attribute is not supported in IE or Edge (prior version 18), or in Safari (prior version 10.1).</p>

</body>
</html>

./cypress/plugins/index.js

module.exports = (on, config) => {
  on('task', {
    deleteFolder (folderName) {
      console.log('deleting folder %s', folderName)

      return new Promise((resolve, reject) => {
        rmdir(folderName, { maxRetries: 10, recursive: true }, (err) => {
          if (err) {
            console.error(err)

            return reject(err)
          }

          resolve(null)
        })
      })
    },
  })
}

./cypress/integration/w3schools.specs.js

const path = require('path')

const deleteDownloadsFolder = () => {
    const downloadsFolder = Cypress.config('downloadsFolder')
    cy.task('deleteFolder', downloadsFolder)
}
  
describe('My First Test', () => {
    const downloadsFolder = Cypress.config('downloadsFolder')
    beforeEach(deleteDownloadsFolder)

    it('Visit w3schools example', () => {
        cy.visit('/index.html')
        cy.get('a[download]').click()
        cy.log('**read downloaded file**')

        const filename = path.join(downloadsFolder, 'myw3schoolsimage.jpg')
        cy.readFile(filename, { timeout: 15000 })
            .should('have.length.gt', 50)
    })
})

【讨论】：