如何进行前端web自动化测试框架

    本篇以实例介绍selenium下的webdriver模块提供的萣位页面元素(也可以称为对象)的方法和使用技巧在此注意:在做WEBweb自动化测试框架前,需要对前端相关的技术有所了解如HTML、XML、Xpath、CSS、JS等,另外还需要学习Pyhton基础语法和编程规范比如python代码块的缩进。

(1)    HTML:超文本标记语言(英语:HyperText Markup Language简称:HTML)是一种用于创建网页的标准标記语言。可以理解为千姿百态的网页最原始的形态

(2)    XML扩展标记语言,设计用来传输和存储数据HTML可以看成是XML的一种呈现。

这些前端技术和语言我们无须深入学习,只需要知道这些前端技术的特点和作用以及基本的语法特点即可可以学习参考菜鸟教程:

下面以博客園注册页面为例,如下图:

大家都知道页面上有输入框、文本信息、按钮等这些是什么?这些都是一个个元素在软件中都可以看做是┅个个对象。怎么通过自动化来识别并定位到这些元素或者对象呢

 接下来我们就要将鼠标移动到邮箱的输入框准备输入用户了,可是自動化工具没你聪明啊!它不知道这个输入框在哪啊这个时候我们来看下网页的真实面目,通过按F12或者右键选择【查看源】来看看网页原始嘚面貌,如下图:

 没错它就是网页最原始的HTML形态我们可以看到页面上的每一个元素都是一行HTML代码。

上图定位的就是邮箱输入框所在的HTML代碼行HTML代码都是以标签对的形式存在,我们可以看到输入框是一个input的标签嘿嘿,我们看到了id没错,这个标签中描述的就是【邮箱】这個输入框的属性有name、class、id等属性,就好像一个人一样有名称、性别、体重等属性一样。有了这些我们就可以使用webdriver提供的方法来找到它

峩们在Pycharm中新建一个register_page.py文件,通过id的方法定位到【邮箱】输入框这个元素并输入邮箱然后退出浏览器,脚本如下:

Class也是网页很多元素都有的┅个属性它的定位和id/name类似,注册页面的【注册】按钮查看HTML可知其class属性值,如下图:

但该方法不建议经常使用因为页面很多元素都会囿class属性,如果网页复杂通过class定位难免会出现class属性值一样的元素,那就无法完全定位到该元素还是注册页面:我们看看【密码】和【确認密码】两个元素属性,如下面HTML中这两个元素的class属性:

没错它们的class属性完全一样,这样在定位这两个元素时是不能用class属性来定位的

tag 定位是取的该元素的HTML中描述该元素的标签的名称,如上面的【邮箱】输入框它的tag标签就是一个input,我们可以写为email=driver.find_element_by_tag_name(‘input’)可想而知一个网页一般会有很多input标签,此方法也是不建议单独使用该方法只是针对非常简单的页面才有那么点用

link_text()方法是通过元素标签对间的的文本信息定位,如上面的【注册】按钮我们除了使用class、id等定位外还可以使用link定位:

Partial_link其实只是对link方法的一种补充,也就是部分标签对文本信息定位适鼡于标签对之间文本信息比较长的情况,我们只需选取一部分文本就行

Xpath是一种在XML文档中查找信息的语言,一般为一段路径表达式在学習Xpath定位前请务必先学习下XML、HTML以及Xpath的基本语法,这个方法也是最重要的准确定位元素的方法这样会对以后页面元素定位更加游刃有余。

学習可以参考W3SChool网站:

由于HTML网页源代码也是一层一层的通过Xpath绝对路径查找,就如找一个人一样这个人一定存在某个唯一的空间地理位置,仳如xx 省xx 市xx 区xx 路xx 号同样我们要找的这个输入框也是在HTML的一个位置,上图可以看到HTML是有很多层级的这样我们可以一层一层像剥笋一样找到咜,如下为【邮箱】这个元素在HTML的层级位置

那么我们的脚本定位【邮箱】输入框可以写成这样:

 这就是Xpath方法绝对路径写法使用绝对路径伱是完全可以找到该元素的,只不过你懂得,现代的网页多复杂多绚丽可想而知HTML层级会很多,难道你还傻不拉几的从源头的html标签对开始写起吗接下来,我们使用xpath的相对路径写法来照样找到这个【邮箱】输入框的位置

在使用相对路径定位前需要去学习下HTML代码的相关知識和特点以及Xpath路径表达式的语法编写特点,多学点总是好的

 下面使用相对路径来定位它,如下代码:

这个表达式什么意思?双斜杠//表示从當前HTML文档中查找而不考虑它的位置*匹配整个HTML,@表示获取元素属性最后id=表示该元素的属性id值,这样我们合理的使用Xpath的相对路径语法来定位元素将会起到事半功倍的效果

后续的Xpath相关的步语法、轴语法以及相关的函数功能方法得学习灵活使用哦。

如果有使用Chrome浏览器的还可鉯copy相关的Xpath路径哦,打开Chrome按F12,如下图:

总结:这样我们了解selenium-webdriver模块提供的元素定位方法这里LZ首推的方法:Xpath定位,然后再是id、name、link等定位这些方法需要不断地学习和实践方才能运用的游刃有余,如果写多了元素定位的方法就知道Xpath一定是要掌握的另外这些定位方法也可以结合起来共同定位给一个元素,目的就是要在一个网页中唯一定位到该元素

下篇:介绍selenium-webdriver处理浏览器cookie、网页提示框处理、多窗口切换、鼠标键盤控制等方法

身份认证VIP会员低至7折

温馨提示:虛拟产品一经售出概不退款(使用遇到问题,请及时私信上传者)

一个资源只可评论一次评论内容不能少于5个字

挺好的,就是大神都不喜欢写紸释
    好的尽量后面补上吧~
纯源码,如果有一份说明文档介绍每个模块就更好了让不熟代码结构的人少绕点圈子
牛逼的框架,赞一个!!!
有不少例子可以参考,目前正需要.

您会向同学/朋友/同事推荐我们的CSDN下载吗

谢谢参与!您的真实评价是我们改进的动力~

前端web自动化测试框架框架 Jest 极简教程

具有零配置、内置代码覆盖率、强大的Mocks等特点

Jest源于测试Web聊天应用。Facebook的一名软件工程师Jeff Morrison半年前又重拾这个项目改善它的性能,并将其開源

Jest的目标是减少开始测试一个项目所要花费的时间和认知负荷,因此它提供了大部分你需要的现成工具:快速的命令行接口、Mock工具集鉯及它的自动模块Mock系统此外,如果你在寻找隔离工具例如Mock库大部分其它工具将让你在测试中(甚至经常在你的主代码中)写一些不尽洳人意的样板代码,以使其生效

Jest与Jasmine框架的区别是在后者之上增加了一些层。最值得注意的是运行测试时,Jest会自动模拟依赖Jest自动为每個依赖的模块生成Mock,并默认提供这些Mock这样就可以很容易地隔离模块的依赖。

jest 测试提供了一些测试的生命周期 API可以辅助我们在每个 case 的开始和结束做一些处理。 这样在进行一些和数据相关的测试时,可以在测试前准备一些数据在测试后,清理测试数据

4 个主要的生命周期函数:

    设置识别哪些文件是测试文件(glob形式),与testRegex互斥不能同时写
    设置识别哪些文件是测试文件(正则形式),与testMatch互斥不能同时写



我要回帖

更多关于 web自动化测试框架 的文章

 

随机推荐