guide visual regression testing with visual testing tools
이 포괄적 인 가이드는 시각적 회귀 테스트에 대한 모든 것을 설명합니다. 또한 Applitools, Percy, Screener 등과 같은 무료 및 상용 시각적 테스트 도구에 대한 검토가 포함됩니다.
시각적 회귀 테스트 또는 소프트웨어의 시각적 테스트는 애플리케이션 사용자 인터페이스의 시각적 측면이 사용자에게 적절하게 보이는지 확인하는 품질 보증 활동입니다. Visual Validation Testing이라고도합니다.
애플리케이션의 프런트 엔드에 올바른 데이터와 콘텐츠가 표시되는지 확인하는 것을 목표로합니다. 또한 사용자 인터페이스와 전체 UI 자체에있는 각 시각적 요소의 레이아웃과 모양을 확인합니다.
학습 내용 :
시각적 회귀 테스트
Layout의 정확성에 대해 이야기 할 때 화면에있는 각 요소의 위치, 모양 및 크기가 정확하다는 것을 의미합니다. 요소는 서로 겹치지 않아야하며 표시되고 숨겨져서는 안됩니다.
여기서 시각적 요소는 이미지, 페이지, 페이지의 일부 또는 이미지의 일부를 나타낼 수 있습니다.
모양을 확인하는 것은 시각적 요소의 글꼴, 색상, 밝기, 대비, 밀도, 질감, 시각적 무게, 그래픽 등이 적절하게 표시되어야 함을 의미합니다.
시각적 회귀 테스트 란 무엇입니까?
회귀 테스트는 소프트웨어에 도입 된 변경 사항으로 인해 이전에 제대로 작동하던 내용이 손상되지 않는지 확인합니다.
시각적 테스트의 경우 시각적 회귀 테스트를 통해 소프트웨어에서 변경이 수행 될 때 스타일 문제가 나타나지 않도록합니다. 응용 프로그램은 계속해서 예전처럼 보일 것입니다.
시각적 회귀 테스트 도구는 현재 UI의 스크린 샷을 캡처하여 원본 스크린 샷과 비교합니다. 따라서 시각적 회귀 테스트는 역사적 차이를 살펴 봅니다. 코드를 수정 한 후에도 다양한 브라우저에서 웹 페이지가 여전히 예상대로 렌더링되는지 확인합니다.
다음은 자동화 된 도구를 통해 실행 된 시각적 회귀 테스트의 화면 인쇄입니다.
수동 테스트에서 웹 애플리케이션에 대한 테스트 케이스
(영상 출처 )
오늘날의 지속적인 통합 관행에서 시각적 회귀 테스트는 애플리케이션이 버전마다 발전하고 브라우저에서 진행될 때 새로운 변경 사항으로 인해 레이아웃이 엉망이되지 않도록하는 데 매우 중요합니다.
많은 조직에서 시각적 회귀 테스트를 사용하여 특정 웹 페이지의 버전을 기록하여 한 반복에서 다른 반복으로 어떻게 변경되는지 문서화합니다.
시각적 검증 테스트의 중요성
애플리케이션의 기능이 아무리 올바르게 작동하더라도 좋은 사용자 인터페이스와 사용자 경험을 제공하지 않는 한 고객은 사용할 수 없습니다.
요즘 우리는 UI (사용자 인터페이스)에 대해 이야기 할뿐만 아니라 UX (사용자 경험)에도 집중하고 있습니다. 더 나은 사용자 경험을 제공하는 것을 목표로 할 때 더 매력적인 시각적 디자인이 사용자에게 더 유용하다고 인식 될 수 있기 때문에 시각적 테스트가 훨씬 중요해집니다.
Amazon 웹 사이트에서 아래 예를 보겠습니다.
(영상 출처 )
위 이미지에서 텍스트와 이미지가 겹치고 제대로 정렬되지 않은 것을 알 수 있습니다. 이는 고객이 웹 사이트에서 의도 한 작업을 완료 할 수 없기 때문에 나쁜 사용자 경험을 만들 수있는 시각적 버그의 예입니다.
시각적 디자인은 다양한 방식으로 사용자 경험을 형성합니다.
예를 들어
- 훌륭한 시각적 디자인은 신뢰와 신뢰를 구축하는 데 도움이됩니다.
- 브랜드 이미지를 강화합니다.
- 가독성에 영향을 미칩니다.
- 화면에 시각적 균형을 형성합니다.
- 사용자를 행동으로 안내합니다.
- 눈이 특정 페이지 요소로주의를 돌리도록 설득합니다.
또한 오늘날 우리는 매우 다양한 운영 체제, 웹 브라우저, 화면 해상도 및 장치를 보유하고 있으므로 이러한 조합의 가능한 각 조합에서 UI가 올바르게 표시되는지 확인하는 것이 중요합니다.
UI의 작은 왜곡조차도 비즈니스 손실을 초래할 수 있습니다. 시각적 버그는 사용자에게 성 가시고 불쾌 할 수 있으며 불편을 줄 수 있습니다.
당신이 뱅킹 비즈니스에 종사하고 있고 고객에게 온라인 모바일 뱅킹 애플리케이션을 제공한다고 가정합니다.
일부 고객으로부터 다른 사람의 계좌로 돈을 이체하려고 할 때 필요한 정보를 모두 입력 한 후 해당 정보를 찾을 수 없다는 불만을 ‘제출’ 화면에 버튼을 클릭하고 이것은 그들에게 짜증나는 경험입니다.
문제를 조사 할 때 제출 버튼이 Android 모바일의 특정 화면 해상도에 숨겨져 있다는 것을 알게되었으며, 이로 인해 특정 화면 크기의 Android 휴대 전화를 사용하는 모든 고객이 제출 버튼을 볼 수 없었습니다.
따라서이 경우 애플리케이션의 기능은 제대로 작동했지만 시각적 버그로 인해 사용자가 앱에서 의도 한 작업을 완료 할 수 없었습니다. 이 예제는 고객에게 애플리케이션을 제공하기 전에 가능한 모든 구성에서 애플리케이션의 시각적 측면을 테스트하는 것이 얼마나 중요한지 보여줍니다.
시각적 검증 테스트가 적극 권장되는 일부 영역은 다음과 같습니다 (브랜드에 직접적인 영향을 미치기 때문).
- 모바일 앱
- 모바일 웹 / 반응 형 웹
- 마케팅 웹 사이트
- 콘텐츠 관리 시스템
- 항공사, 여행, 은행 등과 같은 소비자 시스템
그 중요성을 감안할 때 회사는 시각적 테스트에 상당한 노력과 비용을 투자해야합니다. 기존 개발자 테스트와 함께 사용하면 개발 수명주기의 초기 단계에서 시각적 문제를 감지하는 데 도움이됩니다.
시각적 테스트 방법 및 프로세스
개발자 또는 테스터로서 우리는 종종 애플리케이션의 기능을 테스트하는 작업을합니다. 수동 또는 일부 자동화 도구를 통해 애플리케이션이 예상대로 작동하는지 확인합니다. 이러한 기능 테스트는 애플리케이션의 원활한 작동을 보장하는 데 매우 중요합니다.
그러나 여기에 시각적 테스트를 추가하면 전체 테스트가 크게 향상됩니다. 따라서이 테스트는 종종 기능 테스트와 함께 수행됩니다.
광범위한 구성에서 애플리케이션의 시각적 테스트 문제를 해결하기위한 몇 가지 테스트 방법과 프로세스가 있습니다. 시각적 유효성 검사 테스트를 지원하는 데 사용할 수있는 많은 도구도 있습니다.
일반적으로 시각적 유효성 검사 테스트에는 코드 기반 및 구성 기반의 두 가지 주요 접근 방식이 있습니다. 시각적 테스트 도구도이 두 가지 접근 방식에 따라 분류됩니다.
수동 또는 자동 방식으로 수행 할 수 있습니다. 관련된 특정 문제로 인해 완전 수동 또는 완전 자동화가 될 수 없습니다. 일반적으로 수동 및 자동 접근 방식의 조합이 선호됩니다.
다음은 일반적으로 따르는 세 가지 시각적 테스트 방법입니다.
팀은 필요에 따라 다음 옵션 중 하나를 선택할 수 있습니다.
# 1) 전용 시각적 테스트 만들기 : 시각적 유효성 검사를 완벽하게 제어 할 수 있으므로 가장 권장되는 방법입니다. 또한이 접근 방식을 사용하면 적당한 노력으로 테스트를 작성할 수 있습니다. 그러나 예, 테스트를 처음부터 작성해야하며 상당한 시간이 필요합니다.
# 2) 기존 기능 테스트에 시각적 체크 포인트 삽입 : 이 방법에서는 이미 응용 프로그램의 기능을 확인하기위한 테스트가 있으며 이러한 테스트 사이에 몇 가지 시각적 검사를 추가하여 페이지를 확인합니다.
물론이 방법은 테스트 범위를 제한하지만 시각적 테스트를 빠르게 삽입하고 기존 기능 테스트 코드의 이점을 활용하는 방법입니다.
# 3) 기존 테스트 프레임 워크에 암시 적 시각적 유효성 검사 삽입 : 이 메서드는 몇 줄의 코드 만 필요하므로 구현하기가 매우 쉽습니다. 그러나이 경우 일반 유효성 검사를 수행 할 수도 있다는 제한이 있습니다. 프레임 워크에서 특정 구성 요소의 유효성을 검사 할 수 없습니다.
계속 진행하면서 수동 및 자동 시각적 테스트에 대해 설명합니다. 또한 시각적 테스트 도구 및 프레임 워크를 자세히 확인합니다.
수동 시각적 테스트
소프트웨어 회사는 시각적 테스트를 수행하는 두 가지 옵션 (수동 테스트 또는 자동 테스트)에 직면 해 있습니다. 수동 시각적 테스트를 자세히 살펴 보겠습니다.
수동 테스트는 느리고 비용이 많이 들고 오류가 발생하기 쉬울 수 있지만 인터페이스 디자인의 주관적인 특성으로 인해 모든 시나리오의 정확성을 캡처하는 자동화 된 테스트가 불가능한 경우가 많습니다. 따라서 때때로 우리는 수동 테스트와 자동화 테스트 사이의 균형을 선택해야합니다.
또한 사람에 의한 수동 테스트의 주요 이점 중 하나는 테스트 범위를 벗어날 수 있습니다. 자동화 테스트는 해당 범위에있는 문제 만 캡처 할 수 있지만 수동 테스트에서 인간 테스터는 UI에서 잘못 보이는 다른 외관 버그 및 기타 사항을 찾아 낼 수도 있습니다.
수동 테스트는 실제 사용자 작업에 더 가깝기 때문에 실제 사용자가 애플리케이션과 상호 작용할 때 일반적으로 발견되는 레이아웃 버그 및 디자인 문제를 캡처 할 수 있습니다.
UI가 불안정 할 때 애플리케이션 개발의 초기 단계에서 수동 테스트를 수행 할 수 있습니다. 또한 신속한 현장 검진이 필요한 경우 임시 테스트에 유용합니다.
수동 시각적 검증 테스트에서 테스터는 시각적 요소의 모양과 레이아웃을 수동으로 확인해야합니다. 여기에는 현재 스크린 샷을 촬영 한 다음이를 기준 스크린 샷과 수동으로 비교하여 간격을 식별하는 것이 포함될 수 있습니다.
수동 테스트를 수행하는 또 다른 효과적인 방법은 구성 요소 탐색기를 사용하는 것입니다. 여기에서 테스트 상태를 정의하고 탐색기를 사용하여 상태 및 구성 요소를 선택하고 화면에서 확인합니다. 이러한 도구 중 하나는 UI 구성 요소를 별도로 개발할 수있는 React Storybook입니다.
이 방법을 통해 테스터는 구성 요소의 수동 테스트를 실행하고 렌더링 방법을 확인하고 제대로 작동하는지 확인할 수 있습니다.
수동 테스트 단계 :
- 앱을 탐색하고 알려진 양호한 기준 스크린 샷을 캡처합니다.
- 나중에 최신 버전의 앱에서 다른 스크린 샷 세트를 찍습니다.
- 이제이 스크린 샷 (기준 대 현재)을 수동으로 비교하여 시각적 버그를 파악합니다.
자동화 된 시각적 테스트
자동화 된 시각적 테스트는 사용자 인터페이스가 의도 한대로 시각적으로 나타나는지 자동으로 확인하는 방법입니다.
시각적 테스트 자동화의 이점은 장기적인 비용 효율성을 제공하고, 수동 테스트보다 빠르며, 인적 오류를 배제하고 픽셀 단위의 완벽한 시각적 테스트를 제공 할 수 있기 때문에 더 정확하고, 다음과 같은 자동 보고서를 제공하므로 재사용 가능하고 투명하다는 것입니다. 팀의 모든 사람이 쉽고 쉽게 액세스 할 수 있습니다.
자동화 된 시각적 테스트의 제한 사항 중 일부는 초기 비용이 많이들 수 있으며 모든 변경 사항을 수용하려면 테스트 유지 관리에 상당한 노력을 기울여야한다는 것입니다.
자동화 테스트에서는 스크린 샷 테스트가 없으면 범위가 더 좁습니다. 또한 조직이 자동화 테스트 도구에 대해 배우는 데 시간이 걸리기 때문에 학습 곡선이 가파 릅니다.
안정적인 UI에 자주 발생하는 변경 사항을 처리하기 위해 회귀 시각적 테스트를 수행해야하는 경우 자동화를 사용하는 것이 좋은 선택입니다. 자동화 된 테스트는 시각적 인 스크린 샷 비교에도 도움이됩니다.
자동화 된 스크린 샷 비교는 시각적 테스트에서 높은 정밀도를 제공하고 ROI를 높입니다. 자동화 된 스크린 샷 비교는 사람의 눈과 수동 비교로 감지 할 수없는 버그를 캡처 할 수 있습니다. 복잡한 사용자 스토리에 대한 엔드 투 엔드 테스트에서도 유용합니다.
자동화 된 테스트에 사용할 수있는 다양한 오픈 소스 및 상용 도구가 있습니다.
아래 이미지는 프로그래밍 언어를 사용하여 시각적 유효성 검사를 자동화하는 방법을 보여줍니다.
(영상 출처 )
다음은 Visual Test Automation의 일반적인 워크 플로입니다.
(영상 출처 )
위의 워크 플로 다이어그램에 표시된 것처럼 자동화 된 시각적 테스트에는 4 단계가 포함됩니다.
1 단계 :이 단계에서는 애플리케이션 및 테스트를 구동하고 스크린 샷을 캡처해야합니다.
2 단계 :이 단계에서 자동화 도구는 이러한 스크린 샷을 기준 스크린 샷과 비교합니다. 기본 스크린 샷은 일반적으로 이전 테스트 실행에서 촬영하고 테스터가 입증 한 이미지입니다.
3 단계 : 도구가 이미지 비교 결과를 얻으면 발견 된 모든 차이점을 강조하는 보고서를 생성합니다.
예를 들면아래 이미지는 각도 응용 프로그램의 차이점을 강조하는 테스트 자동화 도구 중 하나를 보여줍니다.
파일 입력 출력 C ++
4 단계 : 마지막 단계에서 테스터는 보고서를 검토하고 각 차이가 버그인지 유효한 변경인지 (거짓 긍정) 확인합니다. 이를 기반으로 기준 이미지가 업데이트됩니다.
첫 번째 테스트 실행에는 기준 이미지가 없습니다. 따라서 첫 번째 실행에서 얻은 이미지는 일반적으로 기본 이미지로 취급됩니다. 다음 실행부터는 스크린 샷과 비교됩니다.
자동화 된 시각적 테스트를위한 모범 사례
- 오 탐지를 무시할 수있을만큼 똑똑한 도구를 선택하십시오. 이 도구는 앤티 앨리어싱, 픽셀 오프셋 등을 처리 할 수 있어야하며 이러한 이유로 인해 테스트에 실패하지 않습니다.
- 테스트 자동화는 동적이고 움직이는 콘텐츠를 처리 할 수 있어야합니다.
- 오류 비율이나 임계 값 구성에 의존하지 마십시오. 중요한 것은 인간이 그 차이를 볼 수 있는지 여부이며 이것이 사용자 경험에 영향을 미칠까요?
- 자동화 알고리즘은 페이지의 구조를 분석 할 수 있어야하며 레이아웃 비교를 수행 할 수 있어야합니다.
- 개별 구성 요소 대신 전체 UI 페이지 유효성 검사를 선호합니다. 이것은 점점 더 나은 보장을 제공합니다. 특정 구성 요소 만 검증하는 경우 예기치 않은 버그를 놓칠 수 있습니다.
자동화 된 테스트 도구 및 시각적 테스트 프레임 워크
오늘날 시장에는 자동화 된 시각적 테스트를위한 다양한 도구 (거의 30 개 이상)가 있습니다. 이러한 도구 중 일부는 오픈 소스이고 일부는 상업용입니다. 이러한 도구의 대부분은 동일한 방식으로 작동하지만 대상 고객에 따라 다른 워크 플로를 추구합니다.
프런트 엔드 개발자의 경우 시각적 테스트와 관련된 두 가지 유형의 프레임 워크가 있습니다. 먼저 테스트를 작성하고 실행할 수있는 테스트 실행기가 필요합니다. 둘째, 사용자 상호 작용을 복제하려면 브라우저 자동화 프레임 워크가 필요합니다. 이 두 프레임 워크를 공동으로 Visual 테스트 코드라고합니다.
이러한 테스트 프레임 워크의 도움으로 개발자는 텍스트 입력이나 버튼 클릭과 같은 실제 사용자 작업을 모방하는 코드를 만듭니다. 테스트 코드에는 관련 지점에서 스크린 샷을 찍는 명령이 있습니다. 테스트가 처음 실행되면 초기 스크린 샷 세트가 촬영됩니다.
이러한 스크린 샷은 응용 프로그램에서 변경 사항이있을 때 비교 기준으로 사용됩니다. 기준이 설정되면 개발자는 백그라운드에서 코드를 실행합니다. 변경 사항이 발견되면 변경 사항의 스크린 샷이 캡처됩니다.
테스트 실행기는이 스크린 샷을 해당 코드 영역의 기준 스크린 샷과 비교합니다. 이미지간에 차이가 발견되면 테스트가 실패로 간주되고 시각적 버그가보고됩니다.
전체 테스트 코드가 실행되면 보고서가 자동으로 생성됩니다. 이 보고서는 인간 테스터가 수동으로 검토하여 기준 이미지와 다른 모든 스크린 샷 이미지를 확인합니다. 일부 도구는 실제 스크린 샷과 예상 스크린 샷의 차이를 강조하기 위해 diff 이미지를 생성합니다.
차이가 코드의 문제로 인해 발생한 경우 개발자는 해당 문제를 수정하고 코드를 다시 실행할 수 있습니다. 애플리케이션 UI의 필수 변경으로 인해 차이가 발생한 경우 개발자는 해당 스크린 샷을 검토하고 향후 테스트를 통과 할 수 있도록 기준 스크린 샷을 업데이트합니다.
Visual Testing에는 무료 및 유료 도구가 모두 포함됩니다. 도구에 대해 자세히 설명하겠습니다.
최고의 시각적 테스트 도구 목록
코드 / 스크립트 기반 오픈 소스 및 무료 도구
다음은 오픈 소스이며 무료로 사용할 수있는 코드 기반 시각적 유효성 검사 도구 목록입니다.
- 팬텀 CSS (UJs CapserJs)
- FBSnapshotTestCase (XCTest 사용)
- 쌍둥이 자리 (JS DSL 사용)
- 바늘 (Python 사용)
- Rspec 페이지 회귀 (Capibara 사용)
- Pix-Diff (JS 및 각도기 사용)
- 셀레늄 시각적 차이 (Java 및 WD 사용)
- 비주얼 리그 레스 (.NET 및 WD 사용)
- VisualCeption (PHP 및 CodeCeption 사용)
- 유령 (JS DSL 사용)
구성 기반 오픈 소스 및 무료 도구
오픈 소스이며 무료로 제공되는 구성 기반 시각적 유효성 검사 도구는 참조 용으로 아래에 나열되어 있습니다.
- BaskstopJS
- dpxdtMake – 설명
- CSSCritic
- 그런트 포토 박스
- VIFF
- 파
- 레프리 콘
- CSS 비주얼 테스트
- 스냅 및 비교
- 그런트 비고
- Galen 프레임 워크
- Automotion
위의 각 도구에 대해 자세히 설명하지는 않겠지 만 가장 좋은 도구에 대해 간략히 설명하겠습니다.
팬텀 CSS 시각적 검증을위한 매우 인기있는 오픈 소스 도구 중 하나입니다. 4,768 개의 GitHub 별이 있습니다. 자동화 된 시각적 회귀 테스트를 지원합니다. CasperJS를 사용하여 스크린 샷을 찍고 Resemble.js를 사용하여 기준 스크린 샷과 비교합니다.
(영상 출처 )
RGB 픽셀 차이를 기반으로 이미지 차이를 생성합니다. 이 도구는 UI를 예측할 수있는 경우에만 유용합니다.
FBSnapshotTestCase 이 카테고리에서 또 다른 인기있는 도구입니다. 880 개의 GitHub 별이 있습니다.
구성된 UIView 또는 CALayer를 캡처하고 render InContext :라는 메서드를 사용하여 해당 콘텐츠의 이미지 스냅 샷을 획득합니다. 이 이미지를 소스 코드 저장소에 보관 된 '참조 이미지'와 비교하고 두 스냅 샷이 일치하지 않는 경우 테스트에 실패합니다.
BackstopJS 구성 기반 도구 범주에서 선도적 인 도구입니다. CSS Curveball을 잡습니다. 시간이 지남에 따라 DOM 스크린 샷을 일치시켜 반응 형 웹 UI를 테스트 할 수있는 시각적 회귀 테스트를위한 자동화 도구입니다.
브라우저 내보고 UI, 통합 된 Docker 렌더링, JUnit 보고서, CLI 보고서 등과 같은 몇 가지 훌륭한 기능을 갖춘 사용하기 쉬운 도구입니다.
Galen 프레임 워크는 시각적 유효성 검사 테스트를위한 유명한 오픈 소스 프레임 워크 중 하나입니다. 이 도구를 사용하여 자동화 된 방식으로 웹 앱의 레이아웃과 반응 형 디자인을 테스트 할 수 있습니다.
(영상 출처 )
이 프레임 워크는 셀레늄 그리드에서 잘 실행됩니다.
이제 Visual Test Automation에 사용할 수있는 몇 가지 상용 도구 및 프레임 워크에 대해 논의 해 보겠습니다!
상용 도구
# 1) Applitools
자동화 된 시각적 테스트 및 시각적 회귀 테스트를위한 매우 인기있는 상용 프레임 워크 중 하나입니다. 이 도구는 AI 기반인지 비전을 제공합니다. 인공 지능을 사용하여 종단 간 시각적 테스트 및 모니터링을 지원합니다.
Applitools를 사용하면 코드를 작성하지 않거나 최소한의 코드로 모든 플랫폼 및 구성에서 수백 개의 UI 구성 요소를 자동으로 테스트 할 수 있습니다. 40 개 이상의 테스트 프레임 워크 및 언어를 지원합니다.
또한 시각적 테스트 사례를 CI / CD 파이프 라인에 쉽게 통합 할 수있는 DevOps 프로세스를 지원합니다. 이 도구를 사용하면 사용자 지정 시각적 보고서를 만들 수도 있습니다.
이 프레임 워크는 Sony, SAP, MasterCard 및 PayPal을 포함한 일부 상위 회사에서 사용하고 있습니다. 매우 긍정적 인 고객 리뷰도 있습니다.
공급 업체는이 프레임 워크의 세 가지 버전 즉, Starter, Enterprise Public Cloud 및 Enterprise Dedicated Cloud를 제공합니다. 가격은 공급 업체에 문의해야합니다.
웹 사이트 : Applitools
# 2) 크로스 브라우저 테스트 비주얼 테스트
Crossbrowsertesting은 전체 테스트 프로세스를 위해 SmartBear에서 개발 한 웹 테스트 플랫폼입니다. 이 도구는 시각적 테스트와 시각적 회귀 테스트를 다룹니다.
이 도구에서 제공하는 스크린 샷 테스트 기능은 전체 페이지 스크린 샷을 캡처하고 시각적 버그를 찾고 시각적 불일치를 추적하는 데 빠르게 도움이됩니다. 스크린 샷 테스트를 시작하려면 URL을 제공하고 일부 브라우저를 선택해야합니다.
스크린 샷 테스트는 대부분의 데스크톱 장치와 널리 사용되는 모바일 장치에서 사용할 수 있습니다. 데스크톱 브라우저 및 모바일 방향에서 동적 응답 테스트를 위해 브라우저 해상도를 혼합하고 일치시킬 수 있습니다. 스크린 샷 테스트는 각 구성의 세 가지보기 (예 : Windowed, Full-page 및 Full-page chromeless)를 캡처합니다.
테스트 결과를 빠르게 필터링하고 시각적 버그를 볼 수 있습니다. 라이브 테스트로 이동하여 시각적 결함을 디버그하거나 수정할 수도 있습니다. 이 소프트웨어에서 제공하는 로컬 연결 도구를 통해 로컬 및 개발 환경을 테스트 할 수 있습니다.
시각적 회귀 테스트의 경우 스크린 샷 테스트를 성공적으로 실행 한 후 매일, 매주 또는 매월 예약 할 수 있습니다. 이 도구는 테스트 결과 알림도 보냅니다.
이 도구에는 다양한 구성에서 동일한 페이지의 자동화 된 스크린 샷을 캡처하는 자동화 된 비교 엔진이 있습니다. 여기에서 기준 브라우저를 선택한 다음 강조 표시된 레이아웃 차이를 함께 평가할 수 있습니다.
또한 테스트를 더욱 강력하게 만드는 몇 가지 고급 옵션을 제공합니다. 이러한 옵션에는 기본 인증, 로그인 프로필, Selenium 스크립트, 스크린 샷 지연, 이메일 보내기, 고정 요소 숨기기 등이 포함됩니다.
또한 읽기 = >> Selenium에서 스크린 샷을 찍는 방법
이것은 가격이 책정 된 도구입니다. 그러나 무료 평가판도 사용할 수 있습니다. 이 도구의 라이브 테스트 버전은 $ 29 / 월, 자동 테스트의 가격은 $ 60 / 월, 무제한 테스트의 가격은 $ 100 / 월입니다.
웹 사이트 : 크로스 브라우저 테스트
# 3) 퍼시 비주얼 테스트
Percy는 자동화 된 시각적 테스트를위한 강력한 도구 중 하나입니다. 이를 통해 시각적 테스트를 통합, 실행 및 검토 할 수 있습니다. 통합은 테스트 자동화 프레임 워크, CI / CD 서비스를 통해 수행하거나 애플리케이션을 통해 직접 수행 할 수 있습니다.
통합 후 응용 프로그램 및 구성 요소에 필요한 시각적 테스트 실행을 시작할 수 있습니다. 시각적 테스트가 시작되면 Percy 도구는 다양한 브라우저와 반응 형 너비에서 UI 스크린 샷을 추출합니다. 그런 다음 픽셀 단위 기준선 비교를 수행하고 UI의 관련 시각적 변경 사항을 식별합니다.
스크린 샷이 렌더링되면 시각적 문제를 검토 할 수 있습니다.
이 도구에서 제공하는 픽셀 별 차이 및 반응 형 차이는 시각적 범위가 넓습니다. 또한 스냅 샷 안정화 기능은 오탐을 최소화합니다.
이것은 유료 도구입니다. 그러나 무료 평가판도 제공합니다. 유료 버전에는 Essential, Business 및 Enterprise의 세 가지 버전이 있습니다. Essential 버전의 가격은 $ 29 / 월이고 Business 버전은 $ 849 / 월이며 Enterprise 버전은 필요에 따라 맞춤 제작되므로 그에 따라 가격이 달라집니다.
웹 사이트 : 퍼시 비주얼 테스트
# 4) Screener.io
이것은 클라우드에서 실시간으로 테스트를 기록하고 실행할 수있는 자동화 된 테스트 도구입니다. 코딩없이 테스트 흐름을 쉽게 자동화 할 수 있습니다. 다양한 플랫폼에서 UI 불일치를 자동으로 발견합니다. 또한 스토리 북 구성 요소 테스트를 지원합니다.
동일한 테스트 실행에서 기능 테스트와 결합하여 시각적 테스트를 수행 할 수 있으므로 전체 테스트 범위가 증가합니다. screener.io를 사용하는 회사에는 Yammer, Microsoft, uber 등이 있습니다.
이 도구의 스타터 팩은 약 $ 249 / 월, Perform 팩의 가격은 $ 499 / 월, Enterprise 팩은 요구 사항에 따라 맞춤 가격이 책정됩니다.
웹 사이트 : Screener.io
# 5) 최종 테스트
endtest는 기계 학습의 도움으로 코드없는 자동화 테스트를 지원하는 UI 테스트 플랫폼입니다. 이를 통해 자동화 된 테스트를 신속하게 생성하고 클라우드에서 직접 저장 및 실행할 수 있습니다. 또한 테스트를 기록 할 수있는 크롬 확장 기능도 있습니다.
이 도구에는 무작위 테스트 데이터 생성, 고급 어설 션, 자동 백업, 위치 정보, 라이브 비디오, 스크린 샷 비교 등과 같은 많은 기능이 있습니다.
웹 사이트 : endtest
결론
이 자습서에서는 소프트웨어 응용 프로그램이 화면 크기, 모바일 장치, 운영 체제, 화면 해상도 등의 여러 구성에서 제대로 작동해야하는 오늘날의 시나리오에서 시각적 유효성 검사 테스트가 얼마나 중요한지 논의했습니다.
PL SQL 개발자 인터뷰 질문 및 답변
좋은 사용자 경험을 원한다면 시각적 유효성 검사 테스트는 기능 테스트만큼 중요합니다. 시각적 테스트와 기능 테스트를 결합하면 광범위한 테스트 범위를 제공 할 수 있습니다.
시각적 검증 테스트에 사용할 수있는 다양한 오픈 소스 및 상용 도구 및 프레임 워크가 있습니다. 이 튜토리얼에서 최고의 도구에 대해 논의했습니다. 이러한 도구는 실제로 자동화 된 시각적 테스트 및 시각적 회귀 테스트에 도움이 될 수 있습니다.
행복한 독서!