Tests de régression visuelle avec Selenium et comparaison visuelle

Les tests visuels sont essentiels pour garantir que l'apparence d'une application Web reste cohérente et visuellement correcte après des mises à jour ou des modifications. Ce blog vous guidera dans l'utilisation de Selenium pour l'automatisation du navigateur et d'un utilitaire de comparaison d'images personnalisé pour effectuer des tests visuels.

Présentation

Les tests visuels permettent de détecter les changements involontaires dans l'interface utilisateur en comparant les captures d'écran prises à différents moments. Dans ce guide, nous utiliserons Selenium pour automatiser les interactions Web et prendre des captures d'écran, puis comparer ces captures d'écran à l'aide d'un utilitaire de comparaison d'images appelé comparaison visuelle.

Prérequis

Avant de commencer, assurez-vous que les éléments suivants sont installés :

• Python 3.x
• Sélénium (pip installer le sélénium)
• Comparaison visuelle (pip install visual-comparison)

Configuration de l'environnement

1. Installer Sélénium :
   pip installer le sélénium

2. Installer le package de comparaison visuelle :
   pip install comparaison visuelle

Écrire le script Selenium

Écrivons un script Selenium qui se connecte à un exemple de site Web, prend une capture d'écran et la compare avec une image de référence.

Étape 1 : initialisez WebDriver et ouvrez la page Web
Tout d’abord, initialisez le WebDriver et accédez à la page Web cible :

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)

Étape 2 : Effectuer la connexion
Ensuite, connectez-vous au site Web en remplissant les champs du nom d'utilisateur et du mot de passe et en cliquant sur le bouton de connexion. Actuellement, test visuel de la page du tableau de bord après la connexion. Vous pouvez modifier ce code en fonction de vos besoins :

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

Étape 4 : Comparez les images
Utilisez votre utilitaire de comparaison d'images personnalisé pour comparer l'image de base (expected.png) avec la capture d'écran nouvellement prise (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

Script complet

Voici le script complet regroupant toutes les étapes :

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

Remarque : créez une image de base/une image attendue avant d'exécuter le script ci-dessus. Reportez-vous à ce référentiel GitHub Link

Conclusion

Ce guide montre comment effectuer des tests visuels à l'aide de Selenium pour l'automatisation Web et du package de comparaison visuelle pour comparer les captures d'écran. En automatisant les tests visuels, vous pouvez vous assurer que les modifications de l'interface utilisateur n'introduisent aucun défaut visuel, conservant ainsi une expérience utilisateur cohérente.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!