Selenium を使用した視覚的回帰テストと視覚的比較

更新または変更後も、Web アプリケーションの外観の一貫性と視覚的に正しいことを確認するには、ビジュアル テストが非常に重要です。このブログでは、Selenium を使用してブラウザーを自動化し、カスタム画像比較ユーティリティを使用してビジュアル テストを実行する方法を説明します。

はじめに

ビジュアル テストは、さまざまな時点で撮影されたスクリーンショットを比較することで、UI の意図しない変更を検出するのに役立ちます。このガイドでは、Selenium を使用して Web 操作を自動化し、スクリーンショットを取得し、visual-comparison として知られる画像比較ユーティリティを使用してこれらのスクリーンショットを比較します。

前提条件

始める前に、以下がインストールされていることを確認してください:

• Python 3.x
• Selenium (pip install Selenium)
• 視覚的な比較(pip install Visual-comparison)

環境のセットアップ

1. Selenium をインストールします:
   pip インストール Selenium

2. 視覚比較パッケージをインストールします:
   pip install 視覚比較

Selenium スクリプトの作成

サンプル Web サイトにログインし、スクリーンショットを撮り、ベースライン画像と比較する Selenium スクリプトを作成してみましょう。

ステップ 1: WebDriver を初期化し、Web ページを開きます
まず、WebDriver を初期化し、ターゲット Web ページに移動します。

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: ログインを実行します
次に、ユーザー名とパスワードのフィールドに入力し、ログイン ボタンをクリックして、Web サイトにログインします。現在、ログイン後のダッシュボード ページのビジュアル テストを行っています。要件に基づいてこのコードを変更できます:

# 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 リンクを参照してください

結論

このガイドでは、Web オートメーション用の Selenium とスクリーンショットを比較するビジュアル比較パッケージを使用してビジュアル テストを実行する方法を説明します。ビジュアル テストを自動化することで、UI の変更によって視覚的な欠陥が生じないようにすることができ、一貫したユーザー エクスペリエンスを維持できます。

以上がSelenium を使用した視覚的回帰テストと視覚的比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。