前言 生成的报告有多个 json 文件时,需使用 mochawesome-merge 合并 json 报告 环境准备 使用 npm 安装 $ npm install mochawesome-merge mochawesome-merge . /mochawesome-report 目录下。 --reportDir mochawesome-report > mochawesome.json + npx mochawesome-merge . /mochawesome-report/*.json > mochawesome.json Cypress 创建这个库的主要动机是能够将 mochawesome 与 Cypress 一起使用。
安装依赖包 我们需要安装几个依赖: npm install —save-dev mocha mochawesome mochawesome-merge mochawesome-report-generator ": "^6.1.1", "mochawesome-merge": "^4.0.3", "mochawesome-report-generator": "^5.1.0" } 然后在 cypress.json 配置 mochawesome 报告生成器,保存每一个JSON测试报告到cypress/results目录: reporter 选择报告生成器mochawesome reportDir mochawesome-merge 合并报告 每个用例会生成一个json文件,最终我们合并成一个json文件,再把这个json报告文件生成一个html报告 npx mochawesome-merge cypress 关于 mochawesome-merge 相关用法参考这篇 https://github.com/Antontelesh/mochawesome-merge/tree/master mochawesome-report-generator
自定义的测试报告 除了内置的测试报告,Cypress 也支持用户自动以报告格式 Mochawesome 报告介绍 Mochawesome 是与 JavaScript 测试框架 Mocha 一起使用的自定义报告程序 ,它运行在 Node.js(≥8)上 并与 mochawesome-report-generatir 结合使用生成独立的 HTML/CSS 报告,以帮助可视化测试运行 在 Cypress 中使用 Mochawesome 报告的步骤 第一步 将 Mocha、Mochawesome 添加至项目中(看下面命令) npm install --save-dev mocha npm install --save-dev mochawesome 第二步 进入 Cypress 安装目录,cmd执行下面命令 yarn cypress:run --reporter mochawesome 运行完成后,可以看到下图 ? 测试报告文件夹 mochawesome-report 会生成在项目根目录下 ? ? 点击 html 查看可视化报告 ?
origin_path3, new_file_name) def npx_bulid(): command = r"cd D:\workspace\test && npx mochawesome-merge cypress/results/*.json > test-report.json" \ r"&&npx mochawesome-report-generator clearfile(): shutil.rmtree(r"D:\workspace\test\cypress\results") shutil.rmtree(r"D:\workspace\test\mochawesome-report ") def file_tozip(): startdir = "mochawesome-report" # 要压缩的文件夹路径 file_news = 'mochawesome-report.zip fpath + filename) print('压缩成功') z.close() def send_report(): filepath = "mochawesome-report.zip
生成测试报告 npm安装 npm install --save-dev mocha mochawesome mochawesome-merge mochawesome-report-generator 在 cypress.json 设置相关参数: { "env": { "search":"Cypress e2e" }, "reporter": "mochawesome
install selenium-webdriver@3.6.0 --save-dev npm install mocha@5.0.4 --save-dev npm install --save-dev mochawesome 具体代码 https://github.com/lilugirl/webdriverjs 执行语句 mocha test/login --reporter mochawesome --reporter-options autoOpen=true mocha test/list --reporter mochawesome --reporter-options autoOpen=true
如下面我们使用istanbul,可以看到我们的util.test.js的覆盖率情况 然后,如果想知道具体覆盖率情况,可以通过打开生成的报文去查看,如下面可以知道,哪些部分测试用例没有覆盖到 mochawesome 我们还需要更好的视觉体验 通过使用mochawesome工具,在当命令行运行 mocha 是增加 “ --reporter mochawesome ”参数,将测试用例运行情况转成更为直观的测试报文,如下
mochawesome 万事俱备?NO NO NO! 我们还需要更好的视觉体验 通过使用mochawesome工具,在当命令行运行 mocha 是增加 “ --reporter mochawesome ”参数,将测试用例运行情况转成更为直观的测试报文,如下
mochawesome 万事俱备?NO NO NO! 我们还需要更好的视觉体验 通过使用mochawesome工具,在当命令行运行 mocha 是增加 “ --reporter mochawesome ”参数,将测试用例运行情况转成更为直观的测试报文,如下
如下面我们使用istanbul,可以看到我们的util.test.js的覆盖率情况 然后,如果想知道具体覆盖率情况,可以通过打开生成的报文去查看,如下面可以知道,哪些部分测试用例没有覆盖到 mochawesome 我们还需要更好的视觉体验 通过使用mochawesome工具,在当命令行运行 mocha 是增加 “ --reporter mochawesome ”参数,将测试用例运行情况转成更为直观的测试报文,如下
-- mocha[2] + mochawesome[3],mocha 是比较主流的测试框架,支持 beforeEach、before、afterEach、after 等钩子函数,assert 断言,测试套件 mochawesome 是 mocha 测试框架的第三方插件,支持生成漂亮的 html/css 报告。 js 测试框架同样有很多可以选择,mocha、ava、Jtest 等等,选择 mocha 是因为它更灵活,很多配置可以结合第三方库,比如 report 就是结合了 mochawesome 来生成好看的 github.com/GoogleChrome/puppeteer [2] https://www.npmjs.com/package/mocha [3] https://www.npmjs.com/package/mochawesome
$ mocha --reporters 使用mochawesome模块,可以生成漂亮的HTML格式的报告。 ? $ npm install --save-dev mochawesome $ .. /node_modules/.bin/mocha --reporter mochawesome 上面代码中,mocha命令使用了项目内安装的版本,而不是全局安装的版本,因为mochawesome模块是安装在项目内的
({ spec: `${specFileList}`, //改这里 browser: 'chrome', headless: true, reporter: 'mochawesome