Appium을 사용하여 시각적 회귀 테스트 시작하기
게시 됨: 2023-09-17
오늘날의 소프트웨어는 다양한 플랫폼과 장치에서 원활한 사용자 경험을 요구합니다. 이 영역에서 가장 어려운 측면 중 하나는 애플리케이션의 시각적 무결성을 유지하는 것입니다. 이것이 VRT(시각적 회귀 테스트)가 작동하는 곳이며, 그렇지 않으면 눈에 띄지 않을 수 있는 시각적 버그와 불일치를 포착할 수 있는 효율적인 방법을 제공합니다. VRT를 시작하려는 사람들을 위해 Appium은 다양한 플랫폼에서 이러한 종류의 테스트를 자동화하기 위한 강력하고 확장 가능한 프레임워크를 제공합니다.
또한LambdaTest 와 같은 서비스는 시각적 회귀 테스트를 위한 AI 기반 테스트 조정 및 테스트 실행 솔루션을 제공하므로 팀이 자체 테스트 인프라를 설정하고 관리할 필요가 없습니다.이 클라우드 접근 방식은 다양한 실제 브라우저 및 장치에 대한 주문형 액세스를 제공하여 여러 환경에서 동시 테스트를 허용하고 테스트 실행 시간을 단축하며 웹 애플리케이션 모양 및 기능의 일관성을 보장합니다. LambdaTest는 또한 빠른 문제 식별 및 해결을 위해 자세한 테스트 보고서와 널리 사용되는 테스트 프레임워크와의 통합을 제공합니다.
이 문서에서는 테스트 전략을 한 단계 더 발전시킬 수 있도록 Appium을 사용하여 VRT를 시작하는 기본 사항을 살펴보겠습니다.
시각적 회귀 테스트란 무엇입니까?
시각적 회귀 테스트는 애플리케이션에 대한 변경 사항이 애플리케이션 사용자 인터페이스(UI)의 시각적 표현에 부정적인 영향을 미치지 않는지 확인하기 위해 사용되는 검증 기술입니다. 주요 목표는 레이아웃과 시각적 요소가 미리 정의된 기대치를 준수하는지 확인하여 완벽한 시각적 사용자 경험을 보장하는 것입니다. 이러한 시각적 검사에는 위치, 휘도, 대비, 버튼 색상, 메뉴, 구성 요소, 텍스트 등과 같은 다양한 속성이 포함됩니다. 이 방법은 시각적 테스트 또는 UI 테스트라고도 합니다.
시각적 회귀 테스트는 어떻게 작동합니까?
본질적으로 시각적 회귀 테스트는 수정 전 UI의 스냅샷을 캡처한 다음 이를 나중에 찍은 스크린샷과 대조하여 작동합니다. 이후 테스트 엔지니어의 검사를 위해 모든 차이가 강조 표시됩니다. 실제로 시각적 회귀 테스트를 수행하는 데는 다양한 기술이 있습니다. 가장 많이 사용되는 것 중 일부는 다음과 같습니다.
수동 시각적 테스트
이 방법에는 특수 도구를 사용하지 않고 UI를 수동으로 검사하는 방법이 포함됩니다. 디자이너와 개발자는 각 릴리스마다 페이지를 시각적으로 검사하고 시각적 결함을 적극적으로 찾는 데 시간을 할애합니다. 이 접근 방식은 전체 애플리케이션에 적용될 때 힘들고 인적 오류가 발생하기 쉬울 수 있지만, 특히 개발 초기 단계에서 임시 또는 탐색적 UI 테스트에 유용합니다.
픽셀별 비교
이 기술은 두 개의 스크린샷을 픽셀 수준에서 면밀히 조사하여 테스트 엔지니어에게 불일치 사항을 알려줍니다. 픽셀 차이라고도 알려진 픽셀 비교는 모든 잠재적인 문제를 식별할 수 있지만 육안으로 감지할 수 없고 유용성에 영향을 주지 않는 많은 중요하지 않은 차이를 표시할 수도 있습니다(예: 렌더링 변형, 앤티앨리어싱 또는 패딩/여백 차이). ). 테스트 엔지니어는 모든 테스트 실행에서 이러한 "오탐지"를 꼼꼼하게 선별해야 합니다.
DOM 기반 비교
이 비교 방법은 상태 변경 전후의 DOM(문서 개체 모델)을 분석하고 차이점을 식별하는 데 의존합니다. DOM 내의 코드 관련 수정 사항을 강조하는 데 효과적이지만 실제 시각적 비교를 제공하지는 않습니다. 코드는 변경되지 않았지만 UI는 발전하거나(예: 동적 콘텐츠 또는 포함된 콘텐츠) 코드는 변경되었지만 UI는 정적으로 유지되는 경우 거짓 부정 또는 긍정 오류가 발생하는 경우가 많습니다. 결과적으로 테스트 결과는 일관되지 않을 수 있으며 시각적 결함을 간과하지 않도록 주의 깊은 검토가 필요합니다.
시각적 AI 비교
Visual AI를 사용하는 시각적 회귀 테스트는 컴퓨터 비전을 활용하여 인간과 유사한 방식으로 UI를 인식합니다. 잘 훈련된 AI는 인간 관찰자가 알아차릴 수 있는 차이점만 표시하여 테스트 엔지니어를 지원할 수 있으며, 픽셀 및 DOM 비교 테스트에서 흔히 발생하는 "오탐" 문제를 해결하는 힘든 작업을 제거합니다. 또한 Visual AI는 동적 콘텐츠를 평가하고 예상치 못한 영역에서만 문제를 식별할 수 있습니다.
시각적 회귀 테스트를 수행하는 이유
이 섹션에서는 애플리케이션에서 시각적 회귀 테스트를 수행하는 가장 확실한 이유를 설명합니다. 그러니 계속 읽어보세요…
시각적 일관성 보장
시각적 회귀 테스트는 모바일 앱의 UI와 시각적 요소가 다양한 버전, 장치 및 플랫폼에서 일관성을 유지하는지 확인하는 데 도움이 됩니다. 이러한 일관성은 원활한 사용자 경험을 제공하는 데 중요합니다.
설계 변경 검증
앱 디자인이 변경되면 시각적 회귀 테스트를 통해 이러한 변경 사항이 올바르게 구현되었는지, 의도하지 않은 시각적 문제가 발생하지 않았는지 확인할 수 있습니다.
더 빠른 피드백 루프
시각적 회귀 테스트는 개발자와 디자이너에게 빠른 피드백을 제공하여 개발 주기 초기에 문제를 해결할 수 있도록 해줍니다. 이를 통해 생산에 심각한 시각적 결함이 발생할 가능성이 줄어듭니다.
향상된 사용자 경험
시각적 결함과 불일치는 사용자 경험에 부정적인 영향을 미치고 앱의 평판을 손상시킬 수 있습니다. 시각적 회귀 테스트를 통해 이러한 문제를 파악함으로써 사용자 만족도를 높일 수 있습니다.
UI 라이브러리에 대한 회귀 테스트
앱이 타사 UI 라이브러리 또는 프레임워크를 사용하는 경우 시각적 회귀 테스트를 통해 이러한 라이브러리 업데이트로 인해 원치 않는 시각적 변경이 발생하지 않는지 확인할 수 있습니다.
Appium을 사용하여 시각적 회귀 테스트를 시작하는 단계
Appium을 사용한 시각적 회귀 테스트에는 애플리케이션 사용자 인터페이스의 시각적 요소를 비교하여 다양한 앱 버전 간의 의도하지 않은 시각적 변경 사항을 감지하는 작업이 포함됩니다. Appium을 사용하여 시각적 회귀 테스트를 시작하는 단계는 다음과 같습니다.
1단계: Appium 및 테스트 환경 설정
먼저 시스템에 Appium이 설치되어 설정되어 있는지 확인하세요. 또한 선호하는 프로그래밍 언어(예: Java, Python)에 대한 Appium 클라이언트 라이브러리가 필요합니다. 또한 테스트 환경에 필요한 종속성과 도구를 설치하세요.
2단계: 테스트 이미지 준비
시각적 회귀 테스트를 수행하려면 먼저 앱 화면의 예상 모양을 나타내는 기본 이미지 세트가 필요합니다. 다양한 기기/에뮬레이터에서 앱을 실행하고 각 화면의 스크린샷을 찍어 이러한 기준 이미지를 캡처하세요. 이러한 이미지를 프로젝트 내의 지정된 폴더에 저장하십시오.
3단계: 테스트 스크립트 구현
스크린샷 캡처 및 시각적 비교 수행 프로세스를 자동화하려면 Appium 클라이언트 라이브러리를 사용하여 테스트 스크립트를 작성하세요. 테스트 스크립트는 다음을 수행해야 합니다.
- 특정 장치/에뮬레이터에서 앱을 실행하려면 Appium 드라이버를 초기화하세요.
- 앱 화면을 탐색하면서 UI 변경을 트리거하는 작업을 수행합니다.
- Appium의 스크린샷 기능을 사용하여 스크린샷을 캡처하세요.
- 비교를 위해 캡처한 스크린샷을 별도의 폴더에 저장하세요.
다음은 Appium Java 클라이언트를 사용하여 Java에서 코드가 어떻게 보이는지에 대한 예입니다.
``자바
import io.appium.java_client.AppiumDriver;
io.appium.java_client.MobileElement 가져오기;
io.appium.java_client.android.AndroidDriver 가져오기;
import org.openqa.selenium.remote.DesiredCapability;
java.net.URL 가져오기;
공개 클래스 VisualRegressionTest {
public static void main(String[] args)에서 예외가 발생합니다.
// Appium 드라이버에 대해 원하는 기능을 설정합니다.
DesiredCapability caps = new DesiredCapability();
caps.setCapability("platformName", "Android");
caps.setCapability("deviceName", "emulator-5554");
caps.setCapability("appPackage", "your.app.package");
caps.setCapability("appActivity", "your.app.activity");
// Appium 드라이버 초기화
AppiumDriver<MobileElement> 드라이버 = 새로운 AndroidDriver<>(새 URL("https://localhost:4723/wd/hub"), caps);
// 작업 수행 및 스크린샷 캡처
// ...
// 비교를 위해 스크린샷을 저장합니다.
// ..
// 드라이버를 닫습니다.
드라이버.종료();
}
}
````
4단계: 시각적 비교 논리 구현
시각적 회귀 테스트를 위해서는 캡처된 스크린샷을 기준 이미지와 비교하는 메커니즘이 필요합니다. "Resemble.js" 또는 "Pixelmatch"와 같은 이미지 비교 라이브러리를 사용하여 픽셀별 비교를 수행하고 시각적 차이를 계산할 수 있습니다.
5단계: 주장 및 보고
테스트 스크립트에서 시각적 비교 결과를 기반으로 어설션을 구현합니다. 시각적 차이가 특정 임계값을 초과하면 테스트가 실패한 것으로 간주됩니다. 감지된 시각적 차이를 포함하여 테스트 결과를 자세히 설명하는 보고서를 생성합니다.
6단계: 지속적 통합(CI)
시각적 회귀 테스트를 CI/CD 파이프라인에 통합하여 코드 변경이나 새 릴리스가 있을 때마다 자동으로 실행되도록 하세요. 이는 개발 프로세스 초기에 시각적 회귀를 포착하는 데 도움이 됩니다.
7단계: 기준 이미지 유지
앱이 발전함에 따라 새로운 예상 모양과 일치하도록 기본 이미지를 업데이트해야 합니다. 이렇게 하면 합법적인 UI 변경 사항이 회귀로 오인되지 않습니다.
사용자가 LambdaTest에서 Appium을 사용하여 VRT를 수행할 수 있는 방법은 무엇입니까?
사용자가 LambdaTest에서 Appium을 사용하여 시각적 회귀 테스트를 수행하는 방법은 다음과 같습니다.
LambdaTest 계정 설정
시작하려면 아직 계정이 없다면 LambdaTest 플랫폼에 계정을 만드십시오. 테스트 인프라에 액세스하려면 이 계정이 필요합니다. 그런 다음 위에서 설명한 대로 Appium과 모든 종속성을 설치해야 합니다.
테스트 스크립트 작성
모바일 애플리케이션과 상호 작용하는 Appium 테스트 스크립트를 개발하세요. 이러한 스크립트에는 앱을 탐색하고 주요 요소 또는 화면의 스크린샷을 캡처하는 단계가 포함되어야 합니다.
Lambda테스트 기능 구성
LambdaTest 관련 기능을 포함하도록 Appium 스크립트를 수정합니다. 여기에는 원하는 플랫폼(iOS/Android), 브라우저 버전, 장치 유형 및 LambdaTest 자격 증명(사용자 이름 및 액세스 키) 지정이 포함됩니다.
LambdaTest에서 테스트 실행
Appium 테스트 스크립트를 LambdaTest 플랫폼에 업로드하세요. LambdaTest는 Appium 테스트를 실행할 수 있는 Selenium 그리드를 제공합니다. 이 그리드는 테스트를 위한 다양한 실제 장치와 브라우저를 제공합니다.
테스트 실행
웹 기반 인터페이스에서 테스트를 트리거하여 LambdaTest의 그리드에서 테스트를 실행하세요. LambdaTest는 지정된 모바일 장치 및 브라우저에서 테스트를 실행하여 테스트 흐름의 다양한 지점에서 스크린샷을 캡처합니다.
시각적 비교
테스트 실행 후 LambdaTest는 애플리케이션의 다양한 상태에 대한 스크린샷을 생성합니다. 내장된 시각적 비교 도구를 사용하여 이러한 스크린샷을 기본 이미지와 비교하여 시각적 불일치를 식별할 수 있습니다.
검토 및 분석
VRT 결과를 분석하여 시각적 차이를 식별합니다. LambdaTest는 시각적 변화에 대한 통찰력을 제공하여 불일치가 감지된 영역을 강조 표시합니다.
자동 보고
LambdaTest는 시간 경과에 따른 테스트 결과를 추적하는 자동화된 보고 기능을 제공하므로 추세를 더 쉽게 식별하고 변경 사항이 애플리케이션의 시각적 모양에 미치는 영향을 평가할 수 있습니다.
Appium을 사용한 성공적인 시각적 회귀 테스트 모범 사례
Appium을 사용하여 성공적인 시각적 회귀 테스트를 위해 따라야 할 몇 가지 모범 사례는 다음과 같습니다.
안정적인 장치 및 플랫폼 매트릭스 선택
타겟 고객이 사용하는 가장 중요한 조합을 나타내는 장치, 운영 체제 및 화면 해상도 세트를 선택하십시오. 이 매트릭스는 다양한 구성에서 앱이 일관되게 보이도록 다양한 범위의 장치를 다루어야 합니다.
참조 이미지의 버전 관리
다양한 기기와 플랫폼에서 예상되는 앱의 시각적 모양을 나타내는 참조 이미지의 버전 관리 저장소를 유지하세요. 이러한 참조 이미지는 회귀 테스트 중 비교를 위한 기준으로 사용됩니다.
안정적이고 일관된 테스트 환경
각 테스트 실행에 대해 테스트 환경이 일관적인지 확인하십시오. 여기에는 다양한 테스트 실행에서 동일한 OS 버전, Appium 버전 및 라이브러리를 사용하는 것이 포함됩니다. 테스트에서 오탐지로 이어질 수 있는 불필요한 환경 변경을 피하십시오.
기능 변경으로부터 UI 변경을 분리
시각적 회귀 테스트와 기능 테스트를 분리하세요. 이를 통해 기능적 문제로 인해 주의가 산만해지지 않고 시각적 차이에만 집중할 수 있습니다.
예상되는 시각적 차이를 허용합니다.
모든 시각적 차이가 버그는 아닙니다. 전체 사용자 경험에 영향을 주지 않을 수 있는 글꼴 렌더링 변형과 같은 사소한 UI 변경을 설명하기 위해 허용 가능한 시각적 변형에 대한 허용 수준을 설정합니다.
동적 콘텐츠 처리
광고, 사용자 생성 콘텐츠, 실시간 데이터 등의 동적 콘텐츠를 적절하게 처리합니다. 이러한 요소를 비교에서 제외하거나 이러한 동적 변경 사항을 설명하기 위해 참조 이미지를 업데이트해야 할 수도 있습니다.
스마트 대기 전략
스크린샷을 캡처하기 전에 앱의 UI 요소가 완전히 로드되었는지 확인하는 스마트 대기 전략을 구현하세요. 이는 불완전하거나 부분적으로 로드된 화면으로 인해 발생하는 잘못된 긍정을 방지하는 데 도움이 됩니다.
병렬 실행
가능하다면 여러 장치와 플랫폼에서 시각적 회귀 테스트를 병렬로 실행하세요. 이를 통해 전체 테스트 시간이 줄어들고 잠재적인 시각적 불일치에 대한 더 빠른 피드백이 보장됩니다.
자동화된 보고 및 알림
시각적 불일치가 감지되면 팀에 알리도록 자동화된 보고 및 알림을 설정하세요. 이를 통해 빠른 조치가 보장되고 문제 해결에 소요되는 시간이 최소화됩니다.
정기 테스트 유지보수
앱이 발전함에 따라 참조 이미지를 업데이트하고 의도적인 시각적 변화를 수용하도록 테스트를 조정하세요. 시각적 회귀 테스트를 정기적으로 검토하고 유지하여 관련성이 유지되는지 확인하세요.
결과 검토 및 검증
차이점을 실제 문제로 간주하기 전에 스크린샷을 수동으로 검토하여 차이점이 실제 버그인지 아니면 동적 콘텐츠나 사소한 시각적 변경으로 인한 오탐지인지 확인하세요.
지속적인 개선
시각적 회귀 테스트 전략을 지속적으로 평가하고 필요에 따라 조정하세요. 테스트 프로세스의 효율성을 보장하기 위해 최신 도구, 라이브러리 및 모범 사례를 지속적으로 업데이트하세요.
결론
의도하지 않은 변경 사항을 식별하거나, 수동 QA 노력을 줄이거나, 단순히 다양한 장치 및 해상도 전반에 걸쳐 시각적 일관성을 향상시키려는 경우 VRT는 테스트 무기고에 없어서는 안될 도구입니다. 모든 기술과 마찬가지로 미묘한 차이를 익히는 데는 시간이 걸리지만 시간 절약, 오류 감소, 보다 원활한 사용자 경험 측면에서 얻을 수 있는 이점은 엄청날 수 있습니다. 그럼 왜 기다려? 지금 VRT 및 Appium을 시작하고 모바일 애플리케이션 테스트를 한 단계 더 발전시키세요.