【技术干货】测试Angular项目的正确姿势

简介: 愚人节不愚人,继续深度技术!满世界都在整蛊开玩笑!我们就是要正正经经讲技术!有技术就是这么傲娇!这么任性!

满世界都在整蛊开玩笑!


我们就是要正正经经讲技术!


有技术就是这么傲娇!这么任性!


我说明天放假!你信吗!连放三天你信吗!



爱!信!不!信!







以下正文



(翩baohuhaonideyanjing




本文作者:上海驻云开发实施工程师 (实 shi 力 li wu wang方!舟!



在Web自动化测试方面,Selenium得到了广泛的应用,Splinter基于Selenium封装了更上层的API,用来方便测试人员编写用例,但我们使用Splinter测试我们的Web应用时发生了一些问题。







以上是一个简单的登录测试用例,看上去没有任何问题,但是最后的assert永远是失败的,因为我们使用了Angular,整个网站是全异步的,在执行那条assert的时候登录接口还未返回,而页面并没有进行重新加载,Splinter不会等待便会直接进行assert。


最简单直接的解决方法当然是在assert之前sleep一段时间,这个时间可以根据我们应用的实际响应速度进行调整,例如500ms,但是作为一个有强迫症的程序员,如此dirty的方法当然是不能接受的。


于是我跟我们公司的前端工程师讨论了一下(就是题图里面右边那个吐舌头的绅(hen)士(tai),对,我就是旁边那个福禄娃),给我们程序的rootScope设定一个counter,然后给rootScope一个interval,interval执行的内容是当counter为0的时候给body标签加一个pageReady的class,不为0就去掉,将我们封装过的发送http请求代码内发出时将counter加1,请求完成时-1。


JavaScript相关示例代码如下:



而后在Splinter中加入检查的代码,根据body的pageReady来进行检查,当然也需要有一个次数限制,毕竟页面有可能挂掉或者怎样,如果超过次数限制了也跳出,例如我在示例代码中写的是10次,在实际使用中可以根据场景调整这个时间。


Splinter中检查相关代码如下:



然后将最开始那个登录的代码加上wait_page_ready,改为:



其实visit后也要加入wait_page_ready,因为页面也有可能是异步加载的,最开始的例子中到assert才报错是因为刚好我们的login页面整个layout是一体的。


然而在编写测试用例时在每个正确的地方添加wait_page_ready太麻烦而且太不优雅了(知乎上多了干什么都要优雅一点),自然需要自动加一一下,以下代码则是自动给测试用例的visit,click等事件之后加上wait_page_ready。



好了,现在使用这个run方法来跑测试最开始那个测试用例,优雅并准确的解决了异步加载的Angular Web应用的自动化测试问题。


好啦~~~本文到这里也就结束啦~如果还希望了解更多相关知识的话,就赶紧订阅我们吧~~~

相关文章
|
13天前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
13天前
|
数据采集 前端开发 安全
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节,涵盖了多种技术和方法
|
1月前
|
存储 监控 网络协议
服务器压力测试是一种评估系统在极端条件下的表现和稳定性的技术
【10月更文挑战第11天】服务器压力测试是一种评估系统在极端条件下的表现和稳定性的技术
116 32
|
18天前
|
网络协议 关系型数据库 应用服务中间件
【项目场景】请求数据时测试环境比生产环境多花了1秒是怎么回事?
这是一位粉丝(谢同学)给V哥的留言,描述了他在优化系统查询时遇到的问题:测试环境优化达标,但生产环境响应时间多出1秒。通过抓包分析,发现MySQL请求和响应之间存在500毫秒的延迟,怀疑是网络传输开销。V哥给出了以下优化建议:
|
21天前
|
前端开发 JavaScript 测试技术
前端小白逆袭之路:如何快速掌握前端测试技术,确保代码质量无忧!
【10月更文挑战第30天】前端开发技术迭代迅速,新手如何快速掌握前端测试以确保代码质量?本文将介绍前端测试的基础知识,包括单元测试、集成测试和端到端测试,以及常用的测试工具如Jest、Mocha、Cypress等。通过实践和学习,你也能成为前端测试高手。
38 4
|
1月前
|
测试技术
自动化测试项目学习笔记(五):Pytest结合allure生成测试报告以及重构项目
本文介绍了如何使用Pytest和Allure生成自动化测试报告。通过安装allure-pytest和配置环境,可以生成包含用例描述、步骤、等级等详细信息的美观报告。文章还提供了代码示例和运行指南,以及重构项目时的注意事项。
210 1
自动化测试项目学习笔记(五):Pytest结合allure生成测试报告以及重构项目
|
25天前
|
编解码 安全 Linux
网络空间安全之一个WH的超前沿全栈技术深入学习之路(10-2):保姆级别教会你如何搭建白帽黑客渗透测试系统环境Kali——Liinux-Debian:就怕你学成黑客啦!)作者——LJS
保姆级别教会你如何搭建白帽黑客渗透测试系统环境Kali以及常见的报错及对应解决方案、常用Kali功能简便化以及详解如何具体实现
|
1月前
|
测试技术 Python
自动化测试项目学习笔记(四):Pytest介绍和使用
本文是关于自动化测试框架Pytest的介绍和使用。Pytest是一个功能丰富的Python测试工具,支持参数化、多种测试类型,并拥有众多第三方插件。文章讲解了Pytest的编写规则、命令行参数、执行测试、参数化处理以及如何使用fixture实现测试用例间的调用。此外,还提供了pytest.ini配置文件示例。
34 2
|
1月前
|
测试技术 Python
自动化测试项目学习笔记(二):学习各种setup、tearDown、断言方法
本文主要介绍了自动化测试中setup、teardown、断言方法的使用,以及unittest框架中setUp、tearDown、setUpClass和tearDownClass的区别和应用。
65 0
自动化测试项目学习笔记(二):学习各种setup、tearDown、断言方法
|
1月前
|
人工智能 自动驾驶 机器人
【通义】AI视界|苹果自动驾驶汽车项目画上句号:加州测试许可被取消
本文精选了24小时内的重要科技新闻,包括Waymo前CEO批评马斯克对自动驾驶的态度、AMD发布新款AI芯片但股价波动、苹果造车项目终止、Familia.AI推出家庭应用以及AI逆向绘画技术的进展。更多内容请访问通义官网体验。
下一篇
无影云桌面