視覺測試對於確保 Web 應用程式的外觀在更新或變更後保持一致和視覺正確至關重要。本部落格將指導您使用 Selenium 進行瀏覽器自動化，並使用自訂圖像比較實用程式來執行視覺測試。
視覺測試透過比較不同時間點拍攝的螢幕截圖來幫助偵測 UI 中的意外變更。在本指南中，我們將使用 Selenium 自動化 Web 互動並獲取螢幕截圖，然後使用稱為視覺比較的圖像比較實用程式來比較這些螢幕截圖。
在我們開始之前，請確保您已安裝以下軟體：
安裝硒：
pip install selenium
安裝視覺比較套件：
pip install Visual-comparison
讓我們編寫一個 Selenium 腳本，用於登入範例網站、截取螢幕截圖並將其與基準影像進行比較。
第1步：初始化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()
第 4 步：比較影像
使用自訂影像比較實用程式將基線影像 (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 和視覺比較進行視覺迴歸測試的詳細內容。更多資訊請關注PHP中文網其他相關文章！
