문성준의 단단해지기

안녕하세요!

무작정 강의 듣고 따라 하기 2탄이자 마지막 시간입니다.

2023.03.19 - [자동화 QA로 단단해지기/cypress로 단단해지기] - [cypress]#01_cypress 무작정 강의 듣고 따라 하기 01

오늘은 계산기 애플리케이션을 테스트하는 코드를 작성해 볼 것입니다.

그럼 거두절미하고 

바로 시작하겠습니다.

vscode 실행 ~ cypress open

./node_modules/.bin/cypress open

요구사항 파악하기

## 🎯 기능 요구사항

- [ ] 2개의 숫자에 대해 덧셈이 가능하다.
- [ ] 2개의 숫자에 대해 뺄셈이 가능하다.
- [ ] 2개의 숫자에 대해 곱셈이 가능하다.
- [ ] 2개의 숫자에 대해 나눗셈이 가능하다.
- [ ] AC(All Clear)버튼을 누르면 0으로 초기화 한다.
- [ ] 숫자는 한번에 최대 3자리 수까지 입력 가능하다.
- [ ] 계산 결과를 표현할 때 소수점 이하는 버림한다.

테스트 케이스 작성 및 테스트할 링크 연결

describe("계산기 어플 테스트", () => {
  beforeEach(() => {
    cy.visit("http://127.0.0.1:5500/index.html");
  });

계산기 어플 테스트라는 test suite를 작성할 것이고

beforeEach를 통해 매번 테스트는 visit("링크")로 시작합니다.

첫 번째 요구사항 

it("2개의 숫자에 대해 덧셈이 가능하다.",()=>{
    cy.get(".digit").contains("2").click();
    cy.get(".operation").contains("+").click();
    cy.get(".digit").contains("1").click();
    cy.get(".operation").contains("=").click();
    cy.get("#total").should("have.text","3");
  });

it으로 첫 번째 testcase("2개의 숫자에 대해 덧셈이 가능하다")를 작성합니다.

우리는 숫자에 대한 클래스와 사칙연산에 대한 클래스가 무엇인지 알아야 합니다.

숫자는 digit , 사칙연산 버튼은 operation입니다.

첫 번째 숫자. digit에서 2를 contain 한 button을 click 해줍니다.

그리고. operation에서 + button을 click 해줍니다.

두 번째 숫자. digit에서 1을 contain 한 button을 click 해줍니다.

그리고 계산의 결과 값을 알기 위해 = button 을 click 해줍니다.

그 결과 (#total)는

should (여야만 합니다.) "have.text", "3"(3을 가진 텍스트여야 합니다.)

두 번째 ~ 네 번째 요구사항

it("2개의 숫자에 대해 뺄셈이 가능하다.",()=>{
    cy.get(".digit").contains("2").click();
    cy.get(".operation").contains("-").click();
    cy.get(".digit").contains("1").click();
    cy.get(".operation").contains("=").click();
    cy.get("#total").should("have.text","1");
  });


  it("2개의 숫자에 대해 곱셈이 가능하다.",()=>{
    cy.get(".digit").contains("2").click();
    cy.get(".operation").contains("x").click();
    cy.get(".digit").contains("2").click();
    cy.get(".operation").contains("=").click();
    cy.get("#total").should("have.text","4");
  });


  it("2개의 숫자에 대해 나눗셈이 가능하다.",()=>{
    cy.get(".digit").contains("2").click();
    cy.get(".operation").contains("/").click();
    cy.get(".digit").contains("2").click();
    cy.get(".operation").contains("=").click();
    cy.get("#total").should("have.text","1");
  });

위의 덧셈 테스트 코드와 별로 다를 게 없습니다.

각 사칙연산에 맞는 button을 입력해 줍니다.

다섯 번째 요구사항

it("AC버튼을 누르면 0으로 초기화" ,()=>{
    cy.get(".digit").contains("2").click();
    cy.get(".modifier").contains("AC").click();
    cy.get("#total").should("have.text", "0");
  });

AC버튼을 누르면 0으로 초기화되도록 testcase를 작성합니다.

초기화하기 전에 사전 조건은 

계산기에 값이 있어야 합니다.

따라서 2를 먼저 입력해 줍니다.

그리고. modifier에 포함된 AC button을 클릭해 줍니다.

그러면 결과 값(#total)은 should (여야만 합니다.) "have.text", "0"(0을 가진 텍스트여야 합니다.)

여섯 번째 요구사항

  it("숫자는 한번에 최대 3자리수까지 입력", ()=>{
    cy.get(".digit").contains("1").click();
    cy.get(".digit").contains("2").click();
    cy.get(".digit").contains("3").click();
    cy.get(".digit").contains("4").click();
    cy.get("#total").should("have.text", "123");
  });

이 계산기 애플리케이션은 숫자를 한 번에 최대 3 자릿수까지 입력 가능합니다.

따라서 3자리수까지 입력 가능한지 확인을 하기 위해

1~4를 클릭해 줍니다.

원래대로라면 1234 가 나오겠지만 애플리케이션 특성상 123 만 출력되어야 합니다.

그러면 결과 값(#total)은 should (여야만 합니다.) "have.text", "123"(123을 가진 텍스트여야 합니다.)

일곱 번째 요구사항

it("계산 결과를 표현할 때 소수점 이하는 버림한다.", ()=>{
    cy.get(".digit").contains("1").click();
    cy.get(".operation").contains("/").click();
    cy.get(".digit").contains("2").click();
    cy.get(".operation").contains("=").click();
    cy.get("#total").should("have.text","0");
  });

이 계산기 애플리케이션은 소수점 이하는 버립니다.

그래서 1 나누기 2를 하면 0.5 가 나오게 되지만

이 계산기 애플리케이션은 0 만 나오게 됩니다.

결과 값(#total)은 should (여야만 합니다.) "have.text", "0"(0을 가진 텍스트여야 합니다.)

테스트 결과

이 계산기 어플리케이션 과제를 끝으로

https://inf.run/Yb4d

강의가 마무리되었습니다.

이제 어떻게 응용해 볼지는 다음시간에 알아보도록 하겠습니다.

무작정 따라 해봤고

무작정 이해해 봤습니다.

그럼 다음시간에 만나요~