理解浏览器兼容性自动化测试过程

概述

浏览器兼容性是目前前端项目迭代中常常遇到的问题.

每次迭代, 回归测试需要消耗大量人力进行手动操作, 去覆盖不同浏览器下不同业务场景的前端展示情况.

本文的目的即探讨解决这类问题的一个方案: 利用分布式的UI自动化测试框架Selenium Grid解决跨浏览器的兼容性问题.

技术方案

  • Python + Selenium3, 用于驱动不同的浏览器执行验证操作
  • Selenium Grid, 用于实现分布式执行用例
  • VMware, 安装不同种类浏览器, 作为执行节点

Selenium原理

通过Selenium控制浏览器模拟人工操作的过程如下:

Selenium原理.png

WebDriver充当一个HTTP Server的角色, 它接收Selenium客户端发来的请求, 同时根据不同的请求内容对浏览器进行不同的操作.

Selenium封装了WebDriver所能接收的各类请求路由(URL)和内容(Body),Python代码在调用Selenium库时其实是在操作Selenium库发送这些HTTP请求。

在代码执行之初,我们需要初始化一个webdriver对象,初始化的过程中,实际上是Selenium库启动了一个子进程,将WebDriver程序运行在后台中,监听接下来Selenium客户端发来的请求。

Selenium客户端,WebDriver与浏览器之间通过初始化浏览器时生成的SessionID进行浏览器对象绑定,使得Python代码能够准确的控制某一浏览器窗口。

Selenium Grid原理

Selenium Grid 允许我们在不同机器/浏览器上, 同时执行测试用例.

一个Selenium Grid结构中包括一个主节点(hub)和多个从节点(node). 主从节点都是通过运行selenium-server-standalone.jar启动.

Selenium 客户端(如本项目)运行在hub上, 通过Selenium Grid将操作浏览器的指令分发到各个node中, 即实现了分布式执行测试用例.

主从结构的优势在于, 无需在所有从节点上配置执行环境(如Python和Selenium库), 即可直接执行主节点发来的执行指令.

Selenium-grid架构图.png

技术实现

自动化测试代码

我们可以使用各种语言编写Selenium客户端执行程序,因为从Selenium原理上可知,WebDriver本身是一个HTTP Server,只要程序语言支持发送HTTP请求都能实现自动化测试的过程。本文将使用Python编码。

自动化执行过程

引用Selenium库

Selenium的Python库已由官方实现,直接安装然后调用即可。

安装:

pip install selenium==3.141.0

引入:

from selenium import webdriver
初始化webdriver

以Chrome浏览器为例:

driver = webdriver.Chrome()

我们可以打开Chrome()这个类查看__init__方法,可以看到主要过程就是设置capabilities参数用来指定需要操作的对象是Chrome,然后在后台启动了一个子进程(selenium/webdriver/common/service.pyService类的start方法),这个过程与在终端中启动chromedriver的效果类似,都是启动了一个HTTP server,用于接收接下来的Selenium客户端的请求。

打开浏览器

从这步开始,代码其实是在不断的给WebDriver这个server发送HTTP请求了。

driver.get(url)

执行成功,将会打开一个浏览器页面。

查找元素

查找元素的方法有很多,这里以CSS为例,查找一个按钮的元素ID:

element = driver.find_element_by_css_selector(submit_btn)

查找到元素后,WebDriver会返回元素的ID等信息,Selenium客户端会创建一个WebElement对象存储这个元素信息。

执行点击操作

WebElement类中包含封装好的click,submit等多种操作,许多操作过程实际是以JavaScript代码执行。

有了这些封装好的方法,执行点击某元素的操作就很简单了:

element.click()

测试结果判断

有了自动化执行的过程,作为自动化测试,少不了测试的过程。

测试框架

测试框架可以使用Python自带的unittest即可,在setUp方法中初始化浏览器对象,在每个测试用例中使用封装好的断言方法对操作的响应进行比较并返回结果。

更多可能性

在机器学习应用日趋广泛的情况下,提取预期结果的特征,训练出符合自己业务的机器学习模型,将每次执行操作的结果截图作为模型输入,可能能够解决UI自动化测试需要主观判断测试结果的难题。

Selenium Grid分布式执行用例

环境准备

对于hub, 需要安装:

  • JDK8环境, 用于提供selenium-server-standalone.jar包的运行环境
  • selenium-server-standalone.jar, 用于建立与node的连接
  • Python3环境, 用于执行UI测试代码

对于node, 需要安装:

  • JDK8环境, 用于提供selenium-server-standalone.jar包的运行环境
  • selenium-server-standalone.jar, 用于建立与hub的连接
  • WebDriver, 用于控制浏览器执行操作指令
主节点
  1. 以hub角色启动Selenium-server:
java -jar selenium-server-standalone-3.141.59.jar -role hub

待node节点连接成功后, 在hub节点上执行本项目代码, 即可看到node节点上的浏览器启动并执行相应操作.

从节点
  1. 以node角色启动Selenium-server:
java -jar selenium-server-standalone-3.141.59.jar -role node 
  -hub http://<IP>:4444/grid/register \
  -browser "browswerName=<BrowserName>,\
    version=<Version>,\
    platform=<PLATFORM>"

参数说明:

  • <IP>: hub节点的IP, 注意hub节点与node节点需要互通, 若是虚拟机, 需要将网络配置为桥接(Bridge)模式
  • <BrowserName>: 浏览器名, 如: internet explorer, chrome, firefox等
  • <Version>: 浏览器版本号: 以IE9为例, version=9
  • <PLATFORM>: 系统类型, 如: WINDOWS, LINUX等

在连接成功后可以看到控制台中的一段信息:

Capabilities are: {
    "browswerName": "internet explorer",
    "platform": "WINDOWS",
    "version":""
}

这段浏览器配置信息是用于Selenium客户端连接所用:

browser = webdriver.Remote(
    command_executor = 'http://localhost:4444/wd/hub',
    desired_capabilities={
        "browswerName": "internet explorer",
        "platform": "WINDOWS",
        "version":""
    }
)

执行过程

修改WebDriver入口

由于所有的浏览器入口都统一成Hub节点的server,因此需要将WebDriver初始化入口代码修改。以IE为例:

driver = webdriver.Remote(
    command_executor = 'http://localhost:4444/wd/hub',
    desired_capabilities=DesiredCapabilities.INTERNETEXPLORER
)
运行

除了WebDriver入口的修改,其他代码可以基本保持不动。
和单机的Selenium环境一样,在Hub节点上直接运行测试代码即可,运行后,Node中可用的某个IE浏览器将被启动并执行接下来的操作。

参考文档

  1. Wire Protocol, Selenium, Github Wiki
  2. Selenium Grid, Selenium, Github Wiki
  3. Selenium with Python, Selenium, Readthedocs
  4. InternetExplorerDriver, Selenium, Github Wiki

实现代码

  1. https://github.com/ityoung/parallel-selenium
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容