playwright 2

[계좌 리팩토링] 13편(자동화). VRT부터 배포까지! GitHub Actions로 나만의 CI/CD 파이프라인 구축하기

수동 테스트의 늪에서 벗어나, 완벽한 자동화의 세계로안녕하세요! 내 계좌와 코드를 튼튼하게 다지는 [계좌 리팩토링] 시리즈 13편입니다. 지난 12편에서 우리는 Playwright와 Storybook을 활용하여 대시보드 UI의 픽셀 하나까지 방어하는 든든한 VRT(시각적 회귀 테스트) 환경을 구축했습니다.하지만 "테스트 코드를 짜는 것"과 "테스트를 꾸준히 돌리는 것"은 전혀 다른 문제입니다. 바쁘게 기능을 개발하다 보면 깜빡하고 pnpm exec playwright test를 로컬에서 실행하지 않은 채 코드를 원격 저장소에 Push 해버리는 실수가 반드시 발생합니다.그래서 이번 시간에는 우리가 봇의 매매를 자동화했듯이, 테스트와 배포 과정마저 자동화(CI/CD) 해보겠습니다. GitHub 저장소에 코드..

[계좌 리팩토링] 12편(안정성). 대시보드 UI를 완벽하게 지키는 법: Playwright와 Storybook을 활용한 VRT 구축

기능이 추가될수록 불안해지는 화면, 어떻게 방어할까?안녕하세요! 내 계좌와 코드를 튼튼하게 다지는 [계좌 리팩토링] 시리즈 12편입니다. 지난 11편에서 우리는 Nuxt를 활용해 봇의 상태를 실시간으로 보여주는 멋진 웹 대시보드를 구축했습니다.앞으로 이 대시보드에는 10편에서 다룬 일목균형표 차트, 호가창 애니메이션, 매매 내역 검색 필터 등 수많은 기능이 추가될 것입니다. 그런데 기능이 늘어날수록 개발자에게는 새로운 두려움이 생깁니다. "새로운 CSS를 한 줄 추가했는데, 어제까지 잘 보이던 잔고 표시 카드 레이아웃이 엉뚱하게 깨지면 어떡하지?"이러한 불안감을 해소하고 UI의 무결성을 보장하기 위해, 이번 시간에는 Playwright와 Storybook을 결합한 시각적 회귀 테스트(VRT, Visual..