1、WEB页面自主探索测试2023 深圳站赵志远4年开发/测试经验，专注于自主搜索遍历测试。负责控件图像识别、智能交互、结果判定的算法实现以及迭代升级，实现低成本检测WEB页面、搜索功能异常。华为云运营平台测试开发专家2023 深圳站目录CONTENTS页面自动化测试的痛点和挑战01 页面/控件探索测试方案02 场景识别的智能化自主测试方案03 自主探索测试应用效果展示04 2023 深圳站01议题背景2023 深圳站页面规模大页面交互复杂A控制台 100+B控制台 300+华为云官网 1w+页面控件100+交互组合上万控制台4XX异常控制台5XX异常控制台js报错页面白屏查询异常传统页面自动化难

2、以胜任痛点：重复性高，工作量大，易造成漏测。基本质量需要看护痛点：易触发，难看护全。挑战：系统前端页面多，变化快，页面基本质量如js报错、接口异常、查询异常频发，缺乏高效看护手段目标：构建低成本、广覆盖的UI质量看护能力，现实对页面基本质量的低成本看护1.背景2023 深圳站02探索测试2023 深圳站2.探索测试方案：面向路径模型的脚本实现Testpublic void testCase001()moveToElement(findElement(客户);click(findElement(客户报备);click(findElement(新建报备);checkError();Testpubl

3、ic void testCase002()moveToElement(findElement(客户);click(findElement(客户报备);click(findElement(导出);checkError();NVSTestpublic void testCase001()new MouseMoveAndClickChain(/firstMenuAll,/secondMenuAll).addChain(new MouseClickChain(/button).addChain(new ErrorCheckChain().runTest();传统测试脚本面向路径模型测试脚本脚本写作低成

4、本，按照固定语言格式描述出探索路径模型，探索框架可自动取出每一条路径进行探索，实现一个系统一套脚本看护。系统核心代码行页面数量交互控件数量A控制台90+130+2600+B控制台90+360+3000+华为云官网100+1200+10000+12脚本维护低成本，页面新增菜单或者新增页面控件，都属于路径模型的一次新的实例化，脚本无需做任何修改，探索框架可自动完成新增元素的探索。新增菜单自适应新增按钮自适应2023 深圳站Selenium2.探索测试方案：路径模型的承载探索链测试脚本MouseClickChain(鼠标单击)InputChain（键盘输入）MouseMoveAndClickChai

5、n（鼠标移动&点击）MouseClickConditionTwiceChain（鼠标点击&条件再次点击）MultiActionChain(组合多个探索动作)DynamicLoadChain(动态探索链)AISearchChain(自主查询)IframeSwitchChain(Ifram切换)SequenceClickChain(顺序点击)RefreshPageChain(页面刷新)Testpublic void testCase001()/打开所有顶部菜单 MouseMoveAndClickChain menu=new MouseMoveAndClickChain(/firstMenuAll,

6、/secondMenuAll);/打开所有页面顶部页签 MouseClickChain tab=new MouseClickChain(/tab);/点击所有页面按钮 MouseClickChain button=new MouseClickChain(/button);/页面所有输入框随机输入值 InputChain input=new InputChain(/input);/页面探索包含按钮和输入框的探索 MultiActionChain pageDiscover=new MultiActionChain(new DiscoveryChainbutton,input );/检测到弹窗时点击

7、关闭 DynamicLoadChain alert=new DynamicLoadChain(/spanid=closeBtn,new DiscoveryChain new MouseClickChain(/spanid=closeBtn);/按照规定路径模型探索每一条路径 menu.addChain(tab).addChain(pageDiscover).addDynamicChain(alert).runTest(this);2023 深圳站2.遍历测试方案：路径模型解读Testpublic void testCase001()/打开所有顶部菜单 MouseMoveAndClickChai

8、n menu=new MouseMoveAndClickChain(/firstMenuAll,/secondMenuAll);/打开所有页面顶部页签 MouseClickChain tab=new MouseClickChain(/tab);/点击所有页面按钮 MouseClickChain button=new MouseClickChain(/button);/页面所有输入框随机输入值 InputChain input=new InputChain(/input);/页面探索包含按钮和输入框的探索 MultiActionChain pageDiscover=new MultiAction

9、Chain(new DiscoveryChainbutton,input );/检测到弹窗时点击关闭 DynamicLoadChain alert=new DynamicLoadChain(/spanid=closeBtn,new DiscoveryChain new MouseClickChain(/spanid=closeBtn);/按照规定路径模型探索每一条路径 menu.addChain(tab).addChain(pageDiscover).addDynamicChain(alert).runTest(this);123D2023 深圳站2.探索测试方案：广覆盖与时效性设计p 探索留

10、痕设计，页面已探索控件打上标记由测试人员定期分析页面控件遗漏，及时对脚本进行补充p 并发探索设计，基本脚本可派生出子脚本对系统菜单并发探索以提高异常检测时效性ASystemDiscoveryDiscovery_客户Discovery_订单Discovery_财务Discovery_促销2023 深圳站112.探索测试方案：页面及控件可用性检测检测浏览器日志异常基本思路：监控运行浏览器日志，捕获接口4XX、5XX、JS异常检测页面白屏基本思路：使用图形学算法，计算页面空白占比超过阈值时，自动判定为白屏异常原始图像处理后图像接口500Js抛异常2023 深圳站03自主测试2023 深圳站3.自主测

11、试方案：基于AI图像识别实现页面查询功能的自动测试查询控件识别查询触发器结果列识别312查询触发器识别：定位可以触发查询的事件关键技术：图像识别（AI）、图形学算法分割图像实现思路：1)：提取CRM、BM的页面控件图片，训练模型。实现控件分类2)：检索分类为“按钮”的控件，查找“搜索按钮”;或者检索分类为“logo”为放大镜的控件查询控件识别：定位查询控件、控件分类、搜索语义提取、结果列匹配关键技术：图像识别（AI）、分词实现思路：1)：控件分类2)：检索分类为“输入框”，“输入搜索框”，“日期”，“下拉框”等控件，并根据位置信息提取搜索语义（提取前置“文本“）结果列识别：同一行识别为一条记录

12、，对应列识别为记录中的某个字段关键技术：DOM元素提取1)：提取dom属性为“table”控件的每一行，每一列值，映射为二维数组方便结果提取及比对4条件查询以及结果检查：带入结果列中的某一条记录搜索，并对结果进行检查关键技术：提取DOM的元素交互1)：将步骤2提取控件相匹配的步骤3中某一记录带入该控件，点击步骤1中的查询触发器进行查询操作2)；带有“模糊”搜索提示的，使用“包含”检查结果；使用“精确”搜索的，使用“等于”检查结果；时间控件采用“在范围之内”检查结果条件查询以及结果检查说明：查询功能自动测试已封装为AISearchChain，拆入路径模型中即可完成系统级自主测试2023 深圳站1

13、43.自主测试方案：场景识别分割&去重打标控件提取页面爬虫AI场景识别微服务输入输出训练&模型部署p 使用残差神经网络模型，进行图片分类，辅助场景识别2023 深圳站153.自主测试方案：控件建模输入重置输入框下拉框下拉重置日期选择条件输入框条件选择输入重置边界识别选项提取目标选择选择范围输入关联组合控件下拉重置年月导航导航识别当前年月判断边界识别日期输入选项提取目标选择数值范围输入框日期范围输入框数值起止值确定输入重置日期起止值确定年月导航日期选择重置2023 深圳站163.自主测试方案：控件建模案例日期提取顶层容器通过图像比对，提取日期控件顶层容器，获取顶层容器DOM路径关键技术：图形学算

14、法实现思路：1)：对比日期按钮点击前后页面，识别变化区域2)：通过位置信息获取顶层Element，进而获取DOM路径提取当前年月及导航控件通过XPATH提取当前年月控件，通过以图找图提取导航控件关键技术：图形学算法实现思路：1)：从顶层容器Xpath出发，找到包含年/月的控件2)：通过以图找图算法，找到导航控件提取日期通过XPATH提取日期实现思路：1)：从顶层容器Xpath出发，找到1,2,3日期选择控件统一交互实现思路：1)：将所有控件转换为xpath，方便后续交互操作重置年月导航日期输入实现思路：重置功能实现思路与日期输入一致，使用以图找图算法查找重置按钮并将控件转换为xpath日期模型

15、2023 深圳站173.自主测试方案：交互与结果判定结果判定结果提取目标判断2023 深圳站04应用效果2023 深圳站194.应用效果系统页面数量已发现问题遍历周期A控制台130+49每日B控制台360+64每日C控制台110+9每日华为云官网1200+31每日UI测试可覆盖系统每一个页面可做到每日例行看护，历史问题可由系统自动分析测试人员每日分析增量异常异常误报主要集中在查询异常，当前误报低于5%问题类型问题数量JS运行异常66接口异常（4XX,5XX）24查询功能问题32页面异常问题3接口请求资源失败导致页面加载异常Js报错导致页面展示价格异常查询返回值非预期页面白屏接口异常JS运行异常

16、查询功能问题页面异常问题感谢聆听CSDN全球最大的中文开发者社区平台CSDN全球最大的中文开发者社区平台CSDN创立于1999年全球编程类网站排名第7（来源：Similarweb 2023.04）注册用户超过4300万，覆盖90%的中文开发者新媒体矩阵粉丝数量超过3100万超过1000家企业客户和合作伙伴目前公司员工近800名，分布在北京、长沙、上海、深圳、杭州、成都等城市，并在美国硅谷常设办事处旗下品牌旗下品牌专业中文IT技术社区：CSDN.NET多媒体专业出版：新程序员开发者专属移动APP:CSDN APP代码托管协作平台：GitCode代码工具协同平台：InsCodeIT人力资源服务：科锐福克斯丨八爪网络高校IT技术学习成长平台：高校俱乐部