【技术干货】测试Angular项目的正确姿势
满世界都在整蛊开玩笑！
我们就是要正正经经讲技术！
有技术就是这么傲娇！这么任性！
我说明天放假！你信吗！连放三天你信吗！
爱！信！不！信！
以下正文
（翩
bao
翩
hu
美
hao
少
ni
年
de
来
yan
袭
jing
）
本文作者：上海驻云开发实施工程师 （实 shi 力 li 网 wu 红 wang ） 方！舟！
本文作者：上海驻云开发实施工程师 （实 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应用的自动化测试问题。
好啦~~~本文到这里也就结束啦~如果还希望了解更多相关知识的话，就赶紧订阅我们吧~~~
展开
收起
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
