본문 바로가기

테스트코드

Snapshot Testing (feat. iOS)

목차

  1. Snapshot Testing 이란? 
  2. Snapshot Testing 하는 이유
  3. Snapshot Testing 종류
  4. Snapshot Testing 하는 법

Snapshot Testing 이란?

스냅샷 테스트는 UIView 또는 CALayer를 가져와서 필요한 UIKit or Core Animation의 메서드를 이용해 해당 컨텐츠의 이미지를 생성합니다. 그리고 해당 컨텐츠의 이미지와 코드 저장소의 참조이미지랑 비교해서 두 이미지가 같은 지(픽셀단위) 비교하는 테스트입니다.
쉽게 말하면, 디자인 시안대로 UI를 잘 구현했는가? 를 확인할 수 있는 테스트입니다.

 

Snapshot Testing 하는 이유?

Snapshot Testing을 하면 디자인 시안대로 UI를 잘 구현했는가? 를 확인할 수 있습니다.

그런데 모든 기기의 디자인 시안이 준비되어 있지 않고 만약 준비되어 있더라도 그 모든 디자인을 1px 오차도 벗어나지 않도록 만드는 작업은 무척 비용이 많이드는 작업일 것입니다. (물론 오차허용범위를 조절가능하지만 범위를 정하기가 애매함)

그럼 비용 절감을 위해 Snapshot Testing은 하면 안되는 것일까요?

물론 회사 혹은 팀마다 따라 다르겠지만

저희 팀에서는 보조적인 수단으로서 이용하면 제품 개발에 도움이 된다고 확신했습니다.

 

확신할 수 있었던 이유는 다음과 같은 상황이 있었기 때문입니다. 

저희 팀은 사내 테스트 기기로 디자인 QA를 진행했었는데, 불편한 점이 몇가지 있었습니다.

  1. D 화면의 디자인을 확인해보려면 A -> B -> C -> D 과정을 다 거쳐야 한다는 점
  2. 사내에 있는 한정적인 기기의 화면만 확인할 수 있었던 점 

 

Snapshot Testing 을 이용하면 위의 불편한 점을 개선할 수 있습니다.

테스트하고 싶은 기기의 D화면을 Snapshot을 찍고 그 이미지 파일을 팀원분들께 전달하는 것입니다. 그럼 QA에 들어가는 비용을 절감하는 효과를 얻을 수 있을 것입니다. 👍

 

Snapshot Testing 종류

iOS에서 Snapshot Testing을 할 수 있는 라이브러리는 2가지가 있습니다.

  1. https://github.com/uber/ios-snapshot-test-case (Object-C, Swift)
  2. https://github.com/pointfreeco/swift-snapshot-testing (Swift)

읽어보시고 더 맞는 라이브러리를 선택하셔서 해보시면 됩니다!

저는 Swift만 쓰고 있기도 하고, 히스토리상 커밋이 더 빈번하게 올라오는(더 잘 관리되고 있는) 2번 라이브러리로 해보겠습니다.

pointfree 사이트 보니까 구독하면 Swift 강의 라던지 정보들을 알 수 있는 서비스를 제공하네요. 요 서비스도 좋은 것 같습니다.

Snapshot 관련한 영상도 물론 있습니다.

북마크 추가해야지 👍

 

 

Snapshot Testing 하는 법

일단 간단하게 특정기기에서 특정화면의 이미지 파일을 뽑는 것만 해보겠습니다.

1. xcode 프로젝트를 만들고 테스트를 위한 Target을 생성

테스트를 위한 타겟 추가하기
Unit Testing Bundle로 추가하기

 

2. Target에 Snapshot 라이브러리를 추가 (SPM)

Snapshot 라이브러리 추가하기
Snapshot 라이브러리 추가하기
Snapshot 라이브러리 추가하기
테스트를 위한 타겟으로 변경하기

 

3. 테스트 코드 작성 및 테스트 실시

테스트 코드 작성

결과는??

실패!

' ' '

라이브러리 문서보면

어설션이 처음 실행되면 스냅샷이 자동으로 디스크에 기록되고 테스트가 실패하여 새로 기록된 참조의 파일 경로가 출력됩니다.

반복 테스트 실행은 이 참조를 로드하고 런타임 값과 비교합니다. 일치하지 않으면 테스트가 실패하고 차이점을 설명합니다.

쉽게 말하면 처음에 실행하면 자동으로 디스크에 스냅샷이 저장되고

두번째 실행하면 첫번째 실행했던 기록 경로의 이미지 파일과 두번째 찍은 스크린샷을 비교한다는 거네요.

로그로 찍힌 경로에 가볼까요?

제가 만들었던 DetailViewController의 화면이 찍혀져 있네요!!

요 파일을 팀원들한테 공유하면 되겠당~ 😊

 

이제 테스트를 두번째 돌리면?

성공!

 

 

 

참고했던 페이지

반응형