V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
zhuzhibin
V2EX  ›  问与答

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

  •  
  •   zhuzhibin · 2019-02-23 03:52:34 +08:00 · 4091 次点击
    这是一个创建于 2110 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    8 条回复    2020-02-26 17:29:44 +08:00
    qdwang
        1
    qdwang  
       2019-02-23 07:57:21 +08:00 via iPhone
    人肉测试
    tedd
        2
    tedd  
       2019-02-23 09:50:42 +08:00 via iPhone
    能劫持表单提交并 assert 提交的数据吗?
    zhuzhibin
        3
    zhuzhibin  
    OP
       2019-02-23 11:23:15 +08:00 via iPhone   ❤️ 1
    @tedd
    前后端分离比较彻底的话 你可以通过拦截请求来 assert 你的结果 cy.requst cy.route 都可以 然后 expect($res).to.be.null 等等 我建议你有兴趣可以看看官方 api
    zhuzhibin
        4
    zhuzhibin  
    OP
       2019-02-23 11:23:45 +08:00 via iPhone
    @qdwang 很久很久以前我也是 滑稽
    zhuzhibin
        5
    zhuzhibin  
    OP
       2019-02-23 11:37:23 +08:00 via iPhone   ❤️ 1
    @tedd 另外表单的数据我们都可以通过 cypress 去伪造 最重要的是验证结果 例如我提交了评论 实际上我只需要确认是否评论成功 如果我看到到了 那么认为是通过的
    shijiu1919
        6
    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
        7
    zhuzhibin  
    OP
       2020-02-26 10:07:57 +08:00 via iPhone
    @shijiu1919 看报错会不会是插件的依赖问题呢 没有装好?另外可以去 google 查一下 或者 issues 看看有没有人提类似的问题
    shijiu1919
        8
    shijiu1919  
       2020-02-26 17:29:44 +08:00
    @zhuzhibin 目前已经可以正常启动了,刚开始写这个,感觉一脸懵。现在是已经进入了 coverage 的 index.html, 但是除了表头之后,下面一片空白,不知道还有哪些地方还需要关联一下。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3518 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 04:50 · PVG 12:50 · LAX 20:50 · JFK 23:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.