Cypress 사용하기

Cypress를 사용하는 이유

기존에 회사에서 E2E 테스트로 Cypress를 사용하고 있었다.
하지만, 다른 E2E 테스트 도구를 선택해서 진행해도 된다고 하여 최근에 많이 사용되는 Playwright와 고민하였지만, 둘 다 사용해본 결과 크게 두 가지 이유로 기존의 Cypress를 선택하여 테스트를 진행하기로 하였다.

Cypress를 선택한 이유는 크게 두 가지 정도이다.

1. 설정이 쉽고 공식 문서가 잘 되어 있어 진입장벽이 낮았다.
2. 스냅샷 기능덕에 실패한 테스트의 상태를 쉽게 확인할 수 있어 디버깅에 용이했다.

E2E(End-to-End) 테스트
소프트웨어 애플리케이션의 전체적인 흐름을 검증하는 테스트 방법으로,
이 테스트는 사용자가 애플리케이션을 사용하는 것과 유사한 방식으로 시스템의 모든 구성 요소가 올바르게 작동하는지를 확인한다.

Cypress 설치

npm install -D cypress 
# or yarn
yarn add -D cypress
# or pnpm
pnpm add -D cypress

위 명령어를 통해 cypress를 설치한다.

되도록이면, typescript를 설치하는 것을 추천한다.
개인적으로 타입 정의를 보면서 어떤식으로 코드를 작성하면 되는지 파악하기에 유용했다.

cypress를 설치한 후 package.json의 scripts에 아래와 같이 추가한다.

{
  "scripts": {
    "cy:open": "cypress open"
  }
}

위와 같이 scripts를 추가했으면 앞으로 매번 터미널에 아래와 같이 입력하여 cypress를 실행할 수 있다.

npm run cy:open
# or yarn
yarn run cy:open
# or pnpm
pnpm run cy:open

Cypress test 파일 추가

cypress를 실행하면 위와 같은 창이 뜨게되는데 E2E Testing을 클릭한다.

크롬 브라우저를 통해 테스트를 진행할 것이므로 Chrome을 선택한 후 Start E2E Testing Chrome을 실행한다.

그럼 이렇게 화면이 나타날텐데, 이때 Create new spec을 클릭하여 새로운 테스트 파일을 생성한다.

원하는 이름으로 수정한 후 Create Spec을 클릭하면 된다. 단, 반드시 *.cy.ts|js 형식으로 작성해야 한다!

여기서 Okay를 클릭하면 해당 테스트 파일이 실행되고 Create another spec을 클릭하면 테스트 파일 목록으로 이동한다.

참고로, IDE에서 cypress/e2e 경로에 직접 파일을 새로 추가해도 반영된다.
단, 파일명은 *.cy.ts|js로 작성한다.

Cypress 문법

Cypress는 기본적으로 Mocha와 Chai를 기반으로 하고 있어, 이 두 라이브러리의 문법을 활용하여 테스트 코드를 작성할 수 있다.

Cypress는 기본적으로 메서드를 계속 추가하는(메서드 체이닝) 방식으로 되어 있어 모든 메서드들을 덧붙이며 늘릴 수 있다.

모든 문법을 다 정리할 수는 없어, 내가 유용하게 사용했던 메서드와 팁만 일부 정리하였다.

• describe() : 테스트 할 동작들을 묶어주는 전체 그룹
• it() : 테스트 할 동작의 세부 단위 케이스
• cy.visit() : 웹사이트 방문
• beforeEach() : 각 테스트가 실행되기 전 공통으로 실행될 동작 정의

describe('google.com test', () => {
  beforeEach(()=>{
    cy.visit('https://www.google.com/')
  })
  
  it('search cypress', () => {
	cy.get('[aria-label="검색"]').type("cypress").click();
  })
})

❗️SPA를 테스트하는 경우

Cypress로 테스트를 작성하면서 가장 어려웠던 경우는 DOM 요소가 인식이 안되는 현상이었다. 분명 가져오고자 하는 DOM 요소가 존재함에도 불구하고 가져오지 않았다. 이에 해결방법을 찾아보던 와중 should메서드를 통해 해당 컴포넌트가 mount되기를 기다리게하는 방법을 사용하여 테스트를 진행하였다.

예시

cy.get(".component_element").should('be.visible')

이렇게 should('be.visible') 옵션을 추가함으로써, DOM 요소를 테스트함에 있어 문제가 발생하던 것들이 사라졌다.

get

가장 기본적인 메서드로 DOM 요소를 선택한다.

cy.get('.selector')

선택자를 알고 있다면 코드를 직접 작성해도 되지만, cypress를 활용하여 마우스 클릭을 통해 선택자를 추출할 수 있다.

1. 숨겨진 툴팁을 표시한다.
2. 마우스로 요소 추출 기능을 킨다.
3. 추출된 요소를 클립보드에 복사한다.

should

Assertion 메서드로, 해당 테스트가 pass되거나 timeout될 때까지 자동으로 재실행한다.

개인적으로 get을 통해 DOM요소 혹은 브라우저 스토리지에 저장된 데이터를 가져올 때 반드시 사용하는 것을 추천한다.

SPA에서 가장 많이 사용한 메서드로 아래와 같이 사용된다.

cy.get(':checkbox').should('be.disabled') // checkbox가 disabled 설정이 된 체크박스인지 assertion을 진행한다.

request

이름에서도 알 수 있듯이, HTTP request를 생성하는 메서드이다.

이 메서드는 getCookie와 같이 사용할 수 있으며 필자는 쿠키에서 JWT 토큰을 가져와 request를 같이 사용하여 인증된 사용자임을 증명하는데 사용하였다.

쿠키에서 토큰을 가져와 서버에 요청하는 예시

let token: string;

cy.getCookie('jwt_token').then(cookie => {
  token = cookie // jwt 토큰 가져오기
})

cy.request({
  method: 'GET'
  url: 'https://your-api-server/posts',
  headers: `bearer ${ token }`
}).then((response) => {
	console.log("data" ,response.body.data)
	console.log("status" ,response.status)
})

invoke

invoke 메서드는 선택한 DOM 요소의 특정 메서드나 속성을 호출할 수 있게 해주는 메서드이다.
주로 jQuery 메서드나 사용자 정의 메서드를 호출할 때 사용된다. 보통 jQuery 메서드를 호출할 때 사용했다.

특히, 버튼을 두번 클릭해야할 때, dbclick()으로 안되는 경우가 있으므로, invoke('click').invoke('click')과 같이 사용하였다

cy.get('sorting-button')
  .should('be.visible')
  .invoke('click')
  .invoke('click')

then

then은 이전 명령어의 결과를 가져와서 후속 작업을 수행할 수 있도록 해준다.

// input의 필드값 검증
cy.get('input[name="username"]').then(($input) => {
  const value = $input.val(); // 입력 필드의 값 가져오기
  expect(value).to.equal('testuser'); // 값 검증
});

// 클릭 이벤트 이후 변화 확인
cy.get('.button').click().then(() => {
  cy.get('.message').should('be.visible'); // 버튼 클릭 후 메시지가 보이는지 확인
});

참고
cypress.io