Visueller Regressionstest mit Selen und visueller Vergleich

Visuelle Tests sind entscheidend, um sicherzustellen, dass das Erscheinungsbild einer Webanwendung nach Aktualisierungen oder Änderungen konsistent und optisch korrekt bleibt. Dieser Blog führt Sie durch die Verwendung von Selenium für die Browserautomatisierung und ein benutzerdefiniertes Bildvergleichsdienstprogramm zur Durchführung visueller Tests.

Einführung

Visuelle Tests helfen dabei, unbeabsichtigte Änderungen in der Benutzeroberfläche zu erkennen, indem Screenshots verglichen werden, die zu verschiedenen Zeitpunkten aufgenommen wurden. In diesem Leitfaden verwenden wir Selenium, um Webinteraktionen zu automatisieren und Screenshots zu erstellen und diese Screenshots dann mit einem Bildvergleichsprogramm namens Visual-Comparison zu vergleichen.

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass Folgendes installiert ist:

• Python 3.x
• Selenium (pip install selenium)
• Visueller Vergleich (pip install visual-comparison)

Einrichten der Umgebung

1. Selenium installieren:
   pip install selenium

2. Visuelles Vergleichspaket installieren:
   pip install visual-comparison

Das Selenium-Skript schreiben

Lassen Sie uns ein Selenium-Skript schreiben, das sich bei einer Beispielwebsite anmeldet, einen Screenshot macht und ihn mit einem Basisbild vergleicht.

Schritt 1: WebDriver initialisieren und die Webseite öffnen
Initialisieren Sie zunächst den WebDriver und navigieren Sie zur Zielwebseite:

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)

Schritt 2: Anmeldung durchführen
Melden Sie sich anschließend auf der Website an, indem Sie die Felder Benutzername und Passwort ausfüllen und auf die Schaltfläche „Anmelden“ klicken. Derzeit wird die Dashboard-Seite nach der Anmeldung visuell getestet. Sie können diesen Code entsprechend Ihren Anforderungen ändern:

# 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()

Schritt 4: Bilder vergleichen
Verwenden Sie Ihr benutzerdefiniertes Bildvergleichsprogramm, um das Basisbild (expected.png) mit dem neu aufgenommenen Screenshot (actual.png) zu vergleichen:

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

Vollständiges Skript

Hier ist das vollständige Skript mit allen Schritten:

"""
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)

Hinweis: Erstellen Sie ein Basisbild/erwartetes Bild, bevor Sie das obige Skript ausführen. Weitere Informationen finden Sie in diesem Repository-GitHub-Link

Fazit

Diese Anleitung zeigt, wie Sie visuelle Tests mit Selenium für die Webautomatisierung und dem visuellen Vergleichspaket zum Vergleichen von Screenshots durchführen. Durch die Automatisierung visueller Tests können Sie sicherstellen, dass Änderungen an der Benutzeroberfläche keine visuellen Mängel verursachen und so ein konsistentes Benutzererlebnis gewährleisten.

Das obige ist der detaillierte Inhalt vonVisueller Regressionstest mit Selen und visueller Vergleich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!