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

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《使用 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学习网公众号也会发布文章相关知识，快来关注吧！