基于Vue的E2E测试实践思考

文章在学习了大神(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

实践过程:

  1. cnpm i puppeteer
    ( Puppeteer API
    https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md
    )

  2. 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,

  1. 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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容