업데이트 또는 변경 후에도 웹 애플리케이션의 모양이 일관되고 시각적으로 올바른지 확인하려면 시각적 테스트가 중요합니다. 이 블로그에서는 브라우저 자동화를 위한 Selenium 사용 방법과 시각적 테스트 수행을 위한 사용자 정의 이미지 비교 유틸리티를 안내합니다.
시각적 테스트는 다양한 시점에 촬영된 스크린샷을 비교하여 UI의 의도하지 않은 변화를 감지하는 데 도움이 됩니다. 이 가이드에서는 Selenium을 사용하여 웹 상호 작용을 자동화하고 스크린샷을 찍은 다음 시각적 비교라는 이미지 비교 유틸리티를 사용하여 이러한 스크린샷을 비교합니다.
시작하기 전에 다음이 설치되어 있는지 확인하세요.
셀레늄 설치:
pip 셀레늄 설치
시각 비교 패키지 설치:
pip 설치 시각적 비교
샘플 웹사이트에 로그인하고 스크린샷을 찍어 기본 이미지와 비교하는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!