曲鸟全栈UI自动化教学(一)：基于页面元素定位自动化的不足和图像识别匹配自动化的优势分析_图片定位元素和xpath定位元素的优缺点(2)

给大家的福利

零基础入门

对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。

同时每个成长路线对应的板块都有配套的视频提供：

因篇幅有限，仅展示部分资料

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以点击这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

---


这样就不会因为弹窗层级变化导致定位失败的原因了，还达到了元素地址复用性的目的（两个弹窗共用一个Xpath元素地址）。




---


但如果有子弹窗的情况下，上面的写法又会失效：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/03e314a1b33b48b0bd831606b4cfc36a.png)




---


分析上述DOM元素会发现，图片中的两个弹窗无法再通过`style`中是否存在`none`来区分了，因为他们都可见，并且分析发现只有`aria-labelledby`的值不一样：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/ffa1f3c0c40e4aed825128f28eac0090.png)




---


我们当然可以根据不同的属性,例如上述弹窗的标题不同来区分他们，但这样每个弹窗中的按钮就都需要写一次不同的元素地址。如果为了复用性考虑，我写了如下的代码来实现：

elements=driver.find_elements(
By.XPATH,‘//div[@class=“ant-modal-root”]/div[(@class=“ant-modal-wrap”) and not(contains(@style,’
‘“none”))]//button/span[text()=“确 定”]’)
for ele in elements:
if ele.is_displayed():
if ele.is_enabled():
try:
ele.click()
except ElementClickInterceptedException:
pass

---


先获取可见的【确定】按钮对象，然后遍历点击，如果点击报错的话就跳过 **（报错是因为有遮罩挡住就会报错，只有页面最前的元素会可点击，刚好达到我们的目的）**，达到了一个元素地址三个【弹窗】的复用。


但即便这样，同样存在着下面这些不足：


1. DOM结构如果很大，执行会变慢，性能损耗；
2. 为了复用性会有更多的代码逻辑判断，性能损耗；
3. 页面代码发生修改可能需要重新定位元素，修改脚本或用例；
4. 编写脚本或用例时，需要去分析DOM结构，调试代码，增加时间成本；
5. 有iframe和多页面时需要单独切换；
6. 有一定的学习成本；




---


这样分析下来，维护成本依然不低！那有没有解决方案呢？


**肯定是有的，不然我也不会写这篇文章了！**




---


## 二、解决方案


### 1. 讲解与演示


我们可以使用图像匹配来定位它，比如网易团队开源的`airtest`，类似于上述弹窗嵌套有多个【确定】按钮的情况，我们只需要截取一张【确定】按钮的图片，就能解决无数重复的确定按钮的定位了！哪怕页面代码进行了调整，只要你的按钮样式不变，还是原来的按钮的样子，也无须重新调整脚本和代码了！




---


**这是我通过图像匹配的执行效果:**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/4ef3dd3b051b42dfae0e8e58042288fd.gif)




---


**两个【确定】按钮完全共用的是一张图片**




---


### 2. 实践教学


**现在跟着我一起从0开始利用`airtest`写一个简单的图像识别测试脚本吧**


**需求**


编写一个程序，它会通过图像识别执行点击百度的【新闻】，然后点击【互联网】这两步操作




---


**具体步骤**


**1.先安装airtest**


`pip install airtest -i https://pypi.tuna.tsinghua.edu.cn/simple`




---


**2.创建一个项目，并输入如下代码：**

from airtest.core.api import *

news_path = ‘news.png’
internet_path = ‘internet.png’
connect_device(‘Windows:///’)
ST.CVSTRATEGY = [“surf”, “tpl”]
ST.FIND_TIMEOUT = 2
touch(Template(news_path))
touch(Template(internet_path))

---


**3.先打开百度截取【新闻】图片，再点击新闻，截取【互联网】图片：**


![在这里插入图片描述](https://img-blog.csdnimg.cn/7d122e66a7a6457ab83b0e69cf8acbc4.png)




---


**截取的图片如下，命令为`news.png`并保存到代码所在目录**


![在这里插入图片描述](https://img-blog.csdnimg.cn/12cbf3f0f1fb410c884953f92ca18be4.png)




---


![在这里插入图片描述](https://img-blog.csdnimg.cn/ba22754540b041c6bbd9688ac791afd5.png)




---


**截取的图片如下，命令为`internet.png`并保存到代码所在目录**


![在这里插入图片描述](https://img-blog.csdnimg.cn/295d2b28513641a3a71ae57e9b384360.png)




---


**4.检查目录文件命名是否与代码中一致**


![在这里插入图片描述](https://img-blog.csdnimg.cn/b2e8c9f0dcf64bdfbd13b376d53f8f8f.png)




---


**5.让浏览器保持百度访问**


![在这里插入图片描述](https://img-blog.csdnimg.cn/df53b96c69be40f1bd9e6cab79818d52.png)




---


**6.执行代码然后马上切换回浏览器，执行效果如下：**


![在这里插入图片描述](https://img-blog.csdnimg.cn/0ffdf8683e004bbab7cddbcc96d08411.gif)




---


**完全脱离了元素地址的方案进行自动化测试，并且无论上Web还是App，甚至PC应用都能够兼容！**




---


## 三、依然存在的问题


在使用中可能会发现，分辨率不同，截取的图片就用不了！如果被测机器的分辨率都不相同，那是不是就得需要多套图片呢？


**其实`airtest`针对此问题也有一些解决方案：**




## 学习路线：

这个方向初期比较容易入门一些，掌握一些基本技术，拿起各种现成的工具就可以开黑了。不过，要想从脚本小子变成黑客大神，这个方向越往后，需要学习和掌握的东西就会越来越多以下是网络渗透需要学习的内容：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/7a04c5d629f1415a9e35662316578e07.png#pic_center)





**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以点击这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**