2023年6月26日发(作者：)

ui⾃动化设计思路⼩伙伴让我周末做技术分享，想着这是⼀件有意义的事情，便答应了下来，那就给⼤家讲讲ui⾃动化吧。这⾥会结合具体的代码给⼤家讲ui⾃动化⼀些理念，⽅案设计。

本⽂将探讨ui⾃动化设计思路，主要围绕以下⽅⾯展开讲解，希望阅读前对ui⾃动化有个基本了解1、单例模式的运⽤2、ui⾃动化分层思想 2.1PageObject设计模式 2.2业务流程封装3、测试数据的准备 3.1 调⽤APi创建测试数据 3.2数据库操作创建测试数据 3.3数据驱动 3.4测试数据⾃动⽣成技术4、ui⾃动化测试报告 4.1 调⽤ screenshot 函数实现截图 4.2 保存服务器⽇志 4.3 结合testng监听器对失败⽤例实时截图5、ui⾃动化稳定性的关键技术 5.1 重试机制 5.2 异常场景恢复模式

5.3 元素模糊匹配6、ui⾃动化执⾏效率的提升7、⽆头浏览器的运⽤8、分布式Selenium Grid运⽤9、⿊科技 9.1 页⾯对象⾃动⽣成技术 9.2 测试数据⾃动⽣成技术

1、单例模式的运⽤在编写ui代码的时候，我们在很多地⽅都需要WebDriver对象，难道每次都new⼀个实例？这样会创建很多浏览器进程，我们只需要运⽤单例设计模式就可以解决这个问题，只有⼀个相同的WebDriver对象，需要时直接WebDriver driver =Driver("chrome"); package ;import medURLException;import ;import it;import rm;import ver;import dCapabilities;import WebDriver;public class SingletonWebDriver { private static final String URL = "127.0.0.1:14444/wd/hub"; private static final int DRIVER_WAIT_TIME = 20; private static WebDriver instance = null; private SingletonWebDriver() { } public static WebDriver getWebDriver(String browserName) { switch (browserName) { case "chrome": try { instance = new RemoteWebDriver(new URL(URL), getCapabilitity(browserName)); } catch (MalformedURLException e1) { tackTrace(); } break; case "firefox": try { instance = new RemoteWebDriver(new URL(URL), getCapabilitity(browserName)); } catch (MalformedURLException e1) { tackTrace(); } break; } ().timeouts().implicitlyWait(DRIVER_WAIT_TIME, S); // second为等待时间，单位秒 return instance; } public static DesiredCapabilities getCapabilitity(String browserName) { DesiredCapabilities capability = (); wserName(browserName); tform(); return capability; }}

2、ui⾃动化分层思想2.1 PageObject设计模式在实际编写脚本中，假如把控件操作和测试⽤例写在⼀起，是不是会觉得代码难以维护，可读性极差。假如某⼀个控件被很多⽤例使⽤，这个控件发⽣变化，我们需要修改所有引⽤这个控件的⽤例，这样效率及其低下。我们可以引⼊页⾯对象模型解决这种问题。页⾯对象模型的核⼼思想就是以页⾯为单位来封装页⾯的控件和部分操作，在测试⽤例的编写中，需要对某个页⾯进⾏操作的时候，直接ration();页⾯对象模型有如下优点1、⽤例与操作解耦，解决了代码可读性差，难以维护的问题。2、代码重⽤性⾼，当某个控件或操作步骤被多个⽤例引⽤时，我们只需要这个相同的控件。2.2 基于业务流程封装业务流程抽象是基于操作函数的更接近于实际业务的更⾼层次的抽象⽅式，有点拗⼝，举个例⼦就明⽩了。⼀个注册业务包含⽤户注册、实名认证、后台审核这三步，我们就可以把这三步作为独⽴的类进⾏封装，也很⽅便的被其它业务流程重⽤。类的内部通常是调⽤操作函数，操作函数内部是基于页⾯对象模型完成具体的页⾯操作。业务流程封装更接近实际业务，遵循参数准备，实例化对象，给对象赋值，执⾏操作这四步。

3、测试数据的准备3.1 调⽤APi创建测试数据测试数据直接由相关api⽣成，这种不会存在脏数据的问题，测试数据也⽐较稳定，缺点就是不是所有的测试数据都可以通过api⽣成，对于需要创建⼤量测试数据的场景来说，这种⽅式的效率也不是很理想。3.2数据库操作创建测试数据实际项⽬中，不是所有的数据都有相关api⽀持，因为有的数据直接在代码中⽣成和修改且不对外提供接⼝，那么这种情况下，就需要操作数据库来⽣成测试数据。我们可以把操作数据库的封装成⼀个⼯具类，直接传⼊sql语句即可。但是这个也有个明显的缺点，就是接⼝改了，或者数据库表结构改了，要是sql语句更新不及时，就会导致⽤例的数据问题。所以ui⾃动化最好的⽅式还是通过页⾯操作，其次api调⽤⽣成测试数据，最后通过数据库CRUD。3.3数据驱动数据驱动实现了测试脚本与数据解耦，就是把数据源存在csv、xls、yaml、数据库中，需要的时候去相应⽂件中获取。testng的Data Provider很好的实现数据驱动，我的另⼀篇博客有详细案例。3.4测试数据⾃动⽣成技术 详见9.2

4、ui⾃动化测试报告测试报告是ui⾃动化中很重要的⼀部分，当测试⽤例执⾏失败时，我们不需要⼿⼯复现失败场景，只需要去分析测试报告，查找失败的原因。对于测试报告需要包含浏览器界⾯截图跟服务器⽇志两部分。浏览器截图是为了知道⽤例是在什么界⾯什么操作出错了，服务器⽇志是为了⽅便定位代码问题。4.1 调⽤ screenshot 函数实现截图，封装了⼯具类如下注意，截图图⽚命名要规范，可以⽤url或者⽤例名称命名package ;import ;import ption;import ils;import Type;import creenshot;import ver;import ment;public class ScreenShotsUtil { private static final String FILE_PATH = "./Screenshots/"; public void ScreenShotByElement(WebElement webElement) { File src = eenshotAs(); try { le(src, new File(FILE_PATH + ng() + ".png")); } catch (IOException e) { tackTrace(); } } public void ScreenShotByDriver(WebDriver driver) { File src = ((TakesScreenshot) driver).getScreenshotAs(); try { le(src, new File(FILE_PATH + rentUrl() + ".png")); } catch (IOException e) { tackTrace(); } }}4.2 保存失败⽤例服务器⽇志package ;import tion;import edReader;import ption;import tream;import treamReader;import n;import Gobbler;public class RemoteServiceLogUtil { public static void main(String[] args) { RemoteServiceLogUtil r = new RemoteServiceLogUtil(); String a = e("10.100.35.146", 22, "root", "", "tail -99f /opt/local/mall/"); n("aa"+a); } public String processStdout(InputStream in) { InputStream input = new StreamGobbler(in); StringBuffer buffer = new StringBuffer(); BufferedReader br;

try { try { br = new BufferedReader(new InputStreamReader(input, "UTF-8")); String line = null; while ((line=ne()) .length()>0) { (line + "n");

} (); } catch (Exception e) { tackTrace(); }

return ng(); } public String execute(String host, int port, String userName, String passWord, String cmd) { Connection conn = new Connection(host); String result = null; Session session = null;

try { t(); boolean isconn = ticateWithPassword(userName, passWord);

if (!isconn) { n("服务器连接失败"); } session = ssion(); mmand(cmd);// 执⾏命令 result = processStdout(out()); (); (); } catch (IOException e) { tackTrace(); } return result; }}

4.3 结合testng监听器对失败⽤例实时截图

5、ui⾃动化稳定性关键技术做过ui⾃动化的同学，我相信你们都遇到过测试稳定性的问题，在相同的环境，时⽽执⾏成功，时⽽执⾏失败，这会浪费很多时间去排查问题，ui⾃动化产出⽐也不⾼，所以ui⾃动化的稳定性关乎整个产出收益。5.1 重试机制页⾯响应延迟导致元素定位失败，环境不稳定，这些异常情况都会导致⽤例执⾏失败，所以加⼊重试机制会很好的解决这⽅⾯的问题。重试可以是⽤例级别的，也可以是步骤或者业务流程级别的。下⾯结合testng对失败⽤例重试5.2 异常场景恢复模式在测试⽤例执⾏过程中，操作系统和被测系统可能会突然弹出对话框，因为你不知道在哪⼀步骤会弹出什么对话框，你就⽆法预先处理弹框，这样会导致元素定位失败，造成ui⾃动化不稳定。在⼿⼯测试过程中，你遇到弹框是不是直接关掉？对于ui⾃动化来说，处理⽅式也是⼀样，当出现元素⽆法定位时，就进⼊异常场景恢复模式，程序依次检查各种可能出现的对话框，⼀旦确认了对话框的类型，就直接关掉，接着重试刚刚失败的⽤例。5.3 元素模糊匹配页⾯元素发⽣细微的变化，也会导致元素定位失败，我们可以加⼊模糊匹配技术，提⾼控件的识别率。

6 、ui⾃动化执⾏效率的提升6.1 基于testng多线程执⾏6.2 Selenium Grid 分布式执⾏6.3 减少等待时间6.4 ⽆头浏览器的运⽤

7、⽆头浏览器的运⽤⽆头浏览器，即Headless Browers，是⼀种没有界⾯的浏览器，主要⽤于ui⾃动化，⽹络爬⾍，页⾯监控等⽅⾯。业界⽐较成熟的当属Google 的Chrome Headless和Phantomjs，不过Phantomjs已经停⽌维护，建议使⽤Chrome Headless。Headless Browers在ui⾃动化中有如下优点1、测试执⾏速度更快，少了css加载和页⾯渲染2、cpu/内存的开销较低3、在单机上运⾏多个⽆头浏览器，实现测试⽤例的并发执⾏⽆头浏览器的缺点是，不能完全模拟真实的⽤户⾏为，⽽且由于没有实际完成页⾯的渲染，所以不太适⽤于需要对于页⾯布局进⾏验证的场景。

8、分布式Selenium Grid运⽤selenium主要解决了测试重复执⾏和浏览器兼容性的问题。当⽤例达到⼀定数量的时候，单个浏览器执⾏全部⽤例需要数个⼩时，那多个浏览器呢？⾃动化测试的执⾏⼀般在产品发布之前⼏个⼩时，这样会严重影响产品的发布时间。当然最笨的办法是在多台主机部署多套浏览器环境，把测试⽤例分开执⾏即可，你会不会⼜觉得这样很⿇烦。Selenium Grid就解决了分布式执⾏测试的痛点。Selenium Grid跟Jmeter分布式压测⼀样，所谓的分布式就是由⼀个hub节点和若⼲个node代理节点组成。Hub⽤来管理各个代理节点的注册信息和状态信息，并且接受远程客户端代码的请求调⽤，然后把请求的命令转发给代理节点来执⾏。下⾯结合环境部署来理解Hub与node节点的关系，强烈建议使⽤docker构建环境。

下载hub镜像docker pull selenium/hub

下载chrome镜像docker pull selenium/node-chrome 启动hub镜像docker run -d -p 4444:4444 --name selenium-hub selenium/hub-d 容器后台运⾏，并返回容器id-p 4444:4444 端⼝映射，容器4444端⼝映射到宿主机端⼝4444，即通过本机端⼝访问容器--name selenium-hub 指定容器名称为selenium-hub访问，出现如下图表明启动成功

启动Chrome镜像，连接hub，注册到Selenium Grid集群中docker run -d --link selenium-hub:hub --name selenium-chrome selenium/node-chrome

启动chrome-headles浏览器，注册到Selenium Grid集群中去。docker run -d --link selenium-hub:hub alpeware/chrome-headless-trunk

启动firefox浏览器，注册到Selenium Grid集群中去。docker run -d --link selenium-hub:hub selenium/node-firefox如下图表明浏览器node已经注册到hub中

通过Selenium Grid访问，代码如下private static final String URL = "127.0.0.1:4444/wd/hub";DesiredCapabilities capability = ();wserName("chrome");tform();WebDriver driver = new RemoteWebDriver(new URL(URL), capability);9、⿊科技你们知道⼀套从天⽽降的掌法吗？ 9.1 页⾯对象⾃动⽣成技术 9.2 测试数据⾃动⽣成技术