E2E 테스트

E2E Test

E2E(End to End) 테스트란 애플리케이션의 처음부터 끝까지의

실제 사용자의 관점에서 사용 흐름을 테스트하는 방법.

Cypress 테스트 도구를 사용할 수 있습니다.

 

테스트 환경 구성

npm install cypress --save-dev
npm i -D eslint-plugin-cypress

위 명령어를 통해 E2E test관련 프레임과 라이브러리를 설치합니다.

package.json 파일 scripts부분에 cypress를 추가합니다.

.eslintrc.js 파일의 추가부분입니다.

 

cypress.config.js파일에서 viewport의 너비와 높이 그리고 기본 url를 설정해줍니다.

첫 테스트

npm run dev
npm run test:e2e

위 명령어를 통해 cypress를 열어줍니다. 

create new spec를 선택한 후, 이름 지어주고, run하면 됩니다.

프로젝트 cypress폴더 안에 e2e폴더 생성 후, first_test.cy.js파일이 생성된 것을 확인할 수 있습니다.

경로는 방금 create할 때 작성하는 경로와 같습니다.

 

jest문법와 비슷합니다. 대신 cypress는 it을 사용하며, cy도 사용됩니다.

 

영화 검색 시나리오 테스트

/**
 * 검색(메인) 페이지로 접근한 후,
 * 영화 제목을 'frozen'으로, 표시 개수를 30개로 입력하고,
 * 'Apply' 버튼을 클릭해 영화 목록을 검색합니다.
 * 영화 목록 30개가 잘 출력됩니다.
 * 영화 목록에서 'Frozen II' 영화 아이템을 클릭하면,
 * 영화 상세 정보 페이지로 이동합니다.
 * 상세 정보 페이지에서 정보를 확인할 수 있습니다.
 */

describe('영화 검색(겨울왕국2)', () => {
  it('영화 검색', () => {
    // 검색 페이지로 접근합니다
    cy.visit('/')
    cy.get('header .nav-link.active').contains('Search')

    // 영화를 검색합니다
    cy.get('input.form-control').type('frozen')
    cy.get('select.form-select:nth-child(2)').select('30')
    cy.get('button.btn').contains('Apply').click()
    cy.wait(2000)
    cy.get('.movie').should('have.length', 30)

    // 겨울왕국2 영화 아이템을 선택합니다
    cy.get('.movie .title').contains('Frozen II').click()

    // 영화 상세 정보를 확인합니다
    cy.url().should('include', '/movie/tt4520988')
    cy.wait(1000)
    cy.get('header .nav-link.active').contains('Movie')
    cy.get('.title').contains('Frozen II')
  })
})

it으로 단계별로 테스트를 진행하려고 했는데 잘 안 되더라고요.

그래서 it안에 주석으로 처리했습니다. 

 

it마다 단계별로 진행하려면 2가지 방법이 있습니다.

1. it마다 전 단계 코드를 복붙합니다.

2. .cy.js와 같은 test파일을 각 단계별로 여러 파일을 만든 후, import합니다.

 

Headless테스트 및 동영상 생성

headless모드는 terminal에서만 동작되고 시각적으로 동작되지 않는 모드입니다.

코드 테스트 비교적 빠르는 게 장점입니다.

package.json파일 scripts부분에서 cypress run명령어를 등록합니다.

cypress.config.js 옵션에 video:true를 추가합니다.

terminal에서 headless모드를 실행한 후 cypress폴더 안에 videos폴더 새로 생성됩니다.

클릭해서 확인할 수 있습니다.