티스토리

삽질Oㅔ는 끝2 없ㄷr...

검색하기

Backstop 을 도입해 보자

프론트/테스트

Backstop 을 도입해 보자

ZestLee 2024. 4. 20. 13:35

Backstop 설치
Backstop 실행 스크립트 추가
1. ```
    "backstop:init": "backstop init --config=backstop.config.js",
    "backstop:test": "backstop test --config=backstop.config.js",
    "backstop:reference": "backstop reference --config=backstop.config.js",
    "backstop:approve": "backstop approve --config=backstop.config.js",
    "backstop:openReport": "backstop openReport --config=backstop.config.js"
```
2. init
  1. backstop 초기 설정을 해 줌 (backstop 관련 directory 들이 만들어짐)
  2. backstop.config.js >> 이건 backstop 설정 파일인데 깃에 올려야 할듯?
  3. init 하면 json 파일이 만들어져버리는데 이건 좀 더 고민을 해봐야 할 듯 싶다
3. test
  1. test 하는 것임. 이전에 만들어졌던 screenshot 이랑 비교해서 diff 떠줌
4. reference
  1. 맨 처음 스크린샷을 찍어 주는 명령어
  2. backstop 을 띄우고 초기에 딱 한번만 실행하면 됨
5. approve
  1. 테스트가 실패되었을 때, 개발자가 의도한 것이 맞다면 approve 시켜서 이전 스크린샷을 새로운 스크린샷으로 교체함
6. openReport
  1. 테스트는 안 하고 그냥 리포트만 띄우는 것

테스트

base swiper 에서 억지로 height 를 1000px 로 만들어 줌
backstop test 를 실행시켜 보니 바로 failed 뜸

2개가 실패했다고 뜸

이것은 또한 시각적으로 직접 비교해서 볼 수도 있음
뭐가 달라졌는지 핑크색으로 영역을 표시해 주고 마우스로 드래그 해서 비교해 볼 수도 있음

원하는 점

초기 목표에 맞게 PR 생성이 되면 test 를 실행시키고, failed 가 발생할 때만 뭔가의 봇이 알림을 줬으면 좋겠음
- 봇은 teams 나 Bitbucket 댓글을 달아줬으면 좋겠음
- 그 봇은 리포지토리에 저장된 이미지를 가지고 ~~~ 가 달라졌다고 보여줘야 함
그리고 backstop 이 생성해 준 index.html 을 스토리북에 추가하면 좋겠음 (가능하다면)

필요한 것

Bitbucket PR 이벤트 웹훅
- Jenkins job 을 트리거해야 함
새로운 Jenkin job 파이프라인
- Backstop 실행하여 UI 테스트 수행하는 단계를 포함해야 함
(Bitbucket 댓글 봇을 만든다면)
- Bitbucket 권한 및 인증 정보
- PR 댓글 달아주는 스크립트
(teams 알림을 만든다면)
- teams 웹훅

Jenkins job 이 새로 필요한 이유

PR 생성 이벤트를 받고 test 를 돌려야 하기 때문임
test 가 실패했을 경우 댓글이나 팀즈 알림을 줘야 하기 때문임

로컬에서 하면 왜 안 되는지

위에서 말했다시피 로컬에서 돌리려면 로컬 서버를 꼭 띄워야 함
로컬에서는 네트워크가 느릴수도 있음 (delay 5초는 줘야 할지도)
푸시할 때마다 그 과정을 기다리긴 힘듦

가능한 방법들

로컬에서 깃 푸시할 때 테스트 실행 (husky)
1. 로컬에 서버가 띄워져있어야 함
PR 생성 됐을 때 테스트 실행
1. 젠킨스 잡이 추가되거나
2. 기존 젠킨스 잡에 스크립트를 추가하면 될 것 같음
  1. 임시 도커를 띄워서 그것을 테스트…?
  2. 하지만 이것은 배포가 느려질 수도 있음
주기적으로 테스트 실행
1. 30분 단위로 테스트를 실행
2. 젠킨스 배치가 추가되어야 함