Ujian Regresi Visual dengan Selenium dan Perbandingan Visual

Ujian visual adalah penting untuk memastikan penampilan aplikasi web kekal konsisten dan betul secara visual selepas kemas kini atau perubahan. Blog ini akan membimbing anda menggunakan Selenium untuk automasi penyemak imbas dan utiliti perbandingan imej tersuai untuk melaksanakan ujian visual.

Pengenalan

Ujian visual membantu mengesan perubahan yang tidak diingini dalam UI dengan membandingkan tangkapan skrin yang diambil pada titik masa yang berbeza. Dalam panduan ini, kami akan menggunakan Selenium untuk mengautomasikan interaksi web dan mengambil tangkapan skrin, kemudian membandingkan tangkapan skrin ini menggunakan utiliti perbandingan imej yang dikenali sebagai perbandingan visual.

Prasyarat

Sebelum kita mula, pastikan anda telah memasang yang berikut:

• Python 3.x
• Selenium (pip pasang selenium)
• Perbandingan Visual(perbandingan visual pemasangan pip)

Menyediakan Persekitaran

1. Pasang Selenium:
   pip pasang selenium

2. Pasang Pakej Perbandingan Visual:
   pip install visual-comparison

Menulis Skrip Selenium

Mari kita tulis skrip Selenium yang log masuk ke tapak web sampel, mengambil tangkapan skrin dan membandingkannya dengan imej garis dasar.

Langkah 1: Mulakan WebDriver dan Buka Halaman Web
Mula-mula, mulakan WebDriver dan navigasi ke halaman web sasaran:

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)

Langkah 2: Lakukan Log Masuk
Seterusnya, log masuk ke laman web dengan mengisi medan nama pengguna dan kata laluan dan mengklik butang log masuk. Pada masa ini visual menguji halaman papan pemuka selepas log masuk. Anda boleh mengubah suai kod ini berdasarkan keperluan anda:

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

Langkah 4: Bandingkan Imej
Gunakan utiliti perbandingan imej tersuai anda untuk membandingkan imej garis dasar (expected.png) dengan tangkapan skrin yang baru diambil (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

Skrip Lengkap

Berikut ialah skrip lengkap yang menggabungkan semua langkah:

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

Nota: Buat imej garis dasar/imej dijangka sebelum melaksanakan skrip di atas. Rujuk Pautan GitHub repositori ini

Kesimpulan

Panduan ini menunjukkan cara melakukan ujian visual menggunakan Selenium untuk automasi web dan pakej perbandingan visual untuk membandingkan tangkapan skrin. Dengan mengautomasikan ujian visual, anda boleh memastikan bahawa perubahan UI tidak memperkenalkan sebarang kelemahan visual, sekali gus mengekalkan pengalaman pengguna yang konsisten.

Atas ialah kandungan terperinci Ujian Regresi Visual dengan Selenium dan Perbandingan Visual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!