使用 cypress 命令验证下载文件（PDF/Word/Excel）的数据

Question

我有一种场景，我必须使用 Cypress 命令验证下载文件的数据。文件类型：- pdf、word、excel。我有被调用的服务器 API 操作的 URL，作为响应，它返回 pdf 文件。我需要使用 Cypress 命令和 Typescript（插件和类型）来实现。

我能够获得下载的状态，甚至 response.body 也有一些文本，但它需要一些解析器来解析响应正文。下面是我尝试过的代码。

const oReq = new XMLHttpRequest();
    oReq.open("GET", href as string, true);
    oReq.responseType = "arraybuffer";
    oReq.onload = () => {
        if (oReq.readyState === oReq.DONE) {
            if (oReq.status === 200) {
                // tried parsing the response. 
// looking for any parser which can parse the given reponse body into Text or json
            }
        }
    }


cy.request(href).then((response) => {
    expect(response.status).to.equal(200);
    expect(response.body).not.to.null;
    const headerValue = response.headers["content-disposition"];

    // expect(headerValue).to.equal("attachment; filename=ExperimentEntityList.<FileExtension-PDF | XLSX | DOCX>");

    /// have tried with YAML parser and the "FS" module that cypress and ends up in different console error
    // YAML parser gives consoole error about unidentified character "P".
    // FS module code is shown below
});     

import * as fs from "fs";

function GetPDFContent()
{
    // throws console that fs object doesn't have readFile and same with readFileSync method. 
    fs.readFile("url")..
    fs.readFileSync("url")..
}

要求：
1）阅读PDF文件内容
2）阅读XLS（x）文件
内容 3）阅读doc（x）文件内容。

无法成功读取 cypress 自动化脚本的打字稿中的 PDF 和 DOc(x) 文件的内容。通过互联网上的各种博客安装 pdfparser、pdfreader、yaml parser、filereader 和更多。但是，它们都不起作用。我已经使用上面提到的代码来读取文件。并检查相应命令的书面注释。

对于 xlsx 文件，我通过使用 XSLX 解析器插件找到了解决方案，该插件解析了我可以迭代并获取内容的 Response.body。我正在为 PDF 和 Doc(x) 文件寻找类似的解析器。

任何人都知道这件事。请分享！！！

注意：括号或语法不是问题。如果在上面的示例代码中找到，那么它会在复制/粘贴过程中丢失。

编辑：

我找到了使用赛普拉斯命令读取和验证 PDF 文件内容的解决方案。感谢 Richard Matsen，@Richard：但是，问题是当我拥有 PDF 文件的完整 URL 时。喜欢 - http://domainname/upload/files/pdf/pdfname.pdf。然后我可以阅读内容并进行验证。但是，如果我的问题是我有一个像“ http://domainname/controller/action?pdf=someid ”这样的url，它返回 pdf 文件响应并且节点命令没有正确编码它并且 pdf 文件没有正确解析.

小问题

有谁知道如何使用节点/赛普拉斯命令使用 PDF 数据的响应流创建 pdf 文件。我尝试过 Axios 插件、http、xmlhttprequest 插件。

Answer 1

针对 Cypress v10 及更高版本进行了更新

自原始答案帖子以来，添加插件的方式已发生变化。

这是更新的语法。

赛普拉斯.config.js

const { defineConfig } = require("cypress");
const fs = require('fs')
const path = require('path')
const pdf = require('pdf-parse');

const repoRoot = path.join(__dirname, '..', '..') // assumes pdf at project root

const parsePdf = async (pdfName) => {
  const pdfPathname = path.join(repoRoot, pdfName)
  let dataBuffer = fs.readFileSync(pdfPathname);
  return await pdf(dataBuffer)  // use async/await since pdf returns a promise 
}

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('task', {
        getPdfContent (pdfName) {
          return parsePdf(pdfName)
        }
      })
    }
  }
})

规范.js

it('tests a pdf', () => {
  cy.task('getPdfContent', 'mypdf.pdf').then(content => {
    // test you pdf content here, with expect(this and that)...
  })
})

Answer 2

你需要一个插件来访问像 pdf-parser 这样在 NodeJs 环境中工作的库（即使用像 fs 这样的 Node 命令）。

对此最好的参考是强大的 cy.task

以下是根据您的场景调整此模式的示例。

柏树/插件/index.js

const fs = require('fs')
const path = require('path')
const pdf = require('pdf-parse');

const repoRoot = path.join(__dirname, '..', '..') // assumes pdf at project root

const parsePdf = async (pdfName) => {
  const pdfPathname = path.join(repoRoot, pdfName)
  let dataBuffer = fs.readFileSync(pdfPathname);
  return await pdf(dataBuffer)  // use async/await since pdf returns a promise 
}

module.exports = (on, config) => {
  on('task', {
    getPdfContent (pdfName) {
      return parsePdf(pdfName)
    }
  })
}

规范.js

it('tests a pdf', () => {
  cy.task('getPdfContent', 'mypdf.pdf').then(content => {
    // test you pdf content here, with expect(this and that)...
  })
})

我还没有测试过这个，所以你可能会发现一些皱纹需要解决。

pdf的位置是repoRoot我理解的意思是上面两级的项目根文件夹/cypress/plugins。由于涉及下载，您可能需要调整路径。你没有提供足够的信息来理解完整的测试逻辑，我把它留给你来做调整。

内容返回的形式取决于所使用的 pdf 库。看起来 pdf-parse 提供了一个应该易于测试的 Json 对象。
在cy.task('getPdfContent')被调用之后，您可以选择各种cy命令，例如.should()and.contains()但我会在内容.then()的回调中使用 and expect()。