E2E Test - Cypress

Intro

원티드의 프리온보딩 챌린지의 사전과제를 거의 마무리할 즈음 사전과제 리드미를 다시 읽어보고 있었는데, 요구사항이 명확하게 적혀있었다. 그래서 나의 첫 E2E 테스트에 좋은 연습이 될 것 같아서 시작하게 되었다.

E2E 테스트가 뭔데?

End to End의 약자로 간단하게 앱을 사용자의 입장에서 테스트하는 방법이다.

Cypress를 선택한 이유

1. E2E 테스트 라이브러리 중 가장 다운로드 수가 높았으며 공식문서도 잘되어있고 커뮤니티 규모가 커서 자료가 많았다.

2. 테스트코드를 처음 작성해보는 입장에서 명령어의 이름들이 직관적이며 빠르게 배워 간편하게 쓸 수 있을것 같았다.

   // Example
   cy.visit("url")
   cy.get("#").contains("#").should("exist")

내가 겪은 문제들 😂

1. 테스트 코드를 처음 작성하다보니 E2E테스트인데 실제 사용자의 눈에 보여지지 않는 문제들을 계속 고민하다 시간을 허비하던 나를 발견하게 되었다. 역시 해보기 전까지는 모르는것 같다.

2. 비동기적 동작이 있을 경우 내가 원하는 순서가 아닌 다르게 흘러가는 문제를 발견하였는데, cypress의 intercept(), as(), wait()을 이용하여 손쉽게 해결하였다.
   + wait()만 작성할 경우 eslint경고문이 떠서 eslintrc에 오버라이딩 할까 고민하다 then으로 처리했다. but then()지옥에 빠져버렸다 ㅋㅋㅋㅋ

   // Example 
   describe("Assignment 2 - Todo list", () => { 
     // beforeEach(): 각각의 테스트 케이스가 실행되기전 실행하고 싶은 공통적인 코드를 정의할 수 있다.
     beforeEach(() => {
       // as(): alias 즉 별칭을 지정할 수 있는 메서드다.
       cy.intercept("POST", "/users/login").as("postLogin");
       cy.intercept("GET", "/todos").as("getTodos");
   
       cy.visit("/auth");
       cy.get("input[type=text]").type(Cypress.env("AUTH_EMAIL"));
       cy.get("input[type=password]").type(Cypress.env("AUTH_PASSWORD"));
       cy.get("button")
         .contains("로그인")
         .click()
         .then(() => cy.wait("@postLogin"))
         .then(() => cy.wait("@getTodos"));
     });
   });

📌 한 줄 회고

눈으로 결과가 보여지는건 항상 재밌는것 같다👍🏻