- 인쇄
- 어두운빛
개요
Autify에서는 요소에 대해 시각적 회귀 테스트를 수행할 수 있습니다. 대상 요소의 현재 스크린샷과 과거 테스트 실행에서 생성된 참조 이미지를 비교하는 시나리오에 요소가 동일하게 표시되어야 한다
는 어설션 명령을 추가할 수 있습니다. 뷰포트에 들어갈 수만 있다면 이미지나 테이블, DIV 등 화면의 모든 종류의 요소를 어설션으로 선택할 수 있습니다.
'요소가 동일하게 표시되어야 함' 단계의 테스트를 실행할 때 최신 스크린샷과 참조 이미지가 픽셀 단위로 비교했을 때 일치하지 않으면 테스트가 실패합니다. 이러한 경우 결과를 검토하여 예상된 변경으로 인해 차이가 발생했는지 확인하세요. 예상된 변경 사항이었다면 "변경 사항 수락"을 클릭합니다. 다음 실행에 사용할 참조 이미지를 업데이트하는 데 필요한 모든 작업이 완료되었습니다!
엘리먼트에 대한 시각적 회귀 테스트는 Chrome/Linux 환경에서만 작동합니다. 다른 환경에서 실행할 경우 '요소가 동일하게 보여야 함' 단계는 건너뜁니다.
엘리먼트에 대한 시각적 회귀 테스트 수행하기
시나리오 기록
새 시나리오 페이지 또는 시나리오 세부 정보 페이지에서 녹화를 시작합니다. 자동 레코더에서 확인란(☑️)을 클릭하고 어설션을 생성할 요소를 선택합니다. 그런 다음 어설션 명령 목록에서 요소가 동일하게 표시되어야 함
을 선택합니다.
시나리오를 저장하면 시나리오에 새로운 '요소는 동일하게 표시되어야 함' 단계가 표시됩니다. 이 단계에는 썸네일이 없지만 첫 번째 실행 후에는 참조 이미지가 표시됩니다.
테스트를 두 번 실행
준비가 완료되면 시나리오를 실행합니다. 첫 번째 실행 시에는 아직 비교할 참조 이미지가 없으므로 다음과 같은 메시지와 함께 요소가 동일하게 보여야 함
단계가 건너뜁니다: 첫 번째 실행에서는 이 단계를 건너뜁니다. 참조 이미지가 생성되고 이후 테스트에서는 이 참조 이미지와 요소를 비교합니다.
시나리오의 단계별 상세 내용을 보면 첫 번째 실행에서 생성된 참조 이미지를 검토할 수 있습니다.
다음으로 시나리오를 다시 실행하여 어설션을 수행합니다. 이번에는 '요소가 동일하게 보여야 함' 단계에서 이전에 테스트 실행에 성공했을 때 생성한 참조 이미지와 현재 이미지를 비교합니다!
'요소는 동일하게 보여야 합니다'의 스크린샷을 열어 나란히 비교합니다. '차이' 탭을 클릭하면 요소의 이미지를 서로 비교하여 볼 수 있습니다.
시각적 회귀 차이 임계값
시각적 회귀 차이 임계값 기능을 사용하면 테스트가 실패로 표시되기 전에 참조 이미지와 현재 이미지 간의 차이를 허용할 수 있는 정도를 제어할 수 있습니다. 이 기능은 시나리오의 단계 세부 정보에서 찾아서 구성할 수 있습니다.
사용자는 0~100 범위의 차이 임계값을 설정하여 테스트 통과에 허용되는 최대 차이 비율을 지정할 수 있습니다.
예제
임계값을 1%로 설정하면 이미지 간의 차이(Diff 점수)가 1% 이하인 경우 테스트가 통과됩니다. 차이 점수가 임계값을 초과하면 테스트가 실패하여 시각적으로 더 큰 변화가 있음을 나타냅니다.
성공
Fail
이 기능은 시각적 외관의 사소하고 관련 없는 변화로 인한 오탐을 줄이는 데 특히 유용합니다. 시각적 회귀 테스트에서 허용되는 항목을 보다 유연하게 결정할 수 있습니다.
변경 사항 수락
현재 스크린샷이 참조 이미지와 정확히 일치하거나 설정된 차이 임계값에 속하면 '요소는 동일하게 보여야 함' 단계가 통과됩니다. 그렇지 않으면 단계가 실패합니다. 다음 스크린샷은 요소가 동일하게 보여야 함
단계의 실패를 보여줍니다.
그러나 모양이 변경된 것을 받아들이고 나중에 이 결과를 참조 이미지로 사용하고 싶을 때가 있을 것입니다. 그래서 '변경 사항 수락' 버튼이 있는 것입니다.
이 버튼을 클릭하면 테스트 결과 자체의 상태에는 영향을 미치지 않지만 이 '요소가 동일하게 보여야 함' 단계의 참조 이미지가 업데이트됩니다.
다음에 테스트를 실행할 때 새 참조 이미지가 비교에 사용됩니다. 요소의 예상 모양을 쉽게 변경할 수 있습니다.
사용 시 참고 사항
텍스트에 대한 어설션 만들기
이 기능을 사용하여 텍스트에 대해 어설션을 만들 수 있지만 Autify에서 글꼴 렌더링으로 인해 발생하는 미세한 차이를 감지하여 어설션 단계가 실패할 수 있습니다.
따라서 텍스트에 대해 어설션을 수행하려면 "요소 텍스트가 있어야 함" 명령과 같은 텍스트 어설션을 사용하는 것이 좋습니다.
색상에 대한 어설션 만들기
이 기능을 사용하여 색상에 대한 어설션을 만들 수 있지만, 색상 변경 유형에 따라 Autify가 색상 변경을 놓칠 수 있으므로 변경이 있어도 성공적인 단계가 될 수 없습니다. 색상 어설션에는 JS 단계를 사용하는 것이 좋습니다.
시각적 회귀 테스트 기능을 즐겁게 사용하시길 바라며 여러분의 피드백을 기다리겠습니다!