후니후니

Cypress 기본적인 사용 방법, 주로 사용하는 함수 등 정리 Cypress 설치 시 기본 폴더 구조 (v10.6.0 기준) downloads 테스트 실행 중에 다운로드되는 파일이 보관됨. e2e e2e 테스트 파일들을 보관. fixtures 테스트에 사용할 정적 데이터 파일들을 보관. support 공용으로 사용할 함수를 정의하거나, 테스트 전 사전에 실행할 코드를 작성한 파일들을 보관하는 폴더 E2E 테스트에서 주로 사용하는 cy 함수들 1. get login cy.get('[data-cy="login-button"]') Cypress에서 data-cy를 통해 요소를 가져오는 것을 권장하고 있음. 2. visit cy.visit('/home') 해당하는 url로 이동 3. intercept cy...

Cypress를 이용한 회원가입 폼 테스트 이전 1탄에서는 설치 후 간단한 테스트를 통해 Cypress를 살짝 맛보았다. 이번 2탄에서는 Cypress를 이용해 간단한 회원가입 폼을 테스트해보려고 한다. // Form.vue submit {{ email }} {{ password }} 디자인 프레임워크인 Vuetify를 사용중이며, Cypress에서 쉽게 가져오기 위해 data-cy 속성을 지정했다. 해당 속성을 통해 cy.get()으로 해당 요소를 가져올 수 있다. // form.spec.js describe('Form Test', () => { beforeEach(() => { cy.visit('/signup'); }); it('회원가입 폼 작성', () => { cy.get('[data-cy=ema..

✏️ 1. Cypress 사용을 고려하게 된 이유. ✏️ 2. Cypress 초보자는 설치부터 해보자. ✏️ 3. 설치 후 맛만 보자. 1. Cypress 사용을 고려하게 된 이유. 테스트 코드를 작성해본적은 거의 없다. TDD 관련 동영상을 보고 토이 프로젝트에서 Jest를 간단하게 사용해봤지만, 실무에 어떻게 적용을 해야 할지 감이 잡히지 않았고, 그래서 자연스럽게 테스트 코드에서 관심이 멀어지게 되었다. 그러던 어느 날, 실무에 테스트 코드를 적용해야 하는 날이 왔고, 이제부터라도 익숙해지기 위해서 Cypress를 시작하려한다. Cypress를 동료가 추천해주기도 했고, 테스트를 하기 적합하다고 해서 Cypress를 선택했다. 2. Cypress 초보자는 설치부터 해보자. Cypress는 문서가 굉..