市面上有许多E2E框架，我选择了[Cypress](https://www.cypress.io/)，它是为现代网络构建的前端测试工具，解决了开发人员和 QA 工程师在测试应用程序时面临的关键痛点。   在这个测试框架中包含了E2E测试、集成测试和单元测试（内嵌了Mocha），我们需要的是它的E2E测试的能力。   官网中包含详尽的API接口文档，以及多个视频教程、实例等，只要有耐心，看完文档，上手是不成问题的。   之所以要引入E2E测试，主要是为了保证主流程能够不出错，尤其是在后期做修修补补后，有一个可靠的方式告诉我们当前页面是正常的就行。   所以，并不会要求E2E的覆盖率要达到怎样的一个数字，只是为了保证代码的健壮性。 ## 一、安装和初始化   安装命令如下： ~~~ npm install cypress --save-dev ~~~   下面这个命令会初始化一堆已经写好的用例： ~~~ npx cypress open ~~~   命令执行完后，就会在根目录中新增cypress文件夹，其中 fixtures 文件存放自定义的 json 文件，integration 文件存放测试用例，support可以自定义命令。 ~~~ |-- fixtures |-- integration |----- example.spec.js |-- plugins |-- support ~~~   在 integration 中包含 1-getting-started 和 2-advanced-examples 两个文件夹，这些是内置的用例，可以作为demo查看。 ## 二、启动   将 cypress open 命令添加到 scripts 中，就能通过 npm run cypress 命令执行E2E测试了。 ~~~ { "scripts": { "cypress": "cypress open" } } ~~~   运行后会出现下面这个界面： :-:    点击某个测试用例文件，就会开启一个浏览器，并显示测试过程，绿色是正常，红色是异常，下图是正常的结果。 :-:  ## 三、测试用例   下面的用例在模拟登录，首先是通过 visit() 函数请求登录地址。 ~~~ describe('登录', () => { beforeEach(() => { cy.visit('http://localhost:8000/login') }) it('账号和密码错误', () => { cy.get('#userName').type(userName); //读取ID为userName的控件，并赋值 cy.get('#password').type(pwd + '{enter}'); //读取ID为password的控件，赋值后自动按回车 cy.contains('测试用户').should('exist'); //界面中是否包含测试用户的标签 }); }); ~~~   然后通过get()读取指定选择器的控件，选择器的语法可参考jQuery，官方提供了众多的API，例如 wait()、find()、wrap()、log()等，此处只演示了其中的几个，断言可参考[chai](https://docs.cypress.io/guides/references/assertions#Chai)。   cypress的功能非常强大，在应用到实际项目中后，就能慢慢解锁了。   还有一个[Testing Library](https://testing-library.com/)库，封装了一些常用的查询功能，例如根据内容查询控件，有需要的话可以自行安装。 ***** > 原文出处： [博客园-Node.js躬行记](https://www.cnblogs.com/strick/category/1688575.html) [知乎专栏-Node.js躬行记](https://zhuanlan.zhihu.com/pwnode) 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎阅读。  推荐一款前端监控脚本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不仅能监控前端的错误、通信、打印等行为，还能计算各类性能参数，包括 FMP、LCP、FP 等。