발표 내용 + 개인적인 생각입니다
원본 내용은 추후 우아한Tech 유튜브에 올라온다고 합니당
발표는 우아한형제들 프론트엔드 그룹 개발자 신성환 님이 해주셨다
👏👏👏👏
SW TEST 란?
널리 사용되기 전에 어떤 것의 품질, 성능 또는 신뢰성을 확립하기 위한 절차
여러 테스트가 존재한다 FE 에서는 대표적으로 기능 테스트, UI 테스트, 브라우저 테스트
- 화면이 잘 그려지는가?
jest + puppeteer - 기능이 잘 동작하는가?
jest - 브라우저에서 잘 동작하는가?
playwright
E2E 테스트의 주요 목적은 실제 사용자 시나리오를 시뮬레이션하고 통합 및 데이터 무결성을 위해 테스트 중인 시스템과 해당 구성 요소를 검증하여 최종 사용자의 경험에서 테스트하는 것
여러 E2E 테스트 중 시각적 회귀 테스트에 대한 안내
jest + puppeteer 를 조합해 구현
- jest-image-snapshot 를 활용해 snapshot 구 페이지 저장
- puppeteer 를 활용해 크로미움 브라우저 실행해 신 페이지 접근
- puppeteer 가 제공하는 screenshot 사용해 구 페이지 스냅샷과 비교
- 비교한 이미지 설정된 경로에 저장
사진을 보면 렌더링이 달라진 부분에 빨강생 + 노란색으로 안내를 하고 있다
후기
추후 토이 프로젝트에 접목을 해보면 좋을 거 같다
추가로 스토리북도 참고하면 좋을 거 같다
visual-testing-handbook
영차영차🐢