요소에 대한 시각적 회귀 테스트
  • 24 Oct 2024
  • 2 읽을 분
  • 기여자
  • 어두운

요소에 대한 시각적 회귀 테스트

  • 어두운

기사 요약

*이 페이지의 일부는 기계 번역되었습니다.

개요

Autify에서는 요소에 대해 시각적 회귀 테스트를 수행할 수 있습니다. 대상 요소의 현재 스크린샷과 과거 테스트 실행에서 생성된 참조 이미지를 비교하는 시나리오에 요소가 동일하게 표시되어야 한다는 어설션 명령을 추가할 수 있습니다. 뷰포트에 들어갈 수만 있다면 이미지나 테이블, DIV 등 화면의 모든 종류의 요소를 어설션으로 선택할 수 있습니다.

'요소가 동일하게 표시되어야 함' 단계의 테스트를 실행할 때 최신 스크린샷과 참조 이미지가 픽셀 단위로 비교했을 때 일치하지 않으면 테스트가 실패합니다. 이러한 경우 결과를 검토하여 예상된 변경으로 인해 차이가 발생했는지 확인하세요. 예상된 변경 사항이었다면 "변경 사항 수락"을 클릭합니다. 다음 실행에 사용할 참조 이미지를 업데이트하는 데 필요한 모든 작업이 완료되었습니다!

참고

엘리먼트에 대한 시각적 회귀 테스트는 Chrome/Linux 환경에서만 작동합니다. 다른 환경에서 실행할 경우 '요소가 동일하게 보여야 함' 단계는 건너뜁니다.

엘리먼트에 대한 시각적 회귀 테스트 수행하기

시나리오 기록

새 시나리오 페이지 또는 시나리오 세부 정보 페이지에서 녹화를 시작합니다. 자동 레코더에서 확인란(☑️)을 클릭하고 어설션을 생성할 요소를 선택합니다. 그런 다음 어설션 명령 목록에서 요소가 동일하게 표시되어야 함을 선택합니다.

Screenshot 2024-09-10 at 13.52.53.png

시나리오를 저장하면 시나리오에 새로운 '요소는 동일하게 표시되어야 함' 단계가 표시됩니다. 이 단계에는 썸네일이 없지만 첫 번째 실행 후에는 참조 이미지가 표시됩니다.

Screen Shot 2023-04-11 at 15.03.44.png

테스트를 두 번 실행

준비가 완료되면 시나리오를 실행합니다. 첫 번째 실행 시에는 아직 비교할 참조 이미지가 없으므로 다음과 같은 메시지와 함께 요소가 동일하게 보여야 함 단계가 건너뜁니다: 첫 번째 실행에서는 이 단계를 건너뜁니다. 참조 이미지가 생성되고 이후 테스트에서는 이 참조 이미지와 요소를 비교합니다.

Screenshot 2024-09-10 at 15.38.11.png

시나리오의 단계별 상세 내용을 보면 첫 번째 실행에서 생성된 참조 이미지를 검토할 수 있습니다.

Screenshot 2024-09-10 at 14.02.56.png

다음으로 시나리오를 다시 실행하여 어설션을 수행합니다. 이번에는 '요소가 동일하게 보여야 함' 단계에서 이전에 테스트 실행에 성공했을 때 생성한 참조 이미지와 현재 이미지를 비교합니다!

Screenshot 2024-09-10 at 15.41.11.png

'요소는 동일하게 보여야 합니다'의 스크린샷을 열어 나란히 비교합니다. '차이' 탭을 클릭하면 요소의 이미지를 서로 비교하여 볼 수 있습니다.

Screenshot 2024-09-10 at 14.10.23.png

Screenshot 2024-09-10 at 14.10.44.png

시각적 회귀 차이 임계값

시각적 회귀 차이 임계값 기능을 사용하면 테스트가 실패로 표시되기 전에 참조 이미지와 현재 이미지 간의 차이를 허용할 수 있는 정도를 제어할 수 있습니다. 이 기능은 시나리오의 단계 세부 정보에서 찾아서 구성할 수 있습니다.

Screenshot 2024-09-10 at 13.32.47.png

사용자는 0~100 범위의 차이 임계값을 설정하여 테스트 통과에 허용되는 최대 차이 비율을 지정할 수 있습니다.

예제

임계값을 1%로 설정하면 이미지 간의 차이(Diff 점수)가 1% 이하인 경우 테스트가 통과됩니다. 차이 점수가 임계값을 초과하면 테스트가 실패하여 시각적으로 더 큰 변화가 있음을 나타냅니다.

성공
Screenshot 2024-09-10 at 15.52.08.png

Screenshot 2024-09-10 at 14.51.56.png

Fail
Screenshot 2024-09-10 at 15.56.44.png

Screenshot 2024-09-10 at 15.06.44.png

이 기능은 시각적 외관의 사소하고 관련 없는 변화로 인한 오탐을 줄이는 데 특히 유용합니다. 시각적 회귀 테스트에서 허용되는 항목을 보다 유연하게 결정할 수 있습니다.

변경 사항 수락

현재 스크린샷이 참조 이미지와 정확히 일치하거나 설정된 차이 임계값에 속하면 '요소는 동일하게 보여야 함' 단계가 통과됩니다. 그렇지 않으면 단계가 실패합니다. 다음 스크린샷은 요소가 동일하게 보여야 함 단계의 실패를 보여줍니다.

Screen Shot 2023-04-22 at 6.47.08.png

그러나 모양이 변경된 것을 받아들이고 나중에 이 결과를 참조 이미지로 사용하고 싶을 때가 있을 것입니다. 그래서 '변경 사항 수락' 버튼이 있는 것입니다.

Screen Shot 2023-04-22 at 6.47.31.png

이 버튼을 클릭하면 테스트 결과 자체의 상태에는 영향을 미치지 않지만 이 '요소가 동일하게 보여야 함' 단계의 참조 이미지가 업데이트됩니다.

Screenshot 2024-09-10 at 15.32.57.png

다음에 테스트를 실행할 때 새 참조 이미지가 비교에 사용됩니다. 요소의 예상 모양을 쉽게 변경할 수 있습니다.

Screen Shot 2023-04-22 at 6.57.46.png

사용 시 참고 사항

텍스트에 대한 어설션 만들기

이 기능을 사용하여 텍스트에 대해 어설션을 만들 수 있지만 Autify에서 글꼴 렌더링으로 인해 발생하는 미세한 차이를 감지하여 어설션 단계가 실패할 수 있습니다.
따라서 텍스트에 대해 어설션을 수행하려면 "요소 텍스트가 있어야 함" 명령과 같은 텍스트 어설션을 사용하는 것이 좋습니다.

색상에 대한 어설션 만들기

이 기능을 사용하여 색상에 대한 어설션을 만들 수 있지만, 색상 변경 유형에 따라 Autify가 색상 변경을 놓칠 수 있으므로 변경이 있어도 성공적인 단계가 될 수 없습니다. 색상 어설션에는 JS 단계를 사용하는 것이 좋습니다.

시각적 회귀 테스트 기능을 즐겁게 사용하시길 바라며 여러분의 피드백을 기다리겠습니다!


이 문서가 도움이 되었습니까?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.