视觉测试对于确保 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 更改不会引入任何视觉缺陷，从而保持一致的用户体验。
