이번에는 TestCafe로 촬영한 스크린샷의 차이 비교를 reg-cli를 사용하여 구현해 나갈 것입니다.

스크린 샷에 대해서는 ↓를 참고해 주세요.
E2E 테스트 시작 방법 TestCafe③ -스크린샷편-

reg-cli(reg-suit)이란?

Visual Regression Testing을 위한 명령줄 인터페이스입니다.
이미지는 별도로 준비해야 하지만 어설트할 이미지를 지정하는 것만으로 현재 이미지와 이전 이미지를 비교하여 차이의 HTML을 만들어 줍니다.

두 가지 차이로,
reg-cli : 2개의 이미지(디렉토리)를 지정해 실행하면 알기 쉬운 차분 HTML 리포트를 생성하는 커멘드 라인.
reg-suit : reg-cli의 진화판 같은 것으로 reg-suit 내부에서 reg-cli가 사용되고 있습니다. 정답 데이터와 차등 보고서를 자동으로 클라우드 스토리지(AWS S3, Google Cloud Storage 등)에 저장하거나 GitHub와 연동하여 Pull Request에 대한 차등 보고서를 표시합니다.

reg-suit이 다기능이지만 지금은 클라우드 스토리지에 저장할 필요가 없었기 때문에 간단한 reg-cli를 도입했습니다. 장래적으로는 GitHub 연계도 할 수 있으면 좋겠다고 생각하고 있으므로 그 때 reg-suit로 전환하려고 생각합니다.

그럼 바로 reg-cli를 사용합시다!

install

npm 또는 yarn으로 설치. Node.js는 ver.8 이상을 지원합니다.

$ npm i -D reg-cli

usage

$ reg-cli ./path/to/actual-dir ./path/to/expected-dir ./path/to/diff-dir -R ./report.html

./path/to/actual-dir 에 비교원의 디렉토리 패스, ./path/to/expected-dir 에 비교 대상의 디렉토리 패스, ./path/to/diff-dir 에 차분 화상 보존 디렉토리 패스, ./report.html 에 리포트 HTML의 토출처를 지정합니다.

위의 명령을 실행하면 report.html이 토출되므로 브라우저에서 보면,

이미지와 같이 사이드바에는 「CHANGED: 차이가 있는 것」 「NEW: 신규 추가된 것」 「PASSED: 차이가 없는 것」으로 나누어져 있습니다.

차이가 있던 부분은 빨간색으로 표시되고 확인할 이미지를 선택하면
Diff: 생성된 차이의 Overview
슬라이드: Before 및 After 핸들을 슬라이드하고 비교
2up: Before와 After 2개를 병렬로 나란히 비교
Blend: Before와 After를 투과시키면서 부드럽게 비교
Toggle: Before와 After 사이를 전환하면서 비교
5 가지 비교 방법으로 확인할 수 있습니다.
리뉴얼 전의 UI이지만 샘플이 준비되어 있으므로 아래 URL에서 체험해보세요!
h tps : // / g ゔ ぃ ... 기테 b. 이오/레 g-cぃ/

reg-cli 도입의 기본은 이상입니다. 설치하고 명령 실행하면 좋기 때문에 매우 쉽게 도입할 수 있습니다!

실행 환경을 package.json으로 결합

reg-cli에 관해서는 터미널에서 위의 명령을 실행하면 되지만, 제 경우 TestCafe로 스크린 샷을 찍고 reg-cli로 차이 비교, sharp로 스크린 샷 연결 (향후 기사를 쓸 예정!) 등의 처리 하고 있기 때문에 package.json에 여러 가지 쓰고 그들을 실행합니다.

pacakge.json

"scripts": {
 "vrt": "yarn run vrt:screenshot && node e2e/convert.js && yarn run vrt:reg ",
 "vrt:screenshot": "testcafe e2e/screenshot.js",
 "vrt:reg": "reg-cli ./screenshots/20201009/**/corporate ./screenshots/20201010/**/sample ./screenshots/diff/sample -R ./screenshots/diff/sample/report.html -U"
}

$ npm run vrt 와 커맨드를 치면 스크린샷→이미지 연결계의 처리→reg-cli로 차분 비교가 차례로 실행되도록 하고 있습니다. (& 하나로 병렬 처리, &&로 직렬 처리)

GitHub

reg-cli: htps : // 기주 b. 코 m / 레 g - ゃ · 레 g - c
reg-suit: htps : // 기주 b. 코 m / 레 g - ゃ · Re g - sui t

참고

컴포넌트/단체 테스트 단위로 visual regression 테스트를 수행하기 위한 도구를 만든 이야기
reg-cli의 Report UI를 리뉴얼했습니다.