玩 e2e cypress 上瘾了，你们前端项目一般如何测试？

[zhuzhibin]

换了 Mac pro 不知不觉更喜欢深夜敲代码了，真的香！！！不知不觉已经快凌晨 4 点了，我带着困意还是打算发个帖子和大家共享一下我这几天琢磨的一些事情。
本人其实是后端，但由于公司的发展与需求，开始着手维护前端项目，也一直在看 react （大佬可以带带我嘻）
为了确保业务 flow 能够 stabling，最近公司前端项目在测试环节上选用了 e2e 的 cypress，琢磨了一阵子，体验还是很好的，开箱即用。

体验如下

• 开箱即用
• 官方 doc 很多，利于开发与维护
• gui 界面（ env：google 浏览器），可边测边调整
• 自定义 commands
• 自定义 fixture，可 mock 数据
• 支持 ci 运行测试，可上传到 bashBoard
• 关注测试覆盖率（ Chrome 的 coverage ）
• 截图功能，用例失败的场景节点会被截图保存，利于复现
• 录屏功能，每个测试用例都会记录下来（ MP4 ）
• 等等。。。

example

饿了么首页为例：验证搜索一个商品

it('输入搜索词，结果正确展示', () => {
  cy.visit('https://h5.ele.me/')
  // 点击跳转搜索页面
  cy.get('.search').click()

  cy.wait(200)
  cy.get('input').type('麻辣烫')

  cy.get('button').click()

  // 目标页面地址包含 search 点击列表第一项
  cy.wait(500)
  cy.url().should('include', 'search')
  cy.get('.shop').first().click()

  // 跳转至商家详情页，找到购物车元素
  cy.wait(500)
  cy.get('.cartview')
})

[原文链接] https://zhuanlan.zhihu.com/p/32666685

纯属交流 QA

• 你们的前端项目在测试工程上一般如何选型？

• 你们一般使用什么测试？

• 测试的目的是什么？

• 单元测试、验收测试等哪些更需要注重?

希望跟 V 站的大佬们多多交流~~~ 晚安 米娜桑

[qdwang]

人肉测试

[tedd]

能劫持表单提交并 assert 提交的数据吗？

[zhuzhibin]

@tedd
前后端分离比较彻底的话 你可以通过拦截请求来 assert 你的结果 cy.requst cy.route 都可以 然后 expect($res).to.be.null 等等 我建议你有兴趣可以看看官方 api

[zhuzhibin]

@qdwang 很久很久以前我也是 滑稽

[zhuzhibin]

@tedd 另外表单的数据我们都可以通过 cypress 去伪造 最重要的是验证结果 例如我提交了评论 实际上我只需要确认是否评论成功 如果我看到到了 那么认为是通过的

[shijiu1919]

嗨喽，我在写自动化测试 cypress 的时候，在 cypress/plugins/index.js 里面引入插件 code-coverage。启动测试的是，会显示一个报错，@cypress\code-coverage\node_modules\execa\index.js:18 不知道怎么解决，你们有没有出现过呢，

[zhuzhibin]

@shijiu1919 看报错会不会是插件的依赖问题呢 没有装好？另外可以去 google 查一下 或者 issues 看看有没有人提类似的问题

[shijiu1919]

@zhuzhibin 目前已经可以正常启动了，刚开始写这个，感觉一脸懵。现在是已经进入了 coverage 的 index.html, 但是除了表头之后，下面一片空白，不知道还有哪些地方还需要关联一下。