浩若烟海事半功倍|利用Docker容器技术构建自动化分布式web测试集群Selenium Grid

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
简介: “世界上有那么多城市,城市里有那么多的酒馆,可她,却偏偏走进了我的.....”,这是电影《卡萨布拉卡》中的一句著名独白,投射到现实生活中,与之类似的情况不胜枚举,这世界上有那么多的系统,系统中有那么多的浏览器,在只有一台测试机的前提下,难道我们只能排队一个一个地做兼容性测试吗?有没有效率更高的方法呢?为此我们提出一个更高效的解决方案:使用Docker+Selenium Grid。

“世界上有那么多城市,城市里有那么多的酒馆,可她,却偏偏走进了我的.....”,这是电影《卡萨布拉卡》中的一句著名独白,投射到现实生活中,与之类似的情况不胜枚举,这世界上有那么多的系统,系统中有那么多的浏览器,在只有一台测试机的前提下,难道我们只能排队一个一个地做兼容性测试吗?有没有效率更高的方法呢?为此我们提出一个更高效的解决方案:使用Docker+Selenium Grid。

Selenium Grid是一个分布式WebUI测试工具,可以将测试流程分发到多台服务器上,并行地执行。Selenium Grid架构中包含两个主要角色:Hub是中心点控制节点,而Node是Selenium的工作节点,它们注册到Hub上,并会操作浏览器执行由Hub下发的自动测试用例。

也就是利用一个调度中心,分别在不同机器上安装不同的操作系统,系统中再安装对应需要测试的浏览器,但是,以传统的方式部署分布式Selenium Grid集群有一定的技术难度。而且一个浏览器在操作系统上只能安装一个版本且只能有一个运行实例。比如为了针对不同版本的Chrome进行测试,需要将指定版本的Chrome浏览器安装到不同物理机或虚拟机上,这样要耗费大量时间和机器成本来准备测试环境。

怎么简化Selenium Grid集群安装过程中的复杂性呢?答案是Docker,是的,Docker,又见Docker,Docker可以在单台服务器上利用容器技术直接部署多个节点,过程简单方便,只需要编写Dockerfile脚本即可,大大提升了测试效率,本次我们就使用Docker+Selenium Grid来实现多系统多版本浏览器并发式兼容性测试。

首先,安装Docker,请移步:win10系统下把玩折腾DockerToolBox以及更换国内镜像源(各种神坑)

随后,拉取Selenium Grid调度中心的镜像文件:

docker pull selenium/hub

这里我们测试两款不同的浏览器兼容性:Chrome、FireFox

所以分别拉取镜像文件:

docker pull selenium/node-chrome  
docker pull selenium/node-firefox

全部三个镜像下载成功后,输入命令:

docker images

查看本地镜像:

liuyue:mytornado liuyue$ docker images  
REPOSITORY                           TAG                   IMAGE ID       CREATED         SIZE  
selenium/node-chrome                 latest                0843e55de3dc   2 weeks ago     1.04GB  
selenium/hub                         latest                705be32777f0   2 weeks ago     283MB  
selenium/node-firefox                latest                f794497d8393   2 months ago    956MB

检查没有问题后,我们来编写Docker-compose的配置文件,Docker-compose是最基本的容器编排工具,它可以快速统筹多个镜像的协同使用,编写docker-compose.yml:

version: "3"  
services:  
  
  hub:  
    image: selenium/hub  
    ports:  
      - "4444:4444"  
  
    environment:  
      GRID_MAX_SESSION: 16  
      GRID_BROWSER_TIMEOUT: 3000  
      GRID_TIMEOUT: 3000  
  
  chrome:  
    image: selenium/node-chrome  
    container_name: chrome  
    depends_on:  
      - hub  
    environment:  
      HUB_PORT_4444_TCP_ADDR: hub  
      HUB_PORT_4444_TCP_PORT: 4444  
      NODE_MAX_SESSION: 4  
      NODE_MAX_INSTANCES: 4  
    volumes:  
      - /dev/shm:/dev/shm  
    ports:  
      - "9001:5900"  
    links:  
      - hub  
  
  firefox:  
    image: selenium/node-firefox  
    container_name: firefox  
    depends_on:  
      - hub  
    environment:  
      HUB_PORT_4444_TCP_ADDR: hub  
      HUB_PORT_4444_TCP_PORT: 4444  
      NODE_MAX_SESSION: 2  
      NODE_MAX_INSTANCES: 2  
    volumes:  
      - /dev/shm:/dev/shm  
    ports:  
      - "9002:5900"  
    links:  
      - hub

配置文件的主要内容就是将Selenium Grid的容器服务hub部署在4444端口上,并且通过端口映射,让宿主机可以访问,使用镜像就是我们刚刚下载好的selenium/hub镜像,而火狐(firefox)和谷歌(chrome)这两款浏览器分别依赖于hub服务,NODE\_MAX\_INSTANCES定义了可以运行多少个浏览器实例。

此时,我们在docker-compose.yml所在的目录执行命令,来启动服务:

docker-compose -f docker-compose.yml up -d

-d 参数意味着在后台运行,当然了您也可以选择在前台运行。

随后访问浏览器 http://localhost:4444/grid/console ,这里请求的ip是宿主机本地的,但其实是通过端口映射访问docker容器内的Selenium Grid调度中心:

可以看到,两款浏览器的服务都已经正常启动,分别运行四个和两个实例,同时也可以在终端运行Docker命令来查看进程:

docker ps

返回容器列表:

liuyue:mytornado liuyue$ docker ps  
CONTAINER ID   IMAGE                   COMMAND                  CREATED      STATUS      PORTS                    NAMES  
adcd4683f39c   selenium/node-firefox   "/opt/bin/entry_poin…"   2 days ago   Up 2 days   0.0.0.0:9002->5900/tcp   firefox  
58dfe5825439   selenium/node-chrome    "/opt/bin/entry_poin…"   2 days ago   Up 2 days   0.0.0.0:9001->5900/tcp   chrome  
97d602944b34   selenium/hub            "/opt/bin/entry_poin…"   2 days ago   Up 2 days   0.0.0.0:4444->4444/tcp   mytornado_hub_1

浏览器准备好了,接下来的事情就简单了,让我们来用Docker容器实际测试一下,编写test.py:

import time  
from selenium import webdriver  
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities  
  
#指定运行主机与端口号  
driver = webdriver.Remote(command_executor='http://127.0.0.1:4444/wd/hub',  
                          desired_capabilities=DesiredCapabilities.CHROME)  
  
driver.get("https://v3u.cn")  
  
time.sleep(1)  
  
driver.get_screenshot_as_file("v3u.png")  
  
driver.quit()

这里使用chrome浏览器驱动使用远程模式(Remote),访问宿主机本地ip,端口4444,打开本站之后,截图查看是否有布局错误问题。

查看截图:

再来试试火狐浏览器(firefox):

import time  
from selenium import webdriver  
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities  
  
#指定运行主机与端口号  
driver = webdriver.Remote(command_executor='http://127.0.0.1:4444/wd/hub',  
                          desired_capabilities=DesiredCapabilities.FIREFOX)  
  
driver.get("https://v3u.cn")  
  
time.sleep(1)  
  
driver.get_screenshot_as_file("v3u_frefox.png")  
  
driver.quit()

查看firefox下的测试截图:

差别不大,但是可以通过实际测试看出细节的差异,比如字体和超链接颜色的不同,这些都是兼容性测试中的常备部分。

诚然,我们完全可以将代码写得更加规范一些,毕竟,这是在做兼容性测试,谁也不想在测试工作中出现任何的纰漏,这里使用Python内置的单元测试库unittest将之前的代码重构一下:

`import os  
import datetime  
import time  
import unittest  
from selenium import webdriver  
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities  
  
  
class Example(unittest.TestCase):  
  
  
    def setUp(self):  
  
        self.driver = webdriver.Remote(  
            command_executor='http://127.0.0.1:4444/wd/hub',  
            desired_capabilities=DesiredCapabilities.CHROME)` `self.driver.get("https://v3u.cn")  
  
    def test_firefox(self):  
  
        time.sleep(1)  
  
        self.driver.get_screenshot_as_file("v3u_chrome.png")  
  
  
    def tearDown(self):  
  
        self.driver.quit()  
  
  
if __name__ == "__main__":  
  
    unittest.main(verbosity=1)`

测试结果:

liuyue:pickupname liuyue$ python3 "/Users/liuyue/Downloads/ccpt_21_cvm/鼠标/pickupname/test.py"  
/Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/site-packages/selenium/webdriver/remote/remote_connection.py:374: ResourceWarning: unclosed <socket.socket fd=5, family=AddressFamily.AF_INET, type=SocketKind.SOCK_STREAM, proto=6, laddr=('127.0.0.1', 63563), raddr=('127.0.0.1', 4444)>  
  return self._request(command_info[0], url, body=data)  
ResourceWarning: Enable tracemalloc to get the object allocation traceback  
/Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/site-packages/selenium/webdriver/remote/remote_connection.py:374: ResourceWarning: unclosed <socket.socket fd=5, family=AddressFamily.AF_INET, type=SocketKind.SOCK_STREAM, proto=6, laddr=('127.0.0.1', 63566), raddr=('127.0.0.1', 4444)>  
  return self._request(command_info[0], url, body=data)  
ResourceWarning: Enable tracemalloc to get the object allocation traceback  
/Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/site-packages/selenium/webdriver/remote/remote_connection.py:374: ResourceWarning: unclosed <socket.socket fd=5, family=AddressFamily.AF_INET, type=SocketKind.SOCK_STREAM, proto=6, laddr=('127.0.0.1', 63573), raddr=('127.0.0.1', 4444)>  
  return self._request(command_info[0], url, body=data)  
ResourceWarning: Enable tracemalloc to get the object allocation traceback  
/Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/site-packages/selenium/webdriver/remote/remote_connection.py:374: ResourceWarning: unclosed <socket.socket fd=5, family=AddressFamily.AF_INET, type=SocketKind.SOCK_STREAM, proto=6, laddr=('127.0.0.1', 63574), raddr=('127.0.0.1', 4444)>  
  return self._request(command_info[0], url, body=data)  
ResourceWarning: Enable tracemalloc to get the object allocation traceback  
.  
----------------------------------------------------------------------  
Ran 1 test in 5.908s  
  
OK

测试完毕后,可以通过Docker-compose命令一键停止容器服务,非常方便:

docker-compose -f docker-compose.yml down

尤其是容器数量非常多的情况下,我们不需要手动一个一个来停止服务:

liuyue:mytornado liuyue$ docker-compose -f docker-compose.yml down  
Stopping firefox         ... done  
Stopping chrome          ... done  
Stopping mytornado_hub_1 ... done  
Removing firefox         ... done  
Removing chrome          ... done  
Removing mytornado_hub_1 ... done  
Removing network mytornado_default  
liuyue:mytornado liuyue$

再次查看服务进程:

liuyue:mytornado liuyue$ docker ps  
CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES  
liuyue:mytornado liuyue$

结语:本次,我们介绍了分布式自动化Web测试软件Selenium Grid的设置、服务的运行、以及停止,没有任何问题。通过使用这种自动化测试方法,我们可以节省大量时间,并以高效的方式获得最准确的测试结果。如果您现有测试机的配置更加优秀,还可以进一步探索,尽可能多的开启浏览器实例,以此做到海量并发兼容性测试。

相关文章
|
10天前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
|
11天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
13天前
|
前端开发 Java 测试技术
《手把手教你》系列技巧篇(十二)-java+ selenium自动化测试-元素定位大法之By link text(详细教程)
【4月更文挑战第4天】本文介绍了link text在自动化测试中的应用。Link text是指网页中链接的文字描述,点击可跳转至其他页面。文章列举了8种常用的定位方法,其中着重讲解了link text定位,并通过实例展示了如何使用Java代码实现点击百度首页的“奥运奖牌榜 最新排名”链接,进入相应页面。如果link text不准确,则无法定位到元素,这说明linkText是精准匹配,而非模糊匹配。文章还提到了partial link text作为link text的模糊匹配版本,将在后续内容中介绍。
35 4
|
11天前
|
XML 前端开发 Java
《手把手教你》系列技巧篇(十四)-java+ selenium自动化测试-元素定位大法之By xpath上卷(详细教程)
【4月更文挑战第6天】按宏哥计划,本文继续介绍WebDriver关于元素定位大法,这篇介绍定位倒数二个方法:By xpath。xpath 的定位方法, 非常强大。使用这种方法几乎可以定位到页面上的任意元素。xpath 是XML Path的简称, 由于HTML文档本身就是一个标准的XML页面,所以我们可以使用Xpath 的用法来定位页面元素。XPath 是XML 和Path的缩写,主要用于xml文档中选择文档中节点。基于XML树状文档结构,XPath语言可以用在整棵树中寻找指定的节点。
42 0
|
3天前
|
Java 测试技术 定位技术
《手把手教你》系列技巧篇(二十三)-java+ selenium自动化测试-webdriver处理浏览器多窗口切换下卷(详细教程)
【4月更文挑战第15天】本文介绍了如何使用Selenium进行浏览器窗口切换以操作不同页面元素。首先,获取浏览器窗口句柄有两种方法:获取所有窗口句柄的集合和获取当前窗口句柄。然后,通过`switchTo().window()`方法切换到目标窗口句柄。在项目实战部分,给出了一个示例,展示了在百度首页、新闻页面和地图页面之间切换并输入文字的操作。最后,文章还探讨了在某些情况下可能出现的问题,并提供了一个简单的本地HTML页面示例来演示窗口切换的正确操作。
24 0
|
4天前
|
运维 Kubernetes Devops
构建高效自动化运维体系:DevOps与容器技术融合实践
【4月更文挑战第15天】 在当今快速发展的信息技术时代,传统的IT运维模式已难以满足业务敏捷性的需求。本文旨在探讨如何通过整合DevOps理念和容器技术来构建一个高效的自动化运维体系。文章将详细阐述DevOps的核心原则、容器技术的基础知识,以及两者结合的优势。此外,文中还将分享一系列实践经验,包括持续集成/持续部署(CI/CD)流程的搭建、微服务架构的应用,以及监控和日志管理策略的优化,以期帮助企业实现快速、可靠且安全的软件交付过程。
|
5天前
|
数据库 开发者 Python
Python中使用Flask构建简单Web应用的例子
【4月更文挑战第15天】Flask是一个轻量级的Python Web框架,它允许开发者快速搭建Web应用,同时保持代码的简洁和清晰。下面,我们将通过一个简单的例子来展示如何在Python中使用Flask创建一个基本的Web应用。
|
6天前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十九)-java+ selenium自动化测试-元素定位大法之By css下卷(详细教程)
【4月更文挑战第11天】按计划今天宏哥继续讲解css的定位元素的方法。但是今天最后一种宏哥介绍给大家,了解就可以了,因为实际中很少用。
27 2
|
7天前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十八)-java+ selenium自动化测试-元素定位大法之By css中卷(详细教程)
【4月更文挑战第10天】本文主要介绍了CSS定位元素的几种方法,包括ID属性值定位、其他属性值定位和使用属性值的一部分定位。作者提供了示例代码,展示了如何使用这些方法在Java+Selenium自动化测试中定位网页元素。通过CSS选择器,可以更精确地找到页面上的特定元素,如输入框、按钮等,并进行相应的操作,如输入文本、点击等。文章还提供了实际运行代码后的控制台输出和浏览器动作的示例。
36 0
|
8天前
|
JavaScript 前端开发 API
Vue.js:构建高效且灵活的Web应用的利器
Vue.js:构建高效且灵活的Web应用的利器