테스트 코드를 Cypress에 실제로 쓸 때의 Tips

Cypress 쓰기 테스트 코드 Tips 소개

저는 Leaner Technologies 의뢰 업무의 서지지입니다.
지난번Cypress 구성 계속.
이번에는 구체적인 테스트 코드를 실제로 쓰는 Tips를 소개한다.

Form의 수치 등을 유형별로 정의해서 모으면 편할 것 같아요.

마지막 기사에서 Type Script를 가져왔기 때문에 유형을 정의했습니다.
E2E 테스트를 실시할 때 대부분의 경우 CRUD를 조작하기 때문에 미리 이용된 값을 정의하면 보완 효과가 수월하다.
types.ts

export interface ProjectCommentForm {
  body: string
}

export const createdProjectComment: ProjectCommentForm = {
  body: 'Cypress test comment',
}

이런 느낌으로
integration/sample_spec.ts

import { createdProject } from 'cypress/types'
...
  it('投稿できる', () => {
    cy.get('[data-cy-form-comment]').within(() => {
      cy.get('button').should('be.disabled')
    })
    cy.get('textarea').type(createdProjectComment.body)
    cy.get('[data-cy-form-comment]').within(() => {
      cy.get('button').should('not.be.disabled').click()
    })
    cy.contains(createdProjectComment.body)
  })

Custom Commands에 작업을 취합하면 테스트 코드의 읽기 성능이 향상됩니다.

커스텀 커맨드(Custom Commands)와 같은 기능이 있어 페이지당 미리 포장해서 하는 작업integration 아래spec이 보기 쉬워진다.
https://docs.cypress.io/api/cypress-api/custom-commands#Syntax
support/sample_commands.ts

Cypress.Commands.add('visitProject', () => {
  cy.get('[data-cy-nav-item]').contains('プロジェクト').click()
  cy.get('[data-cy-nav-subitem]').contains('プロジェクトの管理').click()
})

Cypress.Commands.add('createProject', () => {
  cy.contains('新規追加').click()

  cy.get('[data-cy-input-title]').type(createdProject.title)
  cy.get('[data-cy-input-description]').type(createdProject.description)
  cy.contains('some').click()
  // ...様々な処理
  cy.contains(createdProject.title)
})

또한 커스텀 커맨즈 내에서도 결단을 내릴 수 있으니 각 커스텀 커맨스가 기대한 대로 움직였는지 확인하는 것이 안심이 된다.
sample_spec.ts

describe('プロジェクトのコメント', () => {
  before(() => {
    cy.login()
    cy.visitProject()
    cy.createProject()
  })
})

페이지 이외에 간단한 대화상자 조작 등도 공동으로 사용할 수 있어 매우 편리하다.

Custom Commands를 통한 보완 효과

이러한 Custom Commands는 Type Script로 쉽게 보완할 수 있습니다.
https://docs.cypress.io/guides/tooling/typescript-support#Types-for-custom-commands
support/index.ts

import './sample_commands'

support/index.d.ts

declare namespace Cypress {
  // project
  interface Chainable<Subject> {
    visitProject(): Chainable<Subject>
  }
  interface Chainable<Subject> {
    createProject(): Chainable<Subject>
  }
  interface Chainable<Subject> {
    updateProject(): Chainable<Subject>
  }
  interface Chainable<Subject> {
    destroyProject(title: string): Chainable<Subject>
  }

UI 변경 사항에 의존하지 않고 데이터-cy attribute 사용

https://docs.cypress.io/guides/references/best-practices#How-It-Works
Best Proactices로, E2E 테스트의 작동 대상 요소data-cy에 이름을 부여하면 변경이 강해집니다.
UI Component 등을 사용하는 경우 DOM의 중첩도 깊어지기 쉬워 운용 대상자data-cy를 부여하면 cy.get()의 가독성이 향상된다.

E2E 테스트 시

여기서부터는 씨프레스와는 직접적인 관계가 없지만, E2E 시험 때 준비한 일과 테스트 코드를 쓸 때 주의해야 할 점 등을 기재한다.

테스트 용례를 열거하다

물론 Cypress에 테스트 코드를 쓰기 전에 테스트 용례를 일람합니다.
페이지에 따라 사전에 데이터를 준비해야 하고, 지금 당장 테스트를 쓸 수 없는 부분 등은 팀 내에서 식별할 수 있다.
또 구조화해서 쓰면 사이프레스 코드에 빠지기 쉽다.

幂 등성을 확보한 상태에서 테스트를 종료합니다

E2E 테스트를 위해 깨끗한 환경을 마련하는 것이 좋지만, 전문적인 제작 환경이 까다롭기 때문에 개발 환경으로 대체할 수도 있다.
이번에는 확실히 상술한 모델로 幂 등성을 최대한 유지하기 위해 테스트를 조립했다.
예를 들어 어떤 데이터를 추가하면 마지막 애프터 테스트가 끝날 때 제작된 데이터를 삭제한다.
이렇게 하면 테스트 전과 같은 상황으로 돌아가기 때문에 몇 번을 실행하든지 데이터 증가로 인한 테스트 오류의 발생을 억제할 수 있다.
https://docs.cypress.io/guides/references/best-practices#Using-after-or-afterEach-hooks
또한, Cypress의 Best Proactices에서는 before에서 login, after에서 logout을 추천해 청결한 상태를 유지한다.
로그인 상태에 따라 달라지는 요소로 인한 테스트 실패 사례를 줄이기 위해 도입한 것이다.

총결산

Cypress를 사용하여 E2E 테스트를 작성할 때 실제 Tips를 요약했습니다.
Cypress는 TypeScript에 대한 지원이 두꺼워 거의 모든 코드를 TypeScript로 기술할 수 있기 때문에 테스트 코드의 쓰기 맛이 매우 좋다.

선전하다.

Leaner Technologies에서 자동 테스트를 확충하여 품질을 유지하는 동시에 속도감 있는 개발을 함께 할 수 있는 멤버를 찾습니다!
https://careers.leaner.co.jp/