e2e 테스트 - Cypress
Post

e2e 테스트 - Cypress

들어가기

프로그래밍을 하면서 모든 과정을 테스트할 수 없지만 잘 작동 되는지 테스트가 필요하다. 하지만 일일이 눌러보며 테스트를 하는 것은 시간이 오래 걸리기 때문에 비효율적이다. 그래서 Jest나 Cypress같은 툴을 이용해서 테스트 자동화를 한다. 이전까지 Jest만 몇번 사용했었는데, UI테스트를 위한 Cypress를 공부하며 간단하게 정리하려고 한다.

사용 방법

설치

1
2
3
$npm install cypress --save-dev
//아니면
$yarn add cypress --dev

Cypress 열기

1
$./node_modules/.bin/cypress open
  • 터미널에 입력하면 cypress 창이 뜬다.

파일명

  • 원본파일.spec.js

테스트 하기

  • describe('테스트 이름', 콜백함수) 메서드를 사용해 시작
  • beforeEach(콜백함수) 메서드로 세팅
    • cy.visit('주소') 메서드로 주소 연결
  • it('이름', 콜백함수) 각 테스트 코드는 it 안에 작성
  • cy.get("클래스, id 선택") 메서드를 사용해서 엘리먼트 선택
  • .shoud("조건","값") 메서드를 사용해서 확인

예제


describe("계산기 애플리케이션 테스트", () => {
    beforeEach(() => {
        cy.visit("http://127.0.0.1:5500/index.html")
    });

    it("두 숫자를 더하면 덧셈 결과 값 출력", () => {
        cy.get(".digit").contains("2").click();
        cy.get(".operation").contains("+").click();
        cy.get(".digit").contains("1").click();
        cy.get(".operation").contains("=").click();
        cy.get("#total").should("have.text", "3").click();
    })
});

Reference

  • https://docs.cypress.io