视觉测试对于确保 web 应用程序的外观在更新或更改后保持一致和视觉正确至关重要。本博客将指导您使用 selenium 进行浏览器自动化，并使用自定义图像比较实用程序来执行视觉测试。
简介
视觉测试通过比较不同时间点拍摄的屏幕截图来帮助检测 ui 中的意外变化。在本指南中，我们将使用 selenium 自动化 web 交互并截取屏幕截图，然后使用称为视觉比较的图像比较实用程序来比较这些屏幕截图。
先决条件
在开始之前，请确保您已安装以下软件：
python 3.xselenium（pip install selenium）视觉比较（pip install visual-comparison）
设置环境
安装硒：
pip 安装selenium
安装视觉比较包：
pip install 视觉比较
编写 selenium 脚本
让我们编写一个 selenium 脚本，用于登录示例网站、截取屏幕截图并将其与基线图像进行比较。
第一步：初始化webdriver并打开网页
首先，初始化webdriver并导航到目标网页：
from selenium import webdriverfrom selenium.webdriver.common.by import by# initialize the webdriverdriver = webdriver.chrome()# open the target webpagedriver.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 buttonlogin_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 changesactual_image_path = "actual.png"driver.save_screenshot(actual_image_path)# close the browserdriver.quit()
第四步：比较图像
使用自定义图像比较实用程序将基线图像 (expected.png) 与新拍摄的屏幕截图 (actual.png) 进行比较：
from visual_comparison.utils import imagecomparisonutil# load the expected image and the actual screenshotexpected_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 resultresult_destination = "result.png"# compare the images and save the resultsimilarity_index = imagecomparisonutil.compare_images(expected_image, actual_image, result_destination)print("similarity index:", similarity_index)# asserting both imagesmatch_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 webdriverfrom selenium.webdriver.common.by import byfrom visual_comparison.utils import imagecomparisonutil# initialize the webdriverdriver = webdriver.chrome()# open the target webpagedriver.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 buttonlogin_button = driver.find_element(by.id, "login-button")login_button.click()# take a screenshot after login to visualize the changesactual_image_path = "actual.png"expected_image_path = "expected.png"driver.save_screenshot(actual_image_path)# close the browserdriver.quit()# load the expected image and the actual screenshotexpected_image = imagecomparisonutil.read_image(expected_image_path)actual_image = imagecomparisonutil.read_image(actual_image_path)# choose the path to save the comparison resultresult_destination = "result.png"# compare the images and save the resultsimilarity_index = imagecomparisonutil.compare_images(expected_image, actual_image, result_destination)print("similarity index:", similarity_index)# asserting both imagesmatch_result = imagecomparisonutil.check_match(expected_image_path, actual_image_path)assert match_result
OutputSimilarity Index: 1.0 (i.e.No Visual Changes)
注意：在执行上述脚本之前创建基线图像/预期图像。参考此仓库github链接
结论
本指南演示了如何使用 selenium 进行网络自动化和视觉比较包来比较屏幕截图来执行视觉测试。通过自动化视觉测试，您可以确保 ui 更改不会引入任何视觉缺陷，从而保持一致的用户体验。
以上就是使用 Selenium 和视觉比较进行视觉回归测试的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1347996.html
微信扫一扫 
支付宝扫一扫 
