沐沐一直在思考UI自动化有用吗？毕竟UI自动化的投入产出比（ROI）实在太低。对于测试人员而言，UI自动化就像是一个装备，升级打怪不一定用的到这个小装备，但是没有这个装备就会被鄙视。因此从投入的角度分析，选择UI自动化框架时，尽量选择学习成本和维护成本的较低的框架；从产出的角度而言，脚本需要产生效益，就需要更多的受众去使用；如果一定要选择一种UI自动化框架，沐沐一定会选择Cypress。Cypress是基于node.js环境的，安装则极为便利，如果我们测试人员维护好了自动化脚本，就可以直接将js脚本分享给研发人员，辅助研发人员进行自测。如果能将UI自动化普及到整个部门都去使用，辅助提升产品研发效率，那UI自动化就是非常有价值的事情。

一、Cypress简介

• 官网地址：https://docs.cypress.io

• 官网的首页有一句标语“The web has evolved.Finally, testing has too.”意思是Web已经进化了，最终，测试也是。

• 而对于Cypress的介绍则是“Fast, easy and reliable testing for anything that runs in a browser.”翻译为“对浏览器中运行的任何内容进行快速、简单和可靠的测试”。

• Cypress是一种E2E测试框架，即end to end测试。同类型的框架还有Testcafe 等。但是E2E测试似乎是比较冷门的模块，而Cypress使得E2E测试更加简单。Cypress框架安装成功后，example文件中还有很多的demo，有助于我们更快的了解和学习该框架。Cypress也可以说是web UI自动化的完美解决方案。

二、Cypress的优势

•  安装简单：毫不夸张的说，在网络正常的情况下，10分钟就可以安装好Cypress框架，一天则可以入门，写一些简单的用例。

• 运行速度快：相较于Selenium来说，Cypress的运行速度真的是相当快了，它不需要web driver来驱动浏览器。

•  脚本实时调试：在脚本编写过程中，只要编辑器中进行保存，脚本就会自动运行，可以快速高效的知道脚本是否正确。

• 兼容性测试：目前Cypress已经支持Chrome和Firefox两款主流浏览器，在GUI界面可以非常便捷的切换浏览器进行兼容性测试。

• 失败用例自动保存截图：脚本运行失败后，会在..\cypress\screenshots文件夹下面自动保存失败用例的截图，方便我们追踪道失败用例的原因。

• 运行过程自动录制视频：脚本运行完成后，会在..\cypress\videos文件夹下自动保存脚本运行过程录制的视频。

三、Cypress环境搭建

• 安装node.js

    1、官网下载地址：https://nodejs.org/en/download/

    2、傻瓜式安装，安装后查看是否成功：node –v

    3、最新版的node在安装时同时也安装了npm，查看npm版本：npm -v

    4、具体安装步骤参考菜鸟教程：https://www.runoob.com/nodejs/nodejs-install-setup.html

• 安装Cypress

    1、cmd进入命令行模式，进入D盘创建一个文件夹：mkdir Crypress_project

    2、进入新创建的文件夹下面：cd Crypress_project

    3、初始化项目：npm init -y

    4、安装cypress：npm i cypress -S -D；安装成功截图如下：

• 配置package.json

    1、打开 Crypress_project路径下的package.json文件，将里面的内容全部删除，复制上去以下代码：

{
  "scripts": {
   "cypress": "cypress open"
  }
}

• 运行Cypress

    1、运行命令： npm run cypress

    2、Cypress窗口正常打开不报错，即环境安装成功。

    3、examples中是Cypress提供的demo，点击即可运行，如下图：

四、Cypress报告配置

• 安装mochawesome

    1、mochawesome安装说明：mocha必须指定 7.1.1， 否则会报错。

    2、安装命令：

    npm install --save-dev mocha@7.1.1 mochawesome mochawesome-merge mochawesome-report-generator

    3、配置cypress.json文件，代码如下：

{
  "reporter": "mochawesome",
  "reporterOptions": {
    "overwrite": false,
    "html": true,
    "json": true
  }
}

• 配置生成报告的脚本

   1、在cypress同级目录下新增scripts文件夹，文件夹下面新增cypress.js，代码如下：

{
    const cypress = require('cypress');
    const fse = require('fs-extra');
    const {merge} = require('mochawesome-merge');
    const generator = require('mochawesome-report-generator');
    async function runTests() {
        await fse.remove('mochawesome-report');
        const {totalFailed} = await cypress.run();
        const jsonReport = await merge();
        await generator.create(jsonReport);
        process.exit(totalFailed)
    }
    runTests()
}

• package.json文件添加启动脚本

   1、package.json文件添加启动脚本，代码如下：

{
"scripts": {
  "cypress": "cypress open",                 //正常运行cypress的命令
  "report": "node scripts/cypress.js"    //运行生成mochawesome报告的命令
},
}

• 报告模式运行 

   1、运行命令：npm run report；运行过程截图如下：

• 查看报告详情

   1、打开报告路径：..\Crypress_project\mochawesome-report\.......报告截图如下：

也许有些同学会觉得自己熟悉的语言是python，并不熟悉js，所以不会去尝试这个框架，其实完全不用担心，沐沐也不会js，但是沐沐会百度、会copy、会一点英语，就已经足够去写正常的UI 自动化脚本了。适合自己产品的才是最好的。沐沐工作中使用的前端框架是vue，所以调研了很多UI自动化框架后，Cypress无疑是最好的选择。当然并不是所有的产品或者项目都适合自动化，但是工作中存在手工重复的痛点时，就要考虑用自动化的方式去解决，这才是自动化存在的意义。

The more we share，The more we have.

希望这篇文章对大家有用...