webUI自动化测试（cypress）

什么是UI自动化测试

UI自动化测试是一种通过模拟手动操作用户UI界面的方式，以代码方式实现自动操作和验证的一种自动化测试手段。它可以模拟用户与应用程序或网站的交互，自动化执行用户界面上的操作，如点击按钮、输入文本、选择选项等，并检查应用程序或网站的响应和行为是否符合预期。UI自动化测试通常用于验证用户界面的功能、性能和稳定性，并可以在软件开发过程中帮助检测和修复错误。

为什么需要UI自动化测试

• 提高测试效率：通过自动化测试，可以快速地执行大量的测试用例，覆盖更多的测试场景，从而在更短的时间内完成测试任务，提高测试效率。
• 减少人为错误：自动化测试可以减少人为错误，如遗漏测试用例、误操作等，从而提高测试的准确性和可靠性。
• 持续集成和交付：在敏捷开发或DevOps环境下，需要频繁地集成和交付软件。通过自动化测试，可以快速地检测和验证软件的功能和性能，确保软件的质量和稳定性。
• 验证复杂功能：对于一些复杂的功能，手动测试可能需要花费大量的时间和精力。通过自动化测试，可以快速地验证这些复杂功能，提高测试的效率和质量。
• 支持性能测试：性能测试是UI自动化测试的一个重要方面。通过自动化测试，可以模拟大量的用户请求和操作，对系统进行压力测试，检测系统的性能和稳定性。
• 快速回归测试：在软件开发过程中，每次更新或修复软件后，都需要进行回归测试，以确保软件的功能和性能没有受到影响。通过自动化测试，可以快速地执行回归测试，提高测试的效率和质量。

什么样的项目适合自动化测试

• 需求稳定，不会频繁变更
• 定期构建，验证测试
• 比较频繁的回归验证（回归验证指在软件开发过程中，对已经测试过的功能或模块进行再次验证的过程。它的主要目的是确保软件在经历了修改或更新后，仍然能够正常工作。回归验证的意义在于减少软件开发过程中引入新错误的风险，并保证软件的质量和稳定性。）
• UI界面稳定，变动少
• 项目周期长

自动化测试怎么做

界面回归测试：通过比对页面截图之间的差异是否大于一个阈值来判断

功能测试：模拟用户操作流程来判断页面功能是否正常

自动化测试与CI结合：持续集成，提交代码后自动部署，自动测试修改的代码的相关联的case

后端框架：eggjs

service：nodejs

什么是cypress

Cypress是一个基于JavaScript语言的前端自动化测试工具，无需借助外部工具，自集成了一套完整的端到端（模拟真实用户场景，主要从最终用户的体验进行测试）测试方法，可以对浏览器中运行的所有内容进行快速、简单、可靠的测试，并且可以进行接口测试。

为什么选择cypress

自动化测试工具很多，都各有优点和缺陷。不能以哪个工具使用更广泛，优点更多来选择使用说明工具，选择的时候应该根据需求选择更合适的工具来支持自己的业务。

UI交付平台由FE来编写，使用javascript语言，Cypress是首选。

Cypress有谷歌插件，可供非技术人员帮忙录制case，编写 UI 自动化测试，再由研发人员转成对应的代码，提高效率，拉近研发和测试之间的距离。

Cypress使用的是与浏览器相同的DOM事件，因此其命令的执行速度要比其他自动化测试工具如Selenium快得多。

优点

1.免费，开源

2.易于上手。

• 语法简单，编写测试脚本阅读性高，易于理解。
• 安装简单，不用下载浏览器驱动程序。
• 官网文档详尽，有很多关于操作的视频。
• 社区活跃，大家共同讨论提出的问题。

3.易于调试。

• 支持使用web浏览器上的开发者工具进行调试。
• 内置selector playground帮助定位元素。
• 运行测试时，截取快照，可以把每一个执行步骤的信息展示出来。
• 错误消息可读性好，且错误信息丰富。
• 可以回溯到之前的画面、请求内容，执行的操作。

4.截图和视频：支持失败自动截图，还可以在运行测试的时候生成运行过程的视频。

5.运行测试速度快，基本上可以与浏览器内容实时同步。修改脚本能进行实时重载，快速响应。

6.自动等待，无需额外设置等待时间。

缺点

1.只支持chrome内核的浏览器

2.不能根据自己的熟练度选择语言

3.对iframe支持不好，无法做到实时调试，没有快照功能。

Support snapshotting iframes · Issue #1433 · cypress-io/cypress · GitHub

4.不支持驱动多浏览器或多标签场景

测试代码录制

为什么要进行case录制？

为了方便不懂代码的人也能进行case的录制，拉近业务、测试、研发之间的距离。不需要开发人员自己去根据用户操作去编写测试代码。

怎么完成case录制？

使用chrome插件 Cypress Chrome Recorder将录制好的case转json代码

用例录制

1.安装Cypress Chrome Recorder

2.录制之前：右键打开开发者视图，进入Recorder

3.点击Create a new recording--->在RECORDING NAME输入case名--->点击Start recording即可进行用例录制。

4.用例录制完成后，点击End recording，完成用例录制。

5.点击顶部导出按钮，将刚刚录制完成的json 用例存储在本地。

为什么录制代码后不直接使用录制好的case？

这仅能做一个辅助，无法完全依赖它生成的代码，比如添加每一步操作的截图及设置名称，给测试用例设置名称，给访问url添加参数等一些业务定制化需求无法满足。需要在此基础上进行一些修改。

怎么实现录制case后实现定制化需求？

基于cypress/chrome-recorder库将Cypress Chrome Recorder录制的json转成cy.js格式的代码供cypress进行测试。继承库提供的CypressStringifyExtension类进行重写。cypress-chrome-recorder/src/CypressStringifyExtension.ts at main · cypress-io/cypress-chrome-recorder

录制过程中一些问题

默认的录制回放时间很短，导致有些操作无法连贯起来。在生产环境运用时在每个step之间加一秒的间隔。

cypress底层不支持iframe，需要直接访问iframe里面的页面进行录制。

怎么呈现测试结果

研发可以通过运行cypress到可视化界面去看，也可以通过cypress默认自带测试报告的三种格式去看。测试报告展示了测试执行的总时间，执行测试用例的数目，成功的数目，失败的数目，每条测试执行的时间等很多有效的信息。但默认的自带测试报告不能更直观的展示给非研发人员测试的结果，所以这里采用mochawesome自定义测试报告来呈现结果。

默认自带

spec格式（嵌套样式的分组视图）

json格式

junit格式（将测试报告的输出格式调整为XML文件【可扩展标记语言】，测试运行完之后，会在工程根目录中生成test-results.xml格式的文件）

自定义测试报告

使用mochawesome

npm install mochawesome --save-dev

测试报告

同时生成spec和json格式的报告(将测试用例展示到一个html文件中）

同时生成spec和json格式的报告，其中：spec在控制台输出，json格式用于保存，然后将json合并成一个，最终通过.html显示

这里json的用途是

安装

npm install --save-dev mochawesome mochawesome-merge mochawesome-report-generator

• • mochawesome-merge：合并json报告
  • mochawesome-report-generator：生成html报告

配置

const { defineConfig } = require("cypress");
module.exports = defineConfig({
  e2e: {
     setupNodeEvents(on, config) {
      // implement node event listeners here
      },
    },
  reporter: 'mochawesome',// cypress run 时的测试报告生成策略
  reporterOptions: {
    reportDir: 'cypress/results'// 测试报告的文件夹
    overwrite: false, // 是否覆盖原来的报告
    html: false,// 是否生成html报告
    json: true// 是否生成json文件 
  }
});

执行测试

npx cypress run

合并报告

⚠️合并生成的报告名字不要写成mochawesome.json或者和其他依赖一样的名字，不然可能会导致再次执行测试失败

npx mochawesome-merge "cypress/results/*.json" > report.json

生成html

npx marge reprot.json