Cypress

Cypress는 JavaScript 기반의 강력한 프론트엔드 테스팅 프레임워크. 웹 애플리케이션의 엔드투엔드(E2E) 테스트를 위해 설계되었다.

주요 특징

  1. 브라우저 내 실행: Cypress는 애플리케이션과 동일한 실행 루프에서 작동하여 더 빠르고 안정적인 테스트를 가능하게 한다.
  2. 자동 대기: 요소가 나타나거나 애니메이션이 완료될 때까지 자동으로 기다려 별도의 대기 시간 설정이 필요 없다.
  3. 실시간 리로드: 테스트 파일을 저장하면 자동으로 테스트를 다시 실행한다.
  4. 디버깅 용이성: 시간 여행 디버깅, 스냅샷 기능 등을 통해 테스트 실패 원인을 쉽게 파악할 수 있다.
  5. 네트워크 트래픽 제어: 웹 트래픽을 읽고 수정할 수 있어 다양한 시나리오 테스트가 가능하다.

장점

  1. 속도와 안정성: 브라우저 내에서 직접 실행되어 빠르고 안정적인 테스트가 가능하다.
  2. 사용 편의성: 직관적인 API와 풍부한 문서를 제공하여 쉽게 학습하고 사용할 수 있다.
  3. 크로스 브라우저 테스팅: Chrome, Firefox, Edge 등 다양한 브라우저에서 테스트 가능하다.
  4. 실시간 디버깅: 테스트 실행 중 실시간으로 문제를 식별하고 디버깅할 수 있다.
  5. CI/CD 통합: 지속적 통합 및 배포 파이프라인과 쉽게 통합된다.

잠재적 한계

  1. JavaScript/Node.js 생태계에 최적화
  2. 크로스 브라우저 지원이 제한적
  3. 모바일 웹 테스트에는 다소 제한적

사용 방법

  1. 설치: npm을 통해 Cypress를 설치한다.

  2. 테스트 작성: JavaScript로 테스트 스크립트를 작성한다. 예를 들어:

    1
2
3
4
5
6

    describe('home is working', () => {
  it('passes', () => {
    cy.visit('http://localhost:3000')
    cy.title().should('eq', 'Cypress - Home')
  })
})

  3. 테스트 실행: Cypress Test Runner를 통해 테스트를 실행하고 결과를 실시간으로 확인할 수 있다.

주요 명령어

  • cy.visit(): 웹페이지 방문
  • cy.get(): DOM 요소 선택
  • cy.contains(): 특정 텍스트를 포함하는 요소 찾기
  • .click(): 요소 클릭
  • .type(): 입력 필드에 텍스트 입력
  • .should(): 단언(Assertion) 추가

예시

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(true)
  })
})

describe('My Second Test', () => {
  it('Visits the Kitchen Sink', () => {
    // 웹사이트 방문
    cy.visit('https://example.cypress.io')

    // 특정 요소 찾기
    cy.contains('type').click()

    // 입력 필드와 상호작용
    cy.url().should('include', '/commands/actions')
    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

참고 및 출처

Fetching Title#t8ng