간단한 E2E테스트 코드를 통해 Cypress학습하기

기본적인 Queries, Assertions

Cypress로 어떻게 E2E테스트를 진행하는지에 대해서 간단한 예시를 통해 알아보자.

describe("음식점 관리 기능 구현 테스트", () => {

  it("음식점 추가 기능 구현 테스트", () => {
    cy.visit("http://localhost:8080/");
    cy.get(".gnb__button").click();
    cy.get("#category").select("중식");
    cy.get("#name").type("홍콩반점");
    cy.get("#distance").select("10");
    cy.get("#add-button").click();
    cy.get("#홍콩반점").should("be.visible");
    cy.get(".restaurant-list")
      .find(".star-container")
      .find(".star-icon")
      .should("have.attr", "src")
      .and("include", "lined");
  });
});

it을 통해 작은 테스트를 작성할 수 있고 이를 묶어 주는 기능을 describe가 한다.

테스트 코드를 작성하기에 앞서 테스트할 url이 정상적으로 작동하는지 확인한다.

그리고 해당 url로 접속하는 코드를 작성한다.

cy.visit("http://localhost:8080/");

다음으로 특정 요소에 접근하기 위한 코드를 다음과 같이 작성한다.

cy.get(".gnb__button")

만약 동일한 id나 class가 존재하여 식별이 되지 않는다면 다음과 같은 방법을 수행한다.

cy.get(".restaurant-list").find(".star-container").find(".star-icon")

그리고 특정 요소에서의 이벤트를 실행할 코드를 다음과 같이 작성한다.

cy.get(".gnb__button").click();
cy.get("#category").select("중식");
cy.get("#name").type("홍콩반점");
cy.get("#distance").select("10");

마지막으로 확인하고자하는 것을 다음과 같이 작성한다.

cy.get(".restaurant-list")
  .find(".star-container")
  .find(".star-icon")
  .should("have.attr", "src")
  .and("include", "lined");
  });

//이는 특정 요소의 속성중 src의 값에 'lined'가 포함되어 있는지 확인하는 코드이다.

beforEach

같은 코드를 공유하는 테스트에 대하여 beforeEach를 활용하여 다음과 같이 작성할 수 있다.

describe("음식점 관리 기능 구현 테스트", () => {

  beforeEach(() => {
    cy.visit("http://localhost:8080/");
    cy.get(".gnb__button").click();
    cy.get("#category").select("중식");
    cy.get("#name").type("홍콩반점");
    cy.get("#distance").select("10");
    cy.get("#add-button").click();
  });

  it("음식점 추가 기능 구현 테스트", () => {
    cy.get("#홍콩반점").should("be.visible");
    cy.get(".restaurant-list")
      .find(".star-container")
      .find(".star-icon")
      .should("have.attr", "src")
      .and("include", "lined");
  });

  it("음식점 삭제 기능 구현 테스트", () => {
    cy.get("#홍콩반점").click();
    cy.get("#remove-button").click();
    cy.get("#홍콩반점").should("not.exist");
  });
});

custom command

중복되는 코드를 관리하는 방법으로 custom command가 있다.

Cypress.Commands.add("selectCategory", (category) => {
  cy.get("#category-filter").select(category);
});

Cypress.Commands.add("findStarOnModal", () => {
  cy.get(".modal").find(".star-container").find(".star-icon");
});

Cypress.Commands.add("커스텀이름", () => {
  ...
});

cypress/support 에 위치하는 command.js 파일에서 이런식으로 만들어 관리해주면 끗.

config

cypress.config.ts 파일은 Cypress 테스트 프레임워크에서 사용되는 환경 변수 및 설정을 정의하는 TypeScript 파일이다.

이 파일은 Cypress가 시작될 때 자동으로 로드되며, Cypress가 작동하는 방식을 제어하고 사용자 정의 설정을 지정하는 데 사용된다. 일반적으로 이 파일에서 설정하는 항목은 다음과 같다.

• baseUrl: 애플리케이션의 기본 URL을 정의
• viewportWidth, viewportHeight: Cypress에서 사용할 뷰포트 크기를 정의
• defaultCommandTimeout: Cypress에서 명령을 실행할 때 타임아웃 시간을 정의
• video: Cypress 실행 중 생성된 동영상 파일의 저장 위치를 정의

const BASE_URL = "http://localhost:8080";

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    viewportWidth: 375,
    viewportHeight: 812,
		defaultCommandTimeout: 2000,
    baseUrl: BASE_URL,
  },
});

다음과 같이 baseUrl을 사용할 수 있다.

cy.visit(Cypress.config().baseUrl);
```![](https://velog.velcdn.com/images/shackstack/post/a3e7cca0-6fcf-4919-a41c-ce2cb8de1906/image.png)