cypress 테스트 작성방법 기본

GJ·2022년 10월 13일

기본 구조

기본구조는 jest와 같다.
매크로 짜듯이 하고싶은 테스트 내용을 나열하면 된다.

describe("통합 테스트 제목", () => {
  it("테스트 제목", () => {
    // cypress 명령어 작성
  });
});

페이지 이동

cy.visit("http://localhost:3002/login");

특정 input 선택 및 타이핑

cy.get("input[name=email]").type(Cypress.env("EMAIL"));

버튼 클릭하기

cy.get("button").contains("Sign in").click();

현재 페이지 주소 확인하기

cy.location("pathname").should("equal", "/models");

alert 내용 확인하기

cy.on("window:alert", (content) => {
  expect(content).to.contains(
    "Only alphabets, numbers, and underscores can be entered in the model name"
  );
});

select 키, 값 확인

cy.get("select[name=task]")
  .select("Image Classification")
  .should("have.value", "image_classification");

file input에 파일 삽입

// as 이용하여 별명으로 재사용, 파일 읽을 때 fixture 메소드 사용하면 동적 변경 불가
cy.readFile("cypress/fixtures/mobilenet_v1.h5", null).as("model"); 
cy.get("input[type=file]").selectFile("@model", { force: true });

ajax 통신 대기

cy.intercept("POST", "**/models").as("postModel"); // 별명으로 재사용
cy.wait("@postModel"); // then으로 이어 붙일 필요 없이 아래에 진행할 내용을 작성
cy.on("window:alert", (content) => {
  expect(content).to.contains("Model is uploaded successfully");
});