셀레늄을 이용한 시각적 회귀 테스트 및 시각적 비교

업데이트 또는 변경 후에도 웹 애플리케이션의 모양이 일관되고 시각적으로 올바른지 확인하려면 시각적 테스트가 중요합니다. 이 블로그에서는 브라우저 자동화를 위한 Selenium 사용 방법과 시각적 테스트 수행을 위한 사용자 정의 이미지 비교 유틸리티를 안내합니다.

소개

시각적 테스트는 다양한 시점에 촬영된 스크린샷을 비교하여 UI의 의도하지 않은 변화를 감지하는 데 도움이 됩니다. 이 가이드에서는 Selenium을 사용하여 웹 상호 작용을 자동화하고 스크린샷을 찍은 다음 시각적 비교라는 이미지 비교 유틸리티를 사용하여 이러한 스크린샷을 비교합니다.

전제조건

시작하기 전에 다음이 설치되어 있는지 확인하세요.

• 파이썬 3.x
• 셀레늄(pip install selenium)
• 시각적 비교(pip install 시각적-비교)

환경설정

1. 셀레늄 설치:
   pip 셀레늄 설치

2. 시각 비교 패키지 설치:
   pip 설치 시각적 비교

Selenium 스크립트 작성

샘플 웹사이트에 로그인하고 스크린샷을 찍어 기본 이미지와 비교하는 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 변경으로 인해 시각적 결함이 발생하지 않도록 하여 일관된 사용자 경험을 유지할 수 있습니다.

위 내용은 셀레늄을 이용한 시각적 회귀 테스트 및 시각적 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!