最近我把之前的 UI 测试新思路与代码整理了一番，
于是有了 Pic-Diff-Recognizer 的诞生。
什么是 Pic-Diff-Recognizer ？
Pic-Diff-Recognizer 是基于图像差异识别与页面遍历探索的 Selenium UI 自动化测试插件库。
此库诞生的目的是为了让 UI 自动化测试不再需要与页面元素打交道,
而是直接使用真实的视觉差异来判断测试结果是否符合预期。
源码地址：
github: https://github.com/amazingTest/Pic-Diff-Recognizer
gitee: https://gitee.com/amazingTest/Pic-Diff-Recognizer
如何安装？
首先安装开源项目目录下的依赖包：
pip install -r requirements.txt
然后再安装今天的主角：
pip install pic-diff-recognizer
如何使用？
下面给大家放出最佳实践：
from pic_diff_recognizer.searchHandler import SearchHandler
from violent_webdriver import Chrome
from selenium.webdriver.chrome.options import Options
# add some useful options :)
chrome_options = Options()
chrome_options.add_argument("--headless")
chrome_options.add_argument("disable-infobars")
chrome_options.add_experimental_option("excludeSwitches", ['enable-automation'])
# init driver , executable_path should be your own path!
dr = Chrome.violent_chromedriver(chrome_options=chrome_options,
executable_path='/usr/local/bin/chromedriver')
# init searchHandler
search_handler = SearchHandler(browser=dr)
# search and saving baseline images in current directory named baseline
search_handler.traverse_href(origin_url='https://gitbook.cn/gitchat/author/5cea0bfbb78cc870612d8bba')
# -------------------- assuming after some iterations of current project -----------------------------
search_handler.url_histories = []
# load baseline images
search_handler.picture_handler.load_base_line()
# search and comparing screen shots and baseline images
search_handler.traverse_href(origin_url='https://gitbook.cn/gitchat/author/5cea0bfbb78cc870612d8bba',
compare_baseline_and_screen_shots=True)
# generate_diff_between_base_line_and_screen_shot and output diffResults to current directory
search_handler.picture_handler.generate_diff_between_base_line_and_screen_shot()
# output testReport.txt to current directory
search_handler.picture_handler.export_picture_comparison_result()
可以看到在项目迭代分割线之前，
程序先探索并保存了待测页面的图像。
而在项目迭代分割线之后，
程序再次探索待测页面并对比了图像差异，
最终输出测试报告。
相信这很好的对应了现实项目迭代中的回测节奏。
当然，目前来说此库还有许多可以改进的地方。
源码地址：
github: https://github.com/amazingTest/Pic-Diff-Recognizer
gitee: https://gitee.com/amazingTest/Pic-Diff-Recognizer
最后喊个口号吧：开源，yes！
这个应用面有点窄啊，页面数据有变更的怎么办？
此前我也做过这种通过图片对比来确定功能是否正常的测试。
更多的是用在图像类应用（拍照，修图，剪接等）的测试上。
不过即使是图像类的应用，也存在很多问题，比如色彩区分，因为此类对比，主流的还是通过将图片变成黑白两色，然后对比二进制数值来确定相似度，所以到后面发现色彩上的问题。然后灯光也会有一定的影响。
这是图像类的，还可以派上用场，但是场景一多，实际效果也比较差。
如果是数值比较重要的应用（金融，电商等），这类图片对比的测试其实基本上是没什么用的。
因为无法确定数据的准确精度，导致这类应用里非常重要的一个数据无法获取。
另外阈值的设置其实也非常麻烦，经常会出现，其实没问题，但是因为阈值的设定导致报错，或者反过来，其实有问题，但是因为云芝的设置，导致没有报错。并且通常，这种问题会反复横跳，就是同一个阈值，有时报错，有时不报错。
所以，最后这个图片对比项目也没有最终落地。
骷髅弓箭手
回复
是的，会遇到你说的这些问题，我是基于 applitools 的理念然后自己写的一个开源小工具，你说的这些问题他们或多或少都已经有了解决方案～
骷髅弓箭手
回复
导致这类应用里非常重要的一个数据无法获取。这里是指什么数据呢？
我认为基于图片对比的自动化测试在金融和电商等应用上有一定的用武之地啊。
Thirty-Thirty
回复
就是每一个具体数据，没描述好。
对于电商和金融来说，具体数据的验证是非常重要的，必须要保证正确的数据出现在正确的位置上。
这让图片对比这个功能非常尴尬，单纯的对比无法完成这项任务，必须加入文字识别。
但是只有文字识别的话只能完成正确的数据这个任务，对于正确的位置这个事又必须去做另一个识别，而这个单独的识别，难度要比全图片对比大的多。
当然，这只是我基于我自己这边的业务产生的理解。
或许每个公司对于这些东西的要求不一样。
骷髅弓箭手
回复
这类应用数据验证的确很重要，但使用图片对比而不使用文字识别应该更具有可行性。在期望的位置上是否出现期望的数据，那么这个/些数据文字是可以使用图片对比来达到验证目的的。图片对比的确存在准确率问题，但文字识别也存在准确率问题，比较起来，前者应该更有优势吧。
不同浏览器或分辨率造成渲染色差、布局和比例缩放这个是否可以解决呀…
Thirty-Thirty
回复
第一个问题的话，其实没有想象中的容易，因为主体上还是通过设定相似度阈值来确定测试是否通过。这个阈值是个整体阈值，很难精确到你需要的某个区域的相似度是否符合预期。如果能解决定位到某个具体区域，然后再对比相似度，是可以一定程度上解决这个问题的，但是随之而来的就是你确定了对比区域，但是很有可能两次测试之间，你需要的数据的区域会发生变动。我稍微想了下，细节有点多，我现在也没条件去把所有东西都验证一边。总之就是变动会比较大，导致整个测试代码写出来费力，后续的维护费力，然后效率也并不高。
第二个问题，我不确定你说的文字识别也存在准确率问题是什么问题？如果是按照我前面说的意思，直接捕获文字的话，是不存在准确率问题的，如果是图片文字识别，那也是图片对比的问题。
