Cypress 코드 예시

calculator.spec.js

describe("calculator", () => {
  beforeEach(() => {
    cy.visit("http://localhost:63342/js-calculator/index.html?_ijt=go4823f8tsq4tagp9kh2q9s0mf");
  });

  describe("숫자 버튼", () => {
    [1, 2, 3, 4, 5, 6, 7, 8, 9].forEach((number) => {
      it(`${number} 클릭 시 상단의 번호 바뀜`, () => {
        cy.get(".digit").contains(number).click();

        cy.get("#total").should("have.text", number);
      });
    });

    it("두 번 연속 클릭 시 뒤에 추가됨", () => {
      const before = "1";
      const after = "2";

      cy.get(".digit").contains(before).click();
      cy.get(".digit").contains(after).click();

      cy.get("#total").should("have.text", before + after);
    });

    it("네번째 자릿수 입력은 먹히지 않음", () => {
      const digits = ["1", "2", "3", "4"];

      digits.forEach((digit) => cy.get(".digit").contains(digit).click());

      cy.get("#total").should("have.text", digits.slice(0, 3).join(""));
    });
  });

});

describe("A",함수)

폴더같은 느낌으로 해당 주제에 대해 실행을 한다.
함수는 전체를 묶어주는 역할을 한다.

cv.visit('url')

서버 혹은 로컬에 html에 대한 url을 가져와 cypress에 적용시킨다.

it("B",함수)

해당 함수 내용을 실행한다.

cy.get('.class이름') or cy.get('#id이름')

해당 대상에 대한 처리를 진행한다.

cy.get('~').contains(변수값).click()

어떤 대상에서 변수값을 눌렀을때

cy.get('~').should("have.text" , 결과값)

'~'에 있는 text내용이 결과값과 같은지 테스트해준다.

racing.spec.js

describe("ui-racing", () => {
  beforeEach(() => {
    cy.visit(
      "http://localhost:63342/js-racingcar/index.html?_ijt=u5vhbpbd37lqpo3s77hf4pkifs"
    );
  });
  const NAMES = "EAST,WEST,SOUTH,NORTH";
  const NUMBER = 5;
  const NAMES_ERROR_MESSAGE =
    "유효하지 않은 이름 길이입니다. 자동차의 이름은 1자이상, 5자 이하만 가능합니다";
  const COUNT_ERROR_MESSAGE =
    "입력한 레이싱 횟수가 너무 적습니다. 레이싱 횟수는 1이상이어야 합니다.";
  const WINNER_MESSAGE = "🎇🎇🎇🎇축하합니다!🎇🎇🎇🎇";
  const inputNames = (names = "") => {
    names.trim() && cy.get("#inputCarName").type(names);
    cy.get("#submitCarName").click();
  };

  const inputCount = (count = 0) => {
    cy.get("#inputTryNumber").type(count);
    cy.get("#submitTryNumber").click();
  };

  const checkAlertMessage = (message) => {
    cy.on("window:alert", (txt) => {
      expect(txt).to.contains(message);
    });
  };

  const restartRacing = () => {
    cy.get("#restart").click();
  };

  const getRandomNumber = () => {
    return Math.floor(Math.random() * 10) + 1;
  };

  const goRacing = (number = 1) => {
    inputNames(NAMES);
    inputCount(number);
    cy.wait(number * 1000 + 2000);
    checkAlertMessage(WINNER_MESSAGE);
  };

  it("자동차이름 제한", () => {
    inputNames();
    checkAlertMessage(NAMES_ERROR_MESSAGE);
  });

  it("자동차이름 유효성 체크", () => {
    inputNames("1,");
    checkAlertMessage(NAMES_ERROR_MESSAGE);
  });

  it("횟수 유효성 체크(0)", () => {
    inputNames(NAMES);
    inputCount(0);
    checkAlertMessage(COUNT_ERROR_MESSAGE);
  });

  it("횟수 유효성 체크(음수)", () => {
    inputNames(NAMES);
    inputCount(-5);
    checkAlertMessage(COUNT_ERROR_MESSAGE);
  });

  it("우승자 선정", () => {
    inputNames(NAMES);
    inputCount(NUMBER);
    cy.wait(NUMBER * 1000 + 2000);
    checkAlertMessage(WINNER_MESSAGE);
  });

  it("3게임 진행", () => {
    goRacing(getRandomNumber());
    restartRacing();

    goRacing(getRandomNumber());
    restartRacing();

    goRacing(getRandomNumber());
    restartRacing();
  });
});

alert처리하기

  const checkAlertMessage = (message) => {
    cy.on("window:alert", (txt) => {
      expect(txt).to.contains(message);
    });
  };

제일 좋은 코드인듯좋은 코드인듯

어떤 Dom에 값 입력하기

const inputCount = (count = 0) => {
    cy.get("#inputTryNumber").type(count);
    cy.get("#submitTryNumber").click();
  };

~.type(값) 형태로 한다.