Visual Testing(비주얼 테스팅)이란?Visual Testing은 소프트웨어 애플리케이션의 사용자 인터페이스(UI)가 시각적으로 예상한 대로 표시되는지를 검증하는 테스트 방법이다. 이는 UI 요소의 위치, 크기, 색상, 레이아웃, 이미지 및 글꼴 등이 의도한 대로 나타나는지 확인하는 것을 목표로 한다. 기능적인 테스트와 달리, Visual Testing은 애플리케이션의 시각적 측면에 초점을 맞춰 사용자 경험의 일관성을 유지한다.Visual Testing 적용시 기대 효과UI 일관성 유지: 새로운 기능 추가나 코드 변경으로 인해 의도치 않은 UI의 변화가 발생할 수 있다. Visual Testing은 이러한 변화를 조기에 발견하여 사용자에게 일관된 경험을 제공한다.시간과 비용 절약: 수동으로 UI..

개요 Cypress를 사용해서 딥링크를 검증하는 방법에 대해서 알아보자더보기딥링크란?모바일 환경에서 유저가 URL을 클릭했을 때, 앱을 실행시키고 특정 페이지로 이동하도록 돕는 기술ex) OO앱 다운로드, OO앱에서 확인딥링크 어떻게 구현될까?onClick이벤트에서 window.location.href, window.location.replace를 사용해서 앱을 실행시키거나, 앱 스토어로 이동을 시킨다. 실제 사이트에서 딥링크 확인해 보기딥링크가 적용된 코드코드가 난독화되어 모든 코드를 알기 어렵지만 c라는 변수는 IOS 스토어의 주소를 가지고 있다.var t 함수에서 접속한 단말기의 OS를 체크하고  window.location.href을 사용해서 앱 스토어로이동을 하는 것을 알 수 있다. 테스트 방법..

개발을 할 때 우리는 유지보수와 확장성을 고려하여 다양한 패턴을 적용한다. 프론트엔드에서는 최근 FSD패턴이 뜨고 있고 백엔드에서는 레이어드 아키텍처가 대표적이다. 그렇다면 테스트 자동화에서 많이 사용하고 있는 패턴은 무엇일까? 바로 POM(Page Object Model)이다.POM(Page Object Model)?POM은 테스트 자동화에서 자주 사용되는 패턴으로 웹 페이지를 객체로 하여, 테스트 코드와 페이지의 UI요소를 분리하는 데 중점을 두는 패턴이다. 이를 통해 코드의 재사용성, 가독성, 유지보수성을 높일 수 있다.POM을 적용하지 않은 UI 테스트 코드(Cypress로 구현)describe('Login 기능 테스트', () => { it('로그인 성공',()=>{ cy.visit('/..

개요'n일 동안 보지 않기' 같은 모달창은 어떻게 구현이 되고 Cypress를 사용해서 검증할 수 있는지 알아보자'n일 동안 보지 않기' 모달 어떻게 구현될까?'n일 동안 보지 않기' 모달은 주로 쿠키(Cookie)를 사용해 구현이 된다. 사용자가 모달 창에서 'n일 동안 보지 않기' 버튼을 클릭하면, 해당 정보가 브라우저 쿠키에 저장된다. 이 쿠키는 일정 기간 동안 브라우저에 남아 있어, 사용자가 다시 웹사이트에 방문할 때 이를 확인하여 모달을 표시할지 말지를 결정한다.브라우저 Dev Tool에서 보는 'n일 동안 보지 않기' 모달 HTML 코드브라우저 Dev Tool의 Sources탭에서 보는 '오늘 하루 그만보기' 코드클래스 네임이 pop-close-01인 버튼을 클릭했을 때 setMainPopCo..

라이브러리 설치npm install start-server-and-testPackage.json > Script 설정"scripts": { "dev": "vite", "cy:open": "cypress open", "e2e": "start-server-and-test dev {port} cy:open"},{port}에 포트를 정의한다. vite는 5173이 default port 에러 발생시 해결방법 --host를 붙여준다."scripts": { "dev": "vite --host", "cy:open": "cypress open", "build": "tsc -b && vite build", "preview": "vite preview", "e2e": "start..

CypressCypress는 웹 애플리케이션의 테스트를 쉽고 빠르게 수행할 수 있도록 설계된 JavaScript기반의 E2E 테스트 프레임워크이다. React, Angular, Vue.js 등과 같은 최신 프론트엔드 프레임워크와 원활하게 통합되며, 개발자와 QA 엔지니어가 웹 애플리케이션의 모든 기능을 실제 브라우저 환경에서 테스트할 수 있도록 돕는다.Cypress의 특징Time Travel : Cypress는 테스트가 실행되는 동안 각 단계마다 스냅샷을 저장하고 있어 명령 로그에서 마우스를 올리면, 그 단계에서 어떤 일이 일어났는지 확인할 수 있다. Automatic Waiting: Cypress는 명령어와 어설션이 완료될 때까지 자동으로 기다린 후 다음 단계로 넘어간다.Debuggability: 브라..