안녕하세요! 원티드랩 QA팀 김명관입니다. 전에 공유드린 파파라치를 개선하는 과정에서 파이썬으로 이미지를 다루는 모듈 중에 opencv2라는 모듈도 있다는 사실을 알게 되었고 이 모듈을 사용해 미리 찍어둔 웹 페이지와 현재 상태의 유사도를 비교하고, 어디가 어떻게 달라졌는지 표시할 수 있는 스크립트를 만들게 되었습니다.
네이밍에 재미가 들려서인지 이번엔 숨은그림찾기 계의 대명사 같은 게임인 “히든캐치” 라는 이름을 짓게 되었습니다. opencv2를 이용해 전체 웹 페이지의 UI 상태를 한방에 점검할 수 있는 “히든캐치” 스크립트를 만들어본 과정을 공유해 드리겠습니다!
히든캐치의 시작은 파파라치를 개선하는 작업이었습니다. 점검이 필요한 UI 요소를 스크린샷으로 따두고 Selenium으로 해당 페이지에 접속해 해당 요소가 렌더링 까지 모두 정상적으로 완료 되었는지 스크린샷으로 확인하도록 개선하고 있었어요.
스크립트를 작성하는 중 문득 들었던 생각이 있었습니다.
‘필요한 요소를 모두 스크린샷 따는게 과연 맞을까? 60개에 달하는 주요 페이지의 요소들을 수십, 수백 장 따놓고 변경 사항이 생기면 한 장 한 장 새로운 이미지로 교체하는 방식은 너무 손이 많이 가지 않나?’
이런 생각이 들며 파파라치의 방식과는 달리 화면에 표시되는 전체 웹 페이지를 통째로 비교할 수는 없는지 궁금해졌고 파이썬으로 이미지 유사도를 측정하는 방법을 조사하게 되었습니다.
제 스스로 원한 기능들은 이랬습니다.