目录
界面测试(简称UI测试),测试用户界面的功能模块的布局是否合理、整体风格是否一致、各个控件的放置位置是否符合客户使用习惯,此外还要测试界面操作便捷性、导航简单易懂性,页面元素的可用性,界面中文字是否正确,命名是否统一,页面是否美观,文字、图片组合是否完美等。
下面将以 “牛客竞赛OJ” 为例进行自动化测试之网站界面测试。首先需要了解我们需要测试的页面,分析页面的元素,知道如何将页面元素定位,并了解元素的作用,然后设计测试用例,编写测试脚本,最终执行测试。
一、环境配置
1.准备安装包
首先界面测试使用的Robot framework框架,以及它的UI工具ride,Robot framework是基于Python的,所以先安装Python,需要事先准备好以下安装包(注意,python只能下载3.7版本的,其他版本不太稳定、不太兼容,其他的可能有些旧了,是模板里面的,自己真正的版本没有注意)。
表5-1安装包
版本号 |
约束版本 |
安装包 |
Python |
3.7._ |
python-3.7._.msi |
Robot Framework |
3.0.2 |
robotframework-2.8.1 .tar.gz |
selenium2library |
1.8.0 |
robotframework-selenium2library-master .zip |
pywin32 |
217 |
pywin32-217.win32-py2.7.exe |
selenium |
2.9.0 |
selenium-2.9.0 .tar.gz |
依次安装以上安装包,然后配置环境,最终即可使用ride。
由于Robot framework默认支持的是火狐浏览器,所以还需要安装浏览器驱动,实现对高版本的浏览器测试支持,下载完驱动之后,将文件放入Python安装目录以下即可。
表5-2浏览器驱动
浏览器 |
驱动名称 |
下载地址 |
谷歌浏览器 |
chromdriver.exe |
http://chromedriver.storage.googleapis.com/index.html |
IE浏览器 |
IEDriverServer.exe |
http://selenium-release.storage.googleapis.com/index.html |
火狐浏览器 |
geckodriver.exe |
https://github.com/mozilla/geckodriver/releases/ |
2. 编写脚本
(1)创建工程
在file下选择New Project,然后再在框中的Type选择Directory,Format选择ROBOT
图5-3创建工程
(2)创建测试套件
在新建的工程内创建测试套件,右击,点击New Suite
图5-4创建测试套件
(3)创建Test Case
在测试套件上右键创建New Test Case,输入用例名称,点击OK 即创建用例成功,用例时我们测试时最基本的内容,所有的脚本内容均写在用例内
图5-5创建测试用例
(4)添加测试库
在正式开始编写脚本之前,还需要添加测试库,因为Robot framework是基于关键字驱动的,所以需要添加我们所需要的使用的库,从而才能使用关键字。除了第三方库,测试人员自己也可以将自己所需要的脚本封装成关键字,供后续使用。在接口测试中,使用的库如下图5-6所示。
图5-6测试库
二、测试用例
通过对网站进行分析,分析网站的功能,选取了登录页、题库页、课程页、讨论区页进行网站界面测试,并编写了以下六个测试用例。如表5-7。
表5-7测试用例
编号 |
描述 |
测试用例1 |
用户打开登录页,输入正确的账号、密码,点击登录,查看页面是否正常跳转 |
测试用例2 |
用户打开登录页,输入正确的账号,错误的密码,点击登录,查看页面是否跳转 |
测试用例3 |
用户打开登录页,输入错误的账号,正确的密码,点击登录,查看页面是否跳转 |
测试用例4 |
用户进入牛客竞赛OJ网站首页,点击题库,查看页面是否跳转至题库页 |
测试用例5 |
用户进入牛客竞赛OJ网站首页,点击课程,查看页面是否跳转至课程页 |
测试用例6 |
用户进入牛客竞赛OJ网站首页,点击讨论区,查看页面是否跳转至讨论区 |
三、测试脚本
界面测试主要进行了五个页面的测试,分别为登录页、题库页、课程页、讨论区页,主要通过这些页面的测试,了解网站的功能是否完善,页面的操作是否符合用户正常使用习惯。
图5-8测试脚本
下面以登录页为例,进行简要的分析,登录页脚本如图5-9所示:
图5-9登录页脚本
(1)关键字open browser,打开浏览器。这里使用的是chrome浏览器,所以在第一行最后输入chrome,然后再在浏览器地址栏,输入牛客竞赛OJ的官方网址,表示打开的网址是这个,如图5-9第一行。
(2)关键字sleep,让网页等待一秒钟,直到响应完成,如图5-9第二行。
(3)关键字click element,点击登录按钮,登录按钮的Xpath路径为Xpath=/html/body/div[1]/div[1]/div/div/a[1],如图5-9第三行。
(4)关键字sleep,让网页等待一秒钟,直到响应完成,如图5-9第四行。
(5)关键字Input Text,输入文字,在浏览器内打开网站,然后再控制台内找到用户名文本框的位置,得到文本框的Xpath路径为Xpath=/html/body/div/div[2]/div/div[2]/div[2]/form/div[1]/div/div/input,并在文本框内输入用户名,如图5-9第五行。
(6)关键字sleep,让网页等待一秒钟,直到响应完成,如图5-9第六行。
(7)关键字Input Password,输入文字,在浏览器内打开网站,然后再控制台内找到密码文本框的位置,得到文本框的Xpath路径为Xpath=/html/body/div/div[2]/div/div[2]/div[2]/form/div[2]/div/div/input,并在文本框内输入密码,如图5-9第七行。
(8)关键字close all browsers,关闭所有的浏览器,在上面的步骤全部通过的情况下,打开的浏览器便会被关闭。相反,如果用例不通过,浏览器不会被关闭,如图5-9第八行。
四、测试项目分析
下面通过4个页面对网站进行界面测试分析,主要为以下几个页面:
1.界面测试Ⅰ
界面测试Ⅰ为登录页面。登录页在编写脚本的时候,要注意定位准确元素的位置,利用元素的full xpath路径,由于网站的特性,这里直接使用的是click button关键字。
如图5-10为登录页测试报告,从测试报告中可以看出,测试用例执行成功。
图5-10 登录页测试报告
2.界面测试Ⅱ:
界面测试Ⅱ为题库页。题库的脚本编写的时候,因为题库是在浏览器内打开了一个新的页面,并不是在原来的页面上,需要注意最后确定元素定为的时候,要找准页面,不能再远页面上进行定位。
如图5-11为题库页的测试报告,用例通过。
图5-11题库页测试报告
3.界面测试Ⅲ:
界面测试Ⅲ为竞赛课程页。如图5-12为竞赛课程页的测试报告,用例通过。
图5-12竞赛课程页测试报告
4.界面测试Ⅳ:
界面测试Ⅳ竞赛讨论区页。如图5-13为竞赛讨论区页的测试报告,如图可见测试样例通过。
图5-13竞赛讨论区页
界面测试总共测试了4个大页面,每个页面的功能基本正常,页面里面的跳转也都正确,基本符合用户的体验,没有什么错误。利用Robot framework做完牛客竞赛OJ网站的接口自动化和页面自动化。