如何使用Cypress获取并分析Blob URL对应的PDF文件

核心思路 #

Cypress不支持直接访问blob:协议的URL，也无法直接处理新标签页跳转，所以我们需要绕过Blob URL，直接获取生成PDF的原始Blob数据或二进制响应，再进行内容解析。

方案一：从页面上下文获取Blob对象 #

如果页面生成PDF后将Blob对象暴露在全局（比如window对象中），或者可以通过页面脚本获取到该Blob，直接在Cypress中访问并处理：

// 触发PDF生成操作（比如点击生成按钮）
cy.get('#generate-pdf-button').click()

// 从浏览器window对象中获取生成的Blob
cy.window().then(win => {
  // 假设页面中生成的Blob存储在win.generatedPdfBlob变量中
  const pdfBlob = win.generatedPdfBlob
  
  // 将Blob转换为ArrayBuffer，方便后续解析
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result)
    reader.readAsArrayBuffer(pdfBlob)
  })
}).then(arrayBuffer => {
  // 使用pdf-parse库解析PDF内容（需先安装：npm install pdf-parse --save-dev）
  const pdfParse = require('pdf-parse')
  return pdfParse(arrayBuffer)
}).then(parsedData => {
  // 验证PDF内容
  expect(parsedData.text).to.include('你需要验证的文本内容')
})

如果Blob没有暴露在全局，可以通过DOM中的链接获取Blob URL，再通过浏览器的fetch获取Blob（注意：此方法可能受Cypress代理限制，优先推荐方案二）：

cy.get('a[href^="blob:"]').then($link => {
  const blobUrl = $link.attr('href')
  
  cy.window().then(win => {
    return win.fetch(blobUrl).then(res => res.blob())
  }).then(pdfBlob => {
    // 后续转换和解析步骤同方案一
  })
})

方案二：拦截生成PDF的原始API请求 #

如果PDF是通过后端API返回二进制数据，再由前端转换为Blob URL，直接拦截该API请求获取响应体是最可靠的方式：

// 拦截生成PDF的API请求
cy.intercept('GET', '/api/generate-pdf').as('getPdf')

// 触发下载/生成操作
cy.get('#download-pdf-btn').click()

// 等待请求完成并获取响应
cy.wait('@getPdf').then(interception => {
  // 将响应二进制数据转换为Buffer
  const pdfBuffer = Buffer.from(interception.response.body)
  
  // 解析PDF内容
  const pdfParse = require('pdf-parse')
  return pdfParse(pdfBuffer)
}).then(parsedData => {
  // 验证内容
  expect(parsedData.text).to.contain('目标文本内容')
})

关键说明 #

• Cypress的cy.visit不支持blob:协议，因为其底层依赖Chrome DevTools Protocol，对本地内存协议的支持有限。
• 解析PDF推荐使用pdf-parse或pdf-lib库，前者更适合文本提取，后者支持更复杂的PDF操作。

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