눈은 거짓말을 하지 않기 때문에 - Applitools를 사용한 시각적 테스트

게시 됨: 2021-08-17

회귀 테스트는 소프트웨어에 도입된 변경 사항으로 인해 이전에 잘 작동하던 것이 손상되지 않도록 합니다. 시각적 회귀 테스트를 통해 변경된 사항으로 인해 GUI 문제가 발생하지 않았는지 확인합니다. 응용 프로그램은 수정 사항이 도입되기 전의 모습이어야 합니다. 시각적 회귀 테스트 도구는 현재 UI의 스크린샷을 캡처하고 원본 스크린샷과 비교합니다. 과거 극성을 살펴보고 수정 후에도 다양한 브라우저에서 웹 페이지가 여전히 예상대로 렌더링되는지 확인합니다. Applitools Eyes는 독점적인 인지 비전 기술로 구동되는 시장에서 가장 인기 있는 시각적 테스트 도구 중 하나입니다.

Applitools는 웹, 모바일 및 기본 앱의 모든 시각적 측면을 자동으로 검증하는 클라우드 기반 소프트웨어 테스트 도구인 Applitools Eyes를 개발했습니다. 이러한 검증은 수동 테스터가 수행하는 검증과 유사합니다. Applitools 기술은 UI 레이아웃, 콘텐츠 및 모양의 정확성을 자동으로 검증하고, 이를 통해 수동으로만 수행할 수 있는 테스트를 자동화할 수 있습니다. 주어진 브라우저, 장치, OS 및 프로그래밍 언어, 화면 해상도 및 폼 팩터에서 앱을 테스트할 수 있습니다.

Applitools Eyes 시스템 개요

다양한 테스트 환경은 Applitools의 다양한 Eye 구성 요소와 상호 작용하여 시각적 UI 테스트를 구현합니다. 시스템은 다음 구성 요소로 구성됩니다.

테스트 중인 애플리케이션(AUT).
AUT에 대해 실행되고 정확도를 확인하는 테스트 모음입니다.
SDK는 테스트 스위트 코드에서 호출되어 스크린샷 캡처 및 시각적 검사를 트리거합니다.
AUT에 보낼 수 있는 테스트 슈트를 구축하기 위한 프레임워크를 제공하는 Selenium 또는 Appium과 같은 애플리케이션 드라이버. 또한 이를 사용하여 스크린샷을 캡처합니다.
서버는 SDK에서 보낸 스크린샷을 수신하고 저장합니다. 저장된 기준 이미지와 비교하고 차이점을 보고합니다.
Eyes Test Manager는 사용자에게 검토할 수 있는 테스트 결과를 제공하고 사용자가 버그를 보고하고 기준 이미지를 관리할 수 있도록 도와줍니다.

다음은 테스트 팀이 테스트 결과를 보고 관리할 수 있도록 구성 요소가 상호 작용하여 테스트를 실행하는 방법의 예입니다.

크레딧 : Applitools

1단계: 테스트 팀이 테스트 스위트를 실행합니다. 코드는 일반적으로 다양한 애플리케이션 상태에 대해 다음 단계를 반복합니다.

2.1단계: Selenium 또는 Appium과 같은 드라이버를 사용하여 마우스 클릭, 키보드 입력 등과 같은 사용자 동작을 시뮬레이션합니다.

2.2단계: 동시에 시각적 체크포인트를 수행하기 위해 Eyes SDK API가 호출됩니다.

2.2.a 단계: Eyes SDK는 드라이버를 사용하여 스크린샷을 수집합니다.

2.2.b 단계: 그 후 Eyes SDK는 수집된 이미지를 Eyes 서버로 보냅니다. 여기에서 이미지와 다른 체크포인트 이미지는 이전에 서버에 저장된 기준 이미지와 비교됩니다.

3단계: 테스트의 이미지가 처리되면 Eyes Server는 관찰된 차이점에 대한 정보를 제공합니다. 이와 함께 결과를 볼 수 있는 Eyes 사이트에 대한 링크가 제공됩니다.

4단계: 테스트 팀은 Eyes Test Manager를 사용하여 테스트 결과를 보고, 기준선을 업데이트하고, 버그를 보고하고, 특별한 처리가 필요한 영역에 주석을 추가합니다. 모든 결과를 본 후 테스트 팀은 기준선을 저장합니다. 이것은 다음 테스트 실행에서 비교의 기초가 됩니다.

Applitools에는 웹, 모바일 및 데스크탑 테스트 자동화 프레임워크, 다양한 애플리케이션 드라이버 인프라, 프로그래밍 언어 및 모든 공통 플랫폼, 브라우저 및 운영 체제와 같이 널리 사용되는 광범위하게 지원하는 SDK가 있습니다. 이러한 SDK는 AUT와 직접 상호 작용하지 않으므로 Eyes는 애플리케이션 구현 및 배포 방식과 완전히 독립적입니다.

Applitools Eyes의 호환성

Applitools에는 웹, 모바일, 데스크탑, PDF, TV OS, IoT, 이미지 등에 대한 전체 테스트 범위를 제공하는 모든 인기 있는 프로그래밍 언어 및 테스트 러너용 SDK가 있습니다.

웹 SDK

WEB SDK는 모든 주요 웹 테스트 도구 및 프로그램을 지원합니다.

-Java, JavaScript, C#, Ruby, PHP, Python용 Selenium
WebdriverIO4, WebdriverIO5, WebdriverIO6
셀레늄 IDE
사이프러스
극작가(신규 추가)
인형극(신규 추가)
테스트카페
Storybook CSF React(신규 추가), Storybook -React, Angular, Vue
와티르
카피바라
각도기(신규 추가)
UFT/QTP
린 CFT#, 린 자바스크립트
코딩된 UI

모바일 SDK

모바일 SDK는 모든 주요 모바일 테스트 도구 및 프로그램을 지원합니다.

Appium 네이티브 – C#, Java, JavaScript, PHP, Python, Ruby
Appium 웹 - C#, Java, JavaScript, PHP, Python, Ruby
XCUI 오브젝티브-C, XCUI 스위프트
에스프레소
Calabash iOS 및 Android

스크린샷 SDK

CLI, C#, 자바, 자바스크립트, PHP, Ruby, XCTest Objective-C, XCTest Swift

데스크톱 SDK

Windows UFT, Windows 코딩된 UI

코드리스 도구

PDF 양식, 코드 없는 IDE

Applitools Eyes의 테스트 관리자

Eyes Test Manager는 시각적 UI 테스트 데이터에 대한 액세스를 제공하는 브라우저 기반 도구입니다. 이를 통해 사용자는 테스트 결과, 기준선 및 기타 메타데이터를 관리할 수 있습니다.

Eyes Test Manager는 다음과 같은 기능을 제공합니다.

시각적 UI 테스트 실행 결과에 액세스
기록된 차이 수락 또는 거부
주석으로 단계에 주석 달기
일치 수준 추가 및 지역 무시
기준선 업데이트
애플리케이션 및 테스트 이름 보기 및 관리
기준선 및 분기 보기 및 관리
실행 환경 보기 및 관리
기준 분기 비교 및 병합
계정, 팀 및 사용자 관리

사용자가 테스트 및 테스트 케이스를 구성하는 데 도움이 되는 Eyes에 통합된 다양한 기타 도구 및 개념이 있습니다. 그러한 도구 중 하나가 기준선입니다. 육안 검사 프로토콜은 캡처된 이미지를 이전 테스트 실행에서 기준선에 저장된 이미지와 비교합니다. 각 테스트 실행은 모양과 느낌이 다를 수 있습니다. 눈에는 테스트당 많은 기준선이 있으며 각 기준선은 선택한 환경을 나타냅니다. 이러한 각 기준선은 일련의 이미지 참조를 저장할 수 있습니다.

시각적 테스트가 실행되면 애플리케이션은 일련의 애플리케이션 상태를 통해 구동되고 각 상태에 대해 해당 상태에 대한 애플리케이션 이미지를 캡처하는 체크포인트가 실행됩니다. 눈은 캡처된 이미지 시리즈를 해당 테스트의 기준선에 저장된 일련의 참조 이미지와 비교하고 중요한 차이를 보고합니다. 기준선 내의 이미지는 테스트 실행에 따라 다르지만 운영 체제, 브라우저 유형 및 뷰포트 크기와 같은 다른 요인에 따라 달라질 수도 있습니다. 이러한 요소를 실행 환경이라고 합니다.

뷰포트는 응용 프로그램 창에 있는 모든 응용 프로그램의 시각적 영역입니다. 뷰포트의 크기는 모든 페이지의 레이아웃에도 영향을 줄 수 있습니다. 예를 들어, 브라우저의 치수를 변경하면 렌더링된 텍스트의 모양이 변경될 수 있습니다. 메뉴와 같은 요소가 포함된 반응형 페이지는 크기에 따라 다르게 나타날 수 있습니다. 글꼴 및 이미지 크기는 변경될 수 있습니다. 참고: 뷰포트는 플랫폼에 따라 다릅니다.