미사여구 날리고 알맹이만!

설치부터 환경설정

yarn add cypress

package.json script

"test-cy": "cypress run"

---

테스팅 방법

npx cypress open

E2E Testing => Chrome

본인이 cypress/e2e에 만든 name_spec.cy.js의 테스트들이 화면에 렌더링 된다.
해당 폴더에 e2e test들을 추가해주자.

(실행하면 이렇게 된다)

yarn test-cy

---

커스텀 Command 기능

BDD 기반으로 E2E Test가 진행되기 때문에, 반복되는 행동을 커맨드로 분리할 수 있다.

예제 코드)

describe('로또를 구매하면', () => {
  beforeEach(() => {
    cy.visit('http://localhost:9000');
  });

  it('구매한 로또 티켓이 렌더링된다.', () => {
    // 로또를 구매한 뒤, 구매 버튼을 누르는 행위가 반복된다.
    const purchaseAmount = 5000;
    cy.get(SELECTOR.TICKET.PURCHASE_AMOUNT_INPUT).type(purchaseAmount);
    cy.get(SELECTOR.TICKET.FORM).submit();

    cy.get('.test-ticket-amount').should('contain', '총 5개를 구매하였습니다.');
    cy.get('.test-tickets').children().should('have.length', 5);
  });
});

로또를 많이 구매해야 할 것 같으니 커맨드로 분리하자.

cypress/support/command.js에 커맨드를 추가한 뒤, cy 객체에 접근하여 커스텀 메서드(커맨드)를 사용할 수 있다.

// cypress/support/commands/lotto.js
import { SELECTOR } from '../../src/constants';

Cypress.Commands.add('purchaseLotto', (amount) => {
  cy.get(SELECTOR.TICKET.PURCHASE_AMOUNT_INPUT).type(amount);
  cy.get(SELECTOR.TICKET.FORM).submit();
});

import해주자.

// cypress/support/commands.js
import './lotto';

현재 추가된 커맨드는 아래와 같이 사용할 수 있다.

describe('로또를 구매하면', () => {
  beforeEach(() => {
    cy.visit('http://localhost:9000');
  });

  it('구매한 로또 티켓이 렌더링된다.', () => {
    cy.purchaseLotto(5000);

    cy.get('.test-ticket-amount').should('contain', '총 5개를 구매하였습니다.');
    cy.get('.test-tickets').children().should('have.length', 5);
  });
});