摘要：与其它自动化测试不同，前端的测试一直是个老大难问题，难点主要在于如何描述测试。自动化测试的核心是检查特定输入能不能得到符合预期的结果。结构不能反应视图的真实状态，很可能会出现虽然测试通过，但实际上在用户眼里仍然是错误的表现。
与其它自动化测试不同，前端的 E2E 测试一直是个老大难问题，难点主要在于 如何描述测试。
自动化测试的核心是检查特定输入能不能得到符合预期的结果。对于单元测试和 API 测试来说，“特定输入”就是函数或者接口的参数，结果也是当前语言的数据类型或者通用的比如 JSON，二者一方面好描述，另一方面好验证。写起来就没什么难度。
比如
sum(a, b) {
return a + b;
}
要验证输入 1 和 2，返回 3，则可以写成：
const assert = require("assert");
describe("sum", function() {
it("should equal", function() {
assert.equal(sum(1, 2), 3);
});
});
这里输入输出都很容易描述，所以自动化测试就没什么难度。
但是 UI 的 E2E 测试并非如此。UI 是做给用户看的，所以，一个 UI 的 E2E 测试应该写成这种形式（这里拿一个类似于活动行的应用来举例子）：
打开应用首页
显示活动列表
点击列表中的任一项
进入活动详情页
点击报名按钮
登记个人信息
点击付费按钮
完成付费
看到报名成功的信息
这个过程当中用户的操作，很难和程序当中的抽象产物，比如按钮、列表等产生关联。操作的结果，“进入下一页”，也很难进行进一步的校验。
所以在之前的生产实践中，大家喜欢用选择器来进行 E2E 测试，代表产品有 Cypress 和 Nightwatch。我觉得，这里一方面有 jQuery 带来的使用习惯延续和思维定势；另一方面，借助 XPath，找到特定元件，进行交互操作和校验元素几乎是大家唯一的选择。
使用 CSS 选择器的方案并不完美，比如：
选择器本身，和 UI 视图可能并没有强关联，写出来的测试可读性不强，一段时间之后回头去看，很可能会看不懂。
HTML 的 DOM 结构并不稳固，随着功能增减版本迭代经常发生变化，这个时候我们就要跟着修改测试用例。
DOM 结构不能反应视图的真实状态，很可能会出现虽然测试通过，但实际上在用户眼里仍然是错误的表现。
那么，说了这么多不容易、其它方案的不完美，我的解决方案又是怎么样的呢？
这里请容许我卖一下关子，下次再介绍由我厂 OpenResty Inc. 打造的前端自动化工具 Navlang。
大家好，我是 Meathill，目前在 OpenResty Inc. 负责前端开发工作。今年我会利用业余时间，介绍我厂在前端方面的工作，包括各种垂直领域，比如自动化、基于 DevTool Protocol 开发、WebExtension 开发、Vue、CodeMirror、组件化等等，内容包括进展、经验、心得、踩坑、产品等。
欢迎大家关注本专栏，也欢迎大家光临我的博客：山维空间。如果你有任何疑问问题都可以在 SF 和我的博客上向我发问，我一定尽量答复。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/8928.html
摘要：是一款开箱即用可以跑在浏览器上的测试工具。同样，测试了也可以直接调试。这个时候我们的测试文件就可以访问了，点击之后发现他需要我们编写测试用例，那么接下来就手把手教你编写基本的测试用例。 What is E2E? 所谓的E2E就是end-to-end。 假设我们编写的每个功能程序都是一个黑匣子，最终用户也只会看到这个黑匣子，那么站在用户的角度来看并不需要知道这个黑匣子内部是什么东西也不...
摘要：单元测试前端的单元测试目前有两个比较热的框架，一个是的方式，一个是。小伙伴们不用急，关于单元测试这块，我会找时间写博客的。首先前端的测试分为两种，一个是单元测试，另一个就是测试了。 因为公司项目要用vue框架，所以会用vue-cli来新建项目。用过vue的都知道，要全局安装vue以及脚手架vue-cli，然后执行vue init webpack projectname来新建vu...
摘要：进行测试之理论是目前很火的一个测试组件，内部绑定了之类的断言为了让代码代码更有说服力，减少提交测试错误，进行测试显然是非常有必要的。 cypress 进行 e2e 测试之理论 cypress 是目前 e2e 很火的一个测试组件，内部绑定了 macha、chai、chai-jquery 之类的断言,为了让代码代码更有说服力，减少提交测试错误，进行 e2e 测试显然是非常有必要的。 官网...
摘要：本身项目也是使用来测试的。一个简易的模式的配置如下的分为四个部分在实例上以开头的行为驱动测试风格的接口，及以上版本可用。例如以开头的两套相同的方法库，区别是如果断言失败则退出整个测试用例所有步，则打印后继续进行。 E2E测试 E2E(end to end)测试是指端到端测试又叫功能测试，站在用户视角，使用各种功能、各种交互，是用户的真实使用场景的仿真。在产品高速迭代的现在，有个自动化测...
阅读 873·2021-10-25 09:44
阅读 1236·2021-09-23 11:56
阅读 1082·2021-09-10 10:50
阅读 3015·2019-08-30 15:53
阅读 2045·2019-08-30 13:17
阅读 600·2019-08-29 18:43
阅读 2412·2019-08-29 12:57
阅读 830·2019-08-26 12:20
