背景

• 公司测试部门实力雄厚，近期计划落地ui自动化测试
• 直觉上，前端不能不介入。
• 最终目的是达成：1. 保证某些关键业务的稳定 2. 测试减少手动测试，省事儿

例子

• 可以通过例子直观感受一下自动化的魅力（检察元素，拖拽，上传，校验表单）
• 用cypress敲测试用例的例子：

• UI Recorder录制既用例的例子：https://www.zhihu.com/zvideo/1368550532571938816

技术选项

• 罗列下我了解到的流行方案

什么是e2e测试

• 找的方案里都有这个专有名字： e2e。但关于e2e的解释也不太一样
• 大概可以描述为：系统作为一个黑盒子，模拟用户的ui交互，检查预期对否。
• 其他解释（https://www.katalon.com/resources-center/blog/end-to-end-e2e-testing/）
• 其他解释（https://www.cnblogs.com/yinn/p/9729258.html）

尝试cypress

• 结合项目习惯用vue官方推荐的cypress开始尝试

简单介绍cypress(晒press)

• 这是个前端工具，必须运行在本地的工具
• 包本身自带chrome浏览器|edge浏览器

1. 只需一个shell指令启动： .\node_modules\.bin\cypress open
2. 会打开【cy】程序，里头展示所有你写的测试用例，点击测试用例=》执行测试用例
3. 左侧是执行情况，涵盖功能：重新执行，逐步分析，断言成功，用例通过等
4. 右侧是ui，涵盖功能： 有当前帧url，前后效果，触点位置
5. 具体用例逻辑要根据需求书写，涵盖功能： 点击，拖拽，输入，上传，抓接口,截图等。

使用小结

1. 官方 说明了必须要用node12以上，目前项目上生产的是10.15，要考虑可能会发生在ci/cd上的兼容问题
2. 发现describe方法来自Mocha，expect方法来自Chai（都是知名的库）
3. 其他遇到的问题汇总

// 例子1
Cypress.Commands.add('login_before_load', () => {
    cy.visit('/', {
        onBeforeLoad: (contentWindow) => {
            contentWindow.localStorage.token = 'xxx'
            // 一种不这么麻烦(简单粗暴）的登录方式： 直接写入token
          },
    })
})
cy.login_before_load()   // 注册后，指令形式的登录

推进cypress

• 与测试团队探索这种方案的可能
• 设想是测试团队来用例设计，执行；但代码场所是前端代码git的test（测试用例）分支
• 前期前端写主用例，后期交付测试写主用例
• 还得是小规模内推行，并且注重配合，依赖测试对js，api等熟悉速度（当然前提是前端已经排了90%的坑）
• 交接测试时会写大量的测试代码，应该要加入eslint插件： 插件

小结

• 通过对cypress的探索，自己对ui自动化测试有了初步的了解
• 但在现实中的技术推进过程中，领导们考虑到的元素往往会更多，近来测试团队的重点还在构建接口测试和单元测试的平台，就暂且列ui自动化为一个todo项吧🤗