使用 Selenium 和视觉比较进行视觉回归测试
欢迎各位小伙伴来到golang学习网,相聚于此都是缘哈哈哈!今天我给大家带来《使用 Selenium 和视觉比较进行视觉回归测试》,这篇文章主要讲到等等知识,如果你对文章相关的知识非常感兴趣或者正在自学,都可以关注我,我会持续更新相关文章!当然,有什么建议也欢迎在评论留言提出!一起学习!
视觉测试对于确保 web 应用程序的外观在更新或更改后保持一致和视觉正确至关重要。本博客将指导您使用 selenium 进行浏览器自动化,并使用自定义图像比较实用程序来执行视觉测试。
简介
视觉测试通过比较不同时间点拍摄的屏幕截图来帮助检测 ui 中的意外变化。在本指南中,我们将使用 selenium 自动化 web 交互并截取屏幕截图,然后使用称为视觉比较的图像比较实用程序来比较这些屏幕截图。
先决条件
在开始之前,请确保您已安装以下软件:
- python 3.x
- selenium(pip install selenium)
- 视觉比较(pip install visual-comparison)
设置环境
安装硒:
pip 安装selenium安装视觉比较包:
pip install 视觉比较
编写 selenium 脚本
让我们编写一个 selenium 脚本,用于登录示例网站、截取屏幕截图并将其与基线图像进行比较。
第一步:初始化webdriver并打开网页
首先,初始化webdriver并导航到目标网页:
from selenium import webdriver from selenium.webdriver.common.by import by # initialize the webdriver driver = webdriver.chrome() # open the target webpage driver.get("https://www.saucedemo.com/v1/") driver.maximize_window() driver.implicitly_wait(5)
第2步:执行登录
接下来,填写用户名和密码字段并单击登录按钮登录网站。目前登录后可视化测试仪表板页面。您可以根据您的要求修改此代码:
# login to the website username = driver.find_element(by.id, "user-name") username.send_keys("standard_user") password = driver.find_element(by.id, "password") password.send_keys("secret_sauce") # click on the login button login_button = driver.find_element(by.id, "login-button") login_button.click()` **step 3: take a screenshot** after logging in, take a screenshot of the page and save it: # take a screenshot after login to visualize the changes actual_image_path = "actual.png" driver.save_screenshot(actual_image_path) # close the browser driver.quit()
第四步:比较图像
使用自定义图像比较实用程序将基线图像 (expected.png) 与新拍摄的屏幕截图 (actual.png) 进行比较:
from visual_comparison.utils import imagecomparisonutil # load the expected image and the actual screenshot expected_image_path = "expected.png" expected_image = imagecomparisonutil.read_image(expected_image_path) actual_image = imagecomparisonutil.read_image(actual_image_path) # choose the path to save the comparison result result_destination = "result.png" # compare the images and save the result similarity_index = imagecomparisonutil.compare_images(expected_image, actual_image, result_destination) print("similarity index:", similarity_index) # asserting both images match_result = imagecomparisonutil.check_match(expected_image_path, actual_image_path) assert match_result
完整脚本
这是结合所有步骤的完整脚本:
""" this python script compares the baseline image with the actual image. after any source code modification, the visual changes are compared easily through this script. """ from selenium import webdriver from selenium.webdriver.common.by import by from visual_comparison.utils import imagecomparisonutil # initialize the webdriver driver = webdriver.chrome() # open the target webpage driver.get("https://www.saucedemo.com/v1/") driver.maximize_window() driver.implicitly_wait(5) # login to the website username = driver.find_element(by.id, "user-name") username.send_keys("standard_user") password = driver.find_element(by.id, "password") password.send_keys("secret_sauce") # click on the login button login_button = driver.find_element(by.id, "login-button") login_button.click() # take a screenshot after login to visualize the changes actual_image_path = "actual.png" expected_image_path = "expected.png" driver.save_screenshot(actual_image_path) # close the browser driver.quit() # load the expected image and the actual screenshot expected_image = imagecomparisonutil.read_image(expected_image_path) actual_image = imagecomparisonutil.read_image(actual_image_path) # choose the path to save the comparison result result_destination = "result.png" # compare the images and save the result similarity_index = imagecomparisonutil.compare_images(expected_image, actual_image, result_destination) print("similarity index:", similarity_index) # asserting both images match_result = imagecomparisonutil.check_match(expected_image_path, actual_image_path) assert match_result
Output Similarity Index: 1.0 (i.e.No Visual Changes)
注意:在执行上述脚本之前创建基线图像/预期图像。参考此仓库github链接
结论
本指南演示了如何使用 selenium 进行网络自动化和视觉比较包来比较屏幕截图来执行视觉测试。通过自动化视觉测试,您可以确保 ui 更改不会引入任何视觉缺陷,从而保持一致的用户体验。
终于介绍完啦!小伙伴们,这篇关于《使用 Selenium 和视觉比较进行视觉回归测试》的介绍应该让你收获多多了吧!欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识,快来关注吧!

- 上一篇
- 如何在 Spring Security 中自定义登录表单以使用自定义数据库

- 下一篇
- 集成 Redis、MySQL、Kafka、Logstash、Elasticsearch、TiDB 和 CloudCanal
-
- 文章 · python教程 | 3分钟前 |
- Python连接Redis指南:redis-py配置全解析
- 125浏览 收藏
-
- 文章 · python教程 | 4分钟前 |
- Python数据监控与异常报警系统搭建教程
- 329浏览 收藏
-
- 文章 · python教程 | 7分钟前 |
- Python中文叫蟒蛇还是皮同?
- 233浏览 收藏
-
- 文章 · python教程 | 9分钟前 |
- Python语音识别教程:SpeechRecognition库详解
- 154浏览 收藏
-
- 文章 · python教程 | 18分钟前 |
- Python连接Snowflake教程详解
- 282浏览 收藏
-
- 文章 · python教程 | 19分钟前 |
- Pythonmap函数数据标记技巧详解
- 213浏览 收藏
-
- 文章 · python教程 | 21分钟前 |
- Python排序技巧:sorted与lambda应用详解
- 225浏览 收藏
-
- 文章 · python教程 | 25分钟前 |
- Python正则匹配浮点数技巧全解
- 176浏览 收藏
-
- 文章 · python教程 | 25分钟前 |
- Python自动化测试:Selenium实战教程
- 356浏览 收藏
-
- 文章 · python教程 | 49分钟前 |
- Python正则匹配Unicode字符全攻略
- 183浏览 收藏
-
- 文章 · python教程 | 53分钟前 |
- PyQt5桌面应用开发教程
- 484浏览 收藏
-
- 文章 · python教程 | 55分钟前 |
- Python连接Spark的实用方法分享
- 135浏览 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 511次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 498次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 484次学习
-
- 边界AI平台
- 探索AI边界平台,领先的智能AI对话、写作与画图生成工具。高效便捷,满足多样化需求。立即体验!
- 417次使用
-
- 免费AI认证证书
- 科大讯飞AI大学堂推出免费大模型工程师认证,助力您掌握AI技能,提升职场竞争力。体系化学习,实战项目,权威认证,助您成为企业级大模型应用人才。
- 424次使用
-
- 茅茅虫AIGC检测
- 茅茅虫AIGC检测,湖南茅茅虫科技有限公司倾力打造,运用NLP技术精准识别AI生成文本,提供论文、专著等学术文本的AIGC检测服务。支持多种格式,生成可视化报告,保障您的学术诚信和内容质量。
- 560次使用
-
- 赛林匹克平台(Challympics)
- 探索赛林匹克平台Challympics,一个聚焦人工智能、算力算法、量子计算等前沿技术的赛事聚合平台。连接产学研用,助力科技创新与产业升级。
- 662次使用
-
- 笔格AIPPT
- SEO 笔格AIPPT是135编辑器推出的AI智能PPT制作平台,依托DeepSeek大模型,实现智能大纲生成、一键PPT生成、AI文字优化、图像生成等功能。免费试用,提升PPT制作效率,适用于商务演示、教育培训等多种场景。
- 569次使用
-
- Flask框架安装技巧:让你的开发更高效
- 2024-01-03 501浏览
-
- Django框架中的并发处理技巧
- 2024-01-22 501浏览
-
- 提升Python包下载速度的方法——正确配置pip的国内源
- 2024-01-17 501浏览
-
- Python与C++:哪个编程语言更适合初学者?
- 2024-03-25 501浏览
-
- 品牌建设技巧
- 2024-04-06 501浏览