Cypress JavaScript项目中如何下载blob类型的PDF文件

错误原因 #

cypress-downloadfile 库底层基于HTTP请求实现下载逻辑，仅支持HTTP/HTTPS协议的公共资源地址。而blob URL是浏览器为内存中临时存储的Blob对象生成的临时专属地址，只能在当前浏览器上下文内访问，直接传入该库发起网络请求无法获取到资源，因此会抛出错误。

推荐解决方法 #

方法1：直接模拟点击下载按钮（最稳定） #

Cypress自带下载路径配置能力，配合a标签原生的download属性，不需要额外调用第三方库即可完成下载：

1. 首先在cypress.config.js中配置下载文件的存储目录：

// cypress.config.js
const { defineConfig } = require('cypress')
const path = require('path')

module.exports = defineConfig({
  e2e: {
    // 其他常规配置
    downloadsFolder: path.join(__dirname, 'mydownloads'),
    // 如果有跨域限制导致下载失败，可以添加以下配置（仅限内部测试环境使用）
    // chromeWebSecurity: false
  }
})

2. 测试代码中直接点击下载按钮即可，浏览器会自动将文件保存到配置的目录中：

// 直接触发下载按钮的点击事件
orderConfirmation.buttons('downloadpdf').click()

// 可选：验证文件是否下载成功
const fs = require('fs')
const path = require('path')
// 按自己项目的实际目录层级调整下载目录路径
const downloadDir = path.join(__dirname, '../../mydownloads')
cy.wait(2000) // 根据PDF文件大小调整等待时长
cy.then(() => {
  // 如果要使用原始文件名，可以先获取a标签的download属性值
  expect(fs.existsSync(path.join(downloadDir, 'example.pdf'))).to.be.true
})
cy.log('Payment Complete')

方法2：手动处理blob对象写入本地 #

如果需要自定义文件存储逻辑，可以调用浏览器原生API获取blob后写入本地：

orderConfirmation.buttons('downloadpdf').should('have.attr', 'href').then(async (href) => {
  cy.log('href: ' + href)
  // 在当前浏览器上下文内获取blob对象
  cy.window().then(async (win) => {
    const res = await win.fetch(href)
    const blob = await res.blob()
    // 转换为Node.js可处理的Buffer格式
    const buffer = Buffer.from(await blob.arrayBuffer())
    const fs = require('fs')
    const path = require('path')
    const savePath = path.join(__dirname, '../../mydownloads/example.pdf')
    // 写入文件到指定目录
    fs.writeFileSync(savePath, buffer)
  })
  cy.log('Payment Complete')
})

注意事项 #

• 如果需要保留原始文件名，可以提前获取a标签的download属性值，无需写死文件名：

orderConfirmation.buttons('downloadpdf').invoke('attr', 'download').then((originFileName) => {
  // 后续存储文件时直接使用originFileName即可
})

注意：关闭chromeWebSecurity配置仅建议在内部测试环境使用，不要在面向公共站点的测试中开启，避免产生安全风险。

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