Cypressコードの例

30925 ワード

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(""));
    });
  });

});
description(「A」,関数)
このトピックはフォルダの感覚で実行されます.
関数は、全体をバンドルする役割を果たします.
cv.visit('url')
htmlのurlをサーバまたはローカルで取得し、cypressに適用します.
it(「B」、関数)
対応する関数の内容を実行します.
cy.get(".class名")またはcy.get("#id名")
このオブジェクトを処理します.
cy.get('~').contains(変数値).click()
ターゲットで変数値をクリックした場合
cy.get('~').have(「have.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();
  });
});
アラートの処理
  const checkAlertMessage = (message) => {
    cy.on("window:alert", (txt) => {
      expect(txt).to.contains(message);
    });
  };
最高の和弦のようで、最高の和弦のようです.
どのドメインに値を入力しますか?
const inputCount = (count = 0) => {
    cy.get("#inputTryNumber").type(count);
    cy.get("#submitTryNumber").click();
  };
~.type(値)形式で行います.