📌 목차 서론 Visual Regression Test를 적용한 이유 Visual Regression Test란? Visual Regression Test 핵심 용어 정리 왜 Cypress를 선택하였는가? 설치 및 환경 설정 script 명령어 소개 테스트 소개 서버 데이터 mocking 결론 📌 서론 안녕하세요! 에디 입니다. 오늘은 회사에서 Visual Regression Test를 적용한 이유 그리고 과정을 한번 소개를 해보겠습니다. 그럼 출발! 🚀 📌 Visual Regression Test를 적용한 이유 기존 프로젝트에는 styled-component로 세팅이 되어있었는데 이걸 emotion으로 포팅을 하게 되었습니다. emotion의 더 다양한 기능을 사용하기 위해 변경 작업을 진행했지만 비슷..
목차 문제 정의 Cypress? Cypress hydration test 작성 Local에서 테스트 해보기 Github action 연동하기 작동 동영상 질문타임 문제 정의 문제가 뭐였길래? 🚨 우리의 개발 환경은 빠르게 개발을 하기 위해 CSR 환경이다. 배포 환경은 SSR 환경이다. 👉 개발 환경과 배포 환경이 다르기 때문에 빠른 머지를 할때 build test를 건너 뛰기 쉽다. 👉 다른 사람 코드를 건들이기 어렵다. 👉 hydration 테스트가 귀찮다. 그래 ! 😎 그럼 Cypress로 Hydration 테스트를 자동화를 하자! Cypress가 뭔가유? 먹는건가유? Cypress에 대해서 알아보자! Cypress는 Javascript End to End 테스트 프레임워크 입니다. 더 많은 정보를..
📌 목차 Introduction Setting을 어떻게 해야할까? Conclusion Reference 📌 Introduction 안녕하세요 이번 포스팅은 지난번에 알려드린대로 BDD를 세팅하는 방법에 대해서 알려드리려고 합니다. 실제 코드는 여기를 참고하시면 됩니다. 🎉 📌 Setting을 하는 방법 먼저 cypress-cucumber-preprocessor를 설치해주세요 npm i -D cypress-cucumber-preprocessor package.json package.json에 해당 내용을 추가해주세요. "cypress-cucumber-preprocessor": { "nonGlobalStepDefinitions": true, "stepDefinitions": "tests/e2e/specs",..
