基于Vue的E2E测试实践思考

2019-04-25 本文已影响0人 Jims_d31e

文章在学习了大神（https://www.jianshu.com/p/936bee074b66），有了自己的思考和实践，特意记录下来。

E2E测试

E2E(end to end)测试是指端到端测试又叫功能测试，站在用户视角，使用各种功能、各种交互，是用户的真实使用场景的仿真。在产品高速迭代的现在，有个自动化测试，是重构、迭代的重要保障。对web前端来说，主要的测试就是，表单、动画、页面跳转、dom渲染、Ajax等是否按照期望。

E2E测试驱动重构

重构代码的目的是什么？是为了使代码质量更高、性能更好、可读性和拓展性更强。在重构时如何保证修改后正常功能不受影响？E2E测试正是保证功能的最高层测试，不关注代码实现细节，专注于代码能否实现对应的功能，相比于单元测试、集成测试更灵活，你可以彻底改变编码的语法、架构甚至编程范式而不用重新写测试用例。

Nightwatch

https://www.jianshu.com/p/936bee074b66)

Vue 官网推荐 vue-test-utils

该工具偏UnitTest，可以一边开发Vue前端，一边做好页面程序的UnitTest 或者说做TDD，深入了解Vue实现的原理，以后需要专门学习总结。
https://vue-test-utils.vuejs.org/zh/

Puppeteer

在chromium支持headless模式运行puppeteer会是在服务器下部署CI一个很好的尝试。
曾经写过关于Puppeteer的文章：
https://www.jianshu.com/p/6adad957d11f
继续学习和实践，下面是非常好的学习资源：

1 GoogleChromeLabs

https://github.com/GoogleChromeLabs/puppeteer-examples

2 From CheckLy

https://github.com/checkly/puppeteer-examples

实践过程：

cnpm i puppeteer
( Puppeteer API
https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md
)
https://github.com/checkly/puppeteer-recorder 用来边操作边录制元素操作，生成js脚本，不过脚本只能仅供参考。
元素定位是整个过程非常难的部分，Vue的页面很多是异步生成的，而且没有id和name，目前的做法是xpath和css一起用，陷入非常大的坑中不能自拔。。。
自动化执行只是强大到无朋友的Puppeteer能力的冰山一角，还有其他方面，比如截图、录PDF，Profiler等等。

3.前端自动化测试肯定需要做断言 Mocha和Jest ，好好理解了一下(async () => {await))
（https://www.jianshu.com/p/4cdb5ca31e1d
）
4.前端自动化断言离不开数据库的CRUD
https://github.com/oracle/node-oracledb

5.与CI集成，Puppeteer的chromium包支持 Win Linux Mac，

Puppeteer的脚本组织，目前看Github的Example都是基于操作流程，估计是因为支持异步，与平时习惯的PageObject有点不同。

PS：宇宙超级无敌宠坏了，只会NPM INSTALL，要实现步骤1，2，3，4在离线环境下安装，还真的很头疼很耗时。。

pyppeteer

作为Python的脑残粉，肯定不会研究Puppeteer在Python 的实现，与scrapy的整合，使爬虫又升了一个层次。动态爬虫作为漏洞扫描的前提，对于web漏洞发现有至关重要的作用，先于攻击者发现脆弱业务的接口将让安全人员占领先机。即使你有再好的payload，如果连入口都发现不了，后续的一切都无法进行。
https://github.com/miyakogi/pyppeteer
https://www.anquanke.com/post/id/178339