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

2019-02-23 03:52:34 +08:00
 zhuzhibin

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

体验如下

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 站的大佬们多多交流~~~ 晚安 米娜桑

4080 次点击
所在节点    问与答
8 条回复
qdwang
2019-02-23 07:57:21 +08:00
人肉测试
tedd
2019-02-23 09:50:42 +08:00
能劫持表单提交并 assert 提交的数据吗?
zhuzhibin
2019-02-23 11:23:15 +08:00
@tedd
前后端分离比较彻底的话 你可以通过拦截请求来 assert 你的结果 cy.requst cy.route 都可以 然后 expect($res).to.be.null 等等 我建议你有兴趣可以看看官方 api
zhuzhibin
2019-02-23 11:23:45 +08:00
@qdwang 很久很久以前我也是 滑稽
zhuzhibin
2019-02-23 11:37:23 +08:00
@tedd 另外表单的数据我们都可以通过 cypress 去伪造 最重要的是验证结果 例如我提交了评论 实际上我只需要确认是否评论成功 如果我看到到了 那么认为是通过的
shijiu1919
2020-02-26 09:05:10 +08:00
嗨喽,我在写自动化测试 cypress 的时候,在 cypress/plugins/index.js 里面引入插件 code-coverage。启动测试的是,会显示一个报错,@cypress\code-coverage\node_modules\execa\index.js:18 不知道怎么解决,你们有没有出现过呢,
zhuzhibin
2020-02-26 10:07:57 +08:00
@shijiu1919 看报错会不会是插件的依赖问题呢 没有装好?另外可以去 google 查一下 或者 issues 看看有没有人提类似的问题
shijiu1919
2020-02-26 17:29:44 +08:00
@zhuzhibin 目前已经可以正常启动了,刚开始写这个,感觉一脸懵。现在是已经进入了 coverage 的 index.html, 但是除了表头之后,下面一片空白,不知道还有哪些地方还需要关联一下。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/537839

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX