Cypress 测试 pdf 文件

记录一次cypress 测试pdf文件遇到的一些问题

问题背景

在完善 项目自动化测试 用例时，我们遇到了一个问题：如何通过cypress测试用户下载的pdf文件是正确的。

手动测试这些 PDF 不仅耗时，而且容易遗漏边缘情况（如特殊字符、长文本换行等）。

现存问题

cypress 已有功能cy.readFile()可以成功的读取到文件信息，但讽刺的是，请看大图！

单纯依靠cy.readFile()的能力我们是无法验证pdf 的内容了。这部分功能只能我们自己来实现了。

解决方案

第一步：安装依赖

我们需要使用 pdf-parse 库解析 PDF 文本：

bash 复制代码

npm install pdf-parse --save-dev

第二步：编写自定义解析PDF脚本

TypeScript 复制代码

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

export const readPdf = (pathToPdf: string) => {
    return new Promise((resolve, reject) => {
        try {
            const pdfPath = path.resolve(pathToPdf);
            let dataBuffer = fs.readFileSync(pdfPath);
            pdf(dataBuffer)
                .then(({ text }) => resolve(text))
                .catch(reject);
        } catch (err) {
            reject(err);
        }
    });
}

第三步：注册自定义task

TypeScript 复制代码

const { defineConfig } = require("cypress");
import { readPdf } from 'cypress/scripts/readPdf'

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) {
      on('task', {
        readPdf
      })
    },
    baseUrl: 'http://localhost:3000',
    trashAssetsBeforeRuns: false
  },
});

将我们写好的脚本配置到cypress.config.ts文件中。这样我们就可以在写测试的脚本文件中使用我们自定义的readPdf了。

第四步：编写测试脚本

TypeScript 复制代码

  cy.task('readPdf', 'cypress/downloads/pdfTest.pdf').then(x => {
    console.log("PDF content", x);
  })

此时运行我们测试脚本就可以看到控制台已经可以正常读取到pdf的内容了。

当然接下来对pdf测试的断言就简单了。至此我们实现了对pdf文件下载以及对内容的验证功能。