lanlin / notes

个人笔记
https://github.com/lanlin/notes/issues
30 stars 0 forks source link

关于前端测试 #64

Open lanlin opened 5 years ago

lanlin commented 5 years ago

背景

后端测试往往比较单一,每门语言往往都有其对应的测试工具。 而且很多都是官方直接提供的。移动端基本上也是如此。

这里所说的前端,专指 web 这一块。 最近几年诞生了一大批的各种测试工具,有单元测试类型的,也有端对端测试的。

一直以来也在寻求好的前端测试工具。尝试过很多家的东西,始终不是十分令人满意。 直到尝试过 Cypress 这个玩意,这真是个能令人眼前一亮的玩意。

工具推荐

需要说明的是,由于本人一直对前端(web)的单元测试不感冒。 因为需要 mock 的东西实在太多,而且往往不能通用,导致写起来异常的吃力。 所以,已经放弃 unit 疗法了,转而拥抱 e2e 大法。

这里推荐两家的 e2e 工具,用过了你就知道 e2e 大法好了

1. Puppeteer

Chrome59(linux、macos)、 Chrome60(windows)之后, Chrome自带headless(无界面)模式很方便做自动化测试或者爬虫。 Chrome 作为浏览器市场的领头羊,Chrome Headless 必将成为 web 应用自动化测试的行业标杆。

image puppeteer 截屏代码

Puppeteer 是谷歌官方出品的一个通过 DevTools 协议控制 headless 的 Node 库。 Puppeteer 提供的 api 可以直接控制 Chrome 模拟大部分用户操作。 因此可以用来进行 UI Test 或者作为爬虫访问页面来收集数据。 因为这玩意的诞生,许多业内自动化测试库都已经停止维护。

2. Cypress

Cypress是一款开箱即用,可以跑在Chrome浏览器上的端对端测试工具。

适合在开发时模拟各种场景,比如某些接口需要特定操作才可以请求到, 并且请求之后又要做很多ui操作,这个时候就可以利用Cypress来模拟用户操作了。

一方面可以测试代码是否正确,并且还能看到ui相应变化是否符合预期。 同样,测试 fail 了也可以直接调试。

效果展示1: all-tests

效果展示2: cypress

尾声

image

以上的对比数据足以说明 Puppeteer 的热度。

lanlin commented 5 years ago

前端性能

性能测试方面,直接用 Chrome DevTools 就可以了,绝对的业界良心!

image

lanlin commented 4 years ago

Cypress e2e 覆盖率问题的解决办法, 可以参考官方的 cypress-io/code-coverage 项目。

image

里面列举了大量不同框架和场景的栗子,都是来自其他开发者的共享。 https://github.com/cypress-io/code-coverage#external-examples

不得不感叹,程序员都是活雷锋啊。这里是github主题相关结果 https://github.com/topics/cypress-code-coverage-example