cypress自动化--运行测试用例&报告输出

环境

cypress：8.3版本
主要记录以下cypress如何运行测试用例，分为通过界面和命令两种方式来记录

界面运行

启动界面详见https://blog.csdn.net/z917185537/article/details/119548674

运行单个文件

选择一个测试文件即可运行此文件中的用例，并且右上角中可以选择运行的用例

运行某一类testcase

通过搜索功能，点击run即可

运行所有文件

点击run即可运行所有文件中的用例

非界面运行

使用cypress run [option]命令
--browser, -b :指定浏览器，默认是electron
--config, -c：设置配置值
--config-file, -C：指定配置文件，默认为cypress.json，配置项详见此地址
--env, -e：指定运行环境
--headed：浏览器显示运行
--headless ：浏览器不显示运行，浏览器是electron，默认是headless
--group：设置运行组,cypress dashboard service中才能使用
--tag, -t:测试用例设置标签,cypress dashboard service中才能使用
--parallel：设置用例在多台机器上并行,cypress dashboard service中才能使用
--reporter, -r:报告格式，报告路径,junit,json等

cypress run --reporter json
cypress run --reporter junit --reporter-options mochaFile=result.xml,toConsole=true

--quiet, -q:如果测试通过则不会打印出stdout，只会打印配置的reporter
--port <port>：设置端口
--reporter-options, -o：报告输出文件名
--spec, -s:指定test case文件路径

yarn cypress run --spec "文件路径"

输出报告mochawesome

1、安装依赖包

npm install --save-dev mocha
npm install --save-dev mochawesome

2、cypress.json中配置生成的报告路径和类型

"screenshotsFolder": "cypress/report/mochawesome-report/assets",  //配置截图路径
  "reporter": "mochawesome",//配置报告类型
  "reporterOptions": {
    "reportDir": "cypress/report/mochawesome-report",
    "overwrite": true,
    "html": true,
    "json": false
  }

3、设置失败截图，对所有用例均生效，可以support/index.js中添加before或者before each，然后添加以下代码是为了让报告中有截图文件
其中定义了一个getTestFullName方法，是为了获取正确的截图文件名称，因为生成的截图文件是suitname+casename,有些会嵌套多层suit需要递归获取suitname

const addContext = require('mochawesome/addContext')
  Cypress.on('test:after:run', (test, runnable) => {
    if (test.state === 'failed') {
       let screenshotFileName = getTestFullName(runnable.parent,`${runnable.title} (failed).png`)
       function getTestFullName(x,name){
        if (`${x.title}` == ''){
          return name
        }
        else{
          return getTestFullName(x.parent,`${x.title}`+" -- "+name)
        }
      }
      addContext({test}, `assets/${Cypress.spec.name}/${screenshotFileName}`)
    }
  })

4、运行输出报告

yarn cypress run  --browser chrome --headless --spec 'cypress/***.js' 

5、mochawesome输出的报告是一个测试文件生成一个报告文件，因此会生成多个报告，可以在cypress.json,如下配置

 "screenshotsFolder": "cypress/report/assets",
  "reporter": "mochawesome",
  "reporterOptions": {
    "reportDir": "cypress/report",
    "overwrite": false,
    "html": false,
    "json": true

并且安装对应的依赖npm install --save-dev mochawesome mochawesome-merge mochawesome-report-generator
6、执行测试
yarn cypress run
7、合并报告
⚠️合并生成的报告名字不要写成mochawesome.json或者和其他依赖一样的名字，不然可能会导致再次执行测试失败
npx mochawesome-merge "cypress/results/*.json" > report.json
7、生成html
npx marge reprot.json