web前端自动化测试（基于QT4W框架）

web前端自动化测试（基于QT4W框架）

导语 现在基于前端的自动化测试有很多思路和方案，比较常用的有Selenium +python+lxml等。本篇文章主要是基于QTA自动化平台的QT4W框架，实现包括对跳转页面404/500和jserror等异常报错的捕获，可以作为系统测试阶段的一种回归测试，或者作为一种每天定时跑的监控脚本，可以节省在这一部分的重复人力。

一、背景

1.1前端测试种类

前端测试主要分为两大类：单元测试和集成测试（e2e测试）。
所谓单元测试，就是测试一个函数或某个代码片段，通过模拟输入确保输出符合预期。包括mocha，jasmine，jest这类的测试框架，单元测试的意义在于比较细粒度的去测试我们业务代码中写的function，测试function里提供的method是否可靠。
集成测试，测的是一个功能模块，比如用户注册功能，集成测试又包括UI测试，UI测试用于确保页面正常渲染。
e2e测试就是端对端测试，简而言之，就是利用一些工具库提供的API使用代码来模拟终端用户在UI界面上的操作，比如输入，点击等等。目前常用的工具有，selenium， puppeteer，phantom，protractor（angular）， Nightwatch（Vue）等等。
经常听到后端的开发同学说“单元测试”，但是前端的单元测试相对来说就少很多。主要有下面两个方面的原因：
1、前端属于GUI软件，浏览器众多，兼容问题让人头大，用户量有一定规模的浏览器包括：IE8、IE9、IE10、IE11、chrome、FireFox、360浏览器、搜狗浏览器、QQ浏览器……要在这么多浏览器上做几轮测试并不容易。
2、前端界面变化快，很多时候界面比测试脚本迭代的更快，测试跟不上脚步，投入产出不成正比。。
正如前端开发者很少做单元测试一样，测试工程师做UI自动化测试建设也少很多。但前端自动化的测试还是很有必要的，对主流程页面做冒烟测试，可以作为该模块发布前的一种check手段，毕竟一个页面的元素还是有很多。每次发布前单纯靠人工测试还是需要投入部分时间。

二、技术方案

QT4W (Quick Test for Web) 是QTA自动化体系内实现支持Web自动化测试能力的支持库，是QTA的Android、iOS、Windows和Mac自动化测试中实现Web自动化测试能力的基础。
原生控件和Web控件的关系如下图所示，我们可以理解为，所有的网页（Web Page）都是在原生控件提供的一个Web View的基础上实现的。

三、核心代码

3.1控件封装

Web控件是Web页面的基础,QT4W在WebElement类中封装常见的控件操作，一般情况下，我们可以使用Webelement来表示绝大部分的Web控件。对于一些比较特殊的控件，可以在WebElement的基础上在进行封装。QT4W还提供了FrameElement、inputElement以及SelectElement的实现。FrameElement对应Frame控件；InputElement用于输入控件，selectElement用于选择类型的控件。

#元素控件的封装
ui_map = {'url_404':{'type': WebElement,'locator': XPath('//link[@href="https://ke.qq.com/404.html"]')},
          'url_502': {'type': WebElement, 'locator': XPath('//div[@class="error-code" and @jscontent="errorCode"]')},
        'header-index-logo':{'type': WebElement,'locator': XPath('//a[@class="header-index-logo"]')},
        '分类': {'type': WebElement, 'locator': XPath('//a[@href="//ke.qq.com/course/list"]')},
          }

封装一个Web控件首先需要定义一个控件名，此控件名会作为控件的唯一标志，后续使用到该控件时会通过该控件名来调用该控件。在封装控件时，一般会传入两个参数type和locator,type用来指示控件的类型，locator用于传递控件的Xpath，此处的Xpath采用标准的xpath写法，具体xpath标准参考xpath标准。

3.2操作控件方法实现

一般情况下控件都是在WebPage页面类进行封装，如果想操作该控件可以使用control方法来获取控件对象，示例如下：

'''
控件的具体方法封装实现
'''
#点击logo
def click_header_index_logo(self):
    self.control('header-index-logo').click()    # control方法来实现点击控件
    time.sleep(1)
    self.exec_script('location.href = "https://ke.qq.com/course/185189"')    # 在页面执行JavaScript代码

3.3测试用例case

测试用例实现起来很简单，首先导入测试相关的库，Browser是浏览器的基类库，主要提供和浏览器相关的接口（包括获取浏览器、注册浏览器、通过url打开页面、在当前打开页面中查找指定url等）。
OnlineEducationTestCase库是在Browser基础上把比较常用的浏览器操作封装成测试用例（比如注册不同浏览器对象，浏览器清除操作等）
Course_Detail_Page是前面两步的封装库，通过该库能获取到指定页面下面封装好的控件的路径和具体的操作方法。

from qt4w.browser.browser import Browser                       # 浏览器基类
from onlineedulib.testcase import OnlineEducationTestCase      # 测试用例模本库
from onlineedulib.course_detail_page import Course_Detail_Page # 测试页面封装库

class EDU_Course_Detail_Test(OnlineEducationTestCase):
'''课程详情页测试用例
   '''
   owner = "xxx"
   timeout = 5
   priority = OnlineEducationTestCase.EnumPriority.High
   status = OnlineEducationTestCase.EnumStatus.Ready

def run_test(self):
self.startStep('1.设置信息并提交')
       browser = Browser("Chrome")
       url = 'https://ke.qq.com/course/185189'
       page = browser.open_url(url, Course_Detail_Page)
       page.click_header_index_logo()  # 点击腾讯课堂logo

3.4断言方法

前端自动化的目的是为了判断控件的跳转是否正常，是否会出现一些jserror的报错。
因为ke.qq.com域名下面的页面出现404访问异常的时候，都会统一重定向到https://ke.qq.com/404.html页面，所以最简单的方法就是判断跳转的页面url是否为https://ke.qq.com/404.html，如果是就抛出异常，如果否就执行通过。
当然，还有另外一种方法，通过获取页面控件的方式来实现错误的捕获。404页面和502页面都是有明显区分于其他页面的唯一元素，只需要判断该控件是否exist，如果存在就抛出异常，如果不存在就执行通过。

#断言是否为404、502页面
def find_url_404(self):
   if self.exec_script('location.href === "https://ke.qq.com/404.html"') == 'true':     # 判断是否存在元素
       raise RuntimeError('This is 404 page!!!')                      # 抛出异常
   else:
print "no 404 page, it's ok"

   if self.control('url_502').exist == 'true':
raise RuntimeError('This is 502 page!!!')
else:
print "no 502 page, it's ok"

一种简单判断是否有js error的方法，使用window自带的onerror判断控制台是否有报错。

if self.exec_script('window.onerror') == 'false':           # 判断是否有js error
   raise RuntimeError('This is 502 page!!!')
else:
print "no js error page, it's ok"

未完待续！！！
未完待续！！！
未完待续！！！