当前位置:首页 > 文章列表 > 文章 > python教程 > 使用 Selenium 和视觉比较进行视觉回归测试

使用 Selenium 和视觉比较进行视觉回归测试

来源:dev.to 2024-07-11 16:19:04 0浏览 收藏

欢迎各位小伙伴来到golang学习网,相聚于此都是缘哈哈哈!今天我给大家带来《使用 Selenium 和视觉比较进行视觉回归测试》,这篇文章主要讲到等等知识,如果你对文章相关的知识非常感兴趣或者正在自学,都可以关注我,我会持续更新相关文章!当然,有什么建议也欢迎在评论留言提出!一起学习!

使用 Selenium 和视觉比较进行视觉回归测试

视觉测试对于确保 web 应用程序的外观在更新或更改后保持一致和视觉正确至关重要。本博客将指导您使用 selenium 进行浏览器自动化,并使用自定义图像比较实用程序来执行视觉测试。

简介

视觉测试通过比较不同时间点拍摄的屏幕截图来帮助检测 ui 中的意外变化。在本指南中,我们将使用 selenium 自动化 web 交互并截取屏幕截图,然后使用称为视觉比较的图像比较实用程序来比较这些屏幕截图。

先决条件

在开始之前,请确保您已安装以下软件:

  • python 3.x
  • selenium(pip install selenium)
  • 视觉比较(pip install visual-comparison)

设置环境

  1. 安装硒:
    pip 安装selenium

  2. 安装视觉比较包:
    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学习网公众号也会发布文章相关知识,快来关注吧!

版本声明
本文转载于:dev.to 如有侵犯,请联系study_golang@163.com删除
如何在 Spring Security 中自定义登录表单以使用自定义数据库如何在 Spring Security 中自定义登录表单以使用自定义数据库
上一篇
如何在 Spring Security 中自定义登录表单以使用自定义数据库
集成 Redis、MySQL、Kafka、Logstash、Elasticsearch、TiDB 和 CloudCanal
下一篇
集成 Redis、MySQL、Kafka、Logstash、Elasticsearch、TiDB 和 CloudCanal
查看更多
最新文章
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    542次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    511次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    498次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    484次学习
查看更多
AI推荐
  • AI边界平台:智能对话、写作、画图,一站式解决方案
    边界AI平台
    探索AI边界平台,领先的智能AI对话、写作与画图生成工具。高效便捷,满足多样化需求。立即体验!
    417次使用
  • 讯飞AI大学堂免费AI认证证书:大模型工程师认证,提升您的职场竞争力
    免费AI认证证书
    科大讯飞AI大学堂推出免费大模型工程师认证,助力您掌握AI技能,提升职场竞争力。体系化学习,实战项目,权威认证,助您成为企业级大模型应用人才。
    424次使用
  • 茅茅虫AIGC检测:精准识别AI生成内容,保障学术诚信
    茅茅虫AIGC检测
    茅茅虫AIGC检测,湖南茅茅虫科技有限公司倾力打造,运用NLP技术精准识别AI生成文本,提供论文、专著等学术文本的AIGC检测服务。支持多种格式,生成可视化报告,保障您的学术诚信和内容质量。
    560次使用
  • 赛林匹克平台:科技赛事聚合,赋能AI、算力、量子计算创新
    赛林匹克平台(Challympics)
    探索赛林匹克平台Challympics,一个聚焦人工智能、算力算法、量子计算等前沿技术的赛事聚合平台。连接产学研用,助力科技创新与产业升级。
    662次使用
  • SEO  笔格AIPPT:AI智能PPT制作,免费生成,高效演示
    笔格AIPPT
    SEO 笔格AIPPT是135编辑器推出的AI智能PPT制作平台,依托DeepSeek大模型,实现智能大纲生成、一键PPT生成、AI文字优化、图像生成等功能。免费试用,提升PPT制作效率,适用于商务演示、教育培训等多种场景。
    569次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码