Cypress (3) 테스트를 추가해보자.

예제 템플릿 에서는 이메일을 입력하고 구독하는 기능이 있다.

기능의 테스트를 작성해 보자.

cypress/e2e/subscribe.cy.ts

describe("Newsletter Subscribe Form", () => {
  beforeEach(() => {
    cy.visit("http://localhost:3000")
  })

  it("allows users to subscribe to the email list", () => {
    cy.getByData("email-input").type("tom@aol.com")
  })
})

data-set 속성의 값이 email-input 인 요소에 tom@aol.com의 값을 입력한다.

요소를 찾고, 값 입력이 before, after로 잘 표현되는걸 볼 수 있다.

cy.getByData("submit-button").click()

클릭도 추가해보자.

잘 동작한다.

아래 코드도 추가해보자.

cy.getByData("success-message").should("exist").contains("tom@aol.com") // 성공 메시지 요소 선택 및 존재 체크 후 이메일 주소가 포함되어 있는지 확인

성공 메시지가 존재하는지 체크 후 메일 주소가 tom@aol.com를 포함하는지 검사한다.

data-test 등 데이터 속성에 대한 값을 찾으려 한다면 ?
1. 개발자 도구를 통해 직접 접근하여 본다.
2. cypress 부라우저 내 에서 주소 옆 조준 버튼을 클릭하여 본다.

2번이 압도적으로 편해보여서 자주 사용할 예정이다.

자 위에서는 유효한 양식의 이메일을 넣었고 이제는 유효하지 않은 이메일을 넣어보자.

  it("does NOT allow an invalid email address", () => {
    cy.getByData("email-input").type("tom")
    cy.getByData("submit-button").click()
    cy.getByData("success-message").should("not.exist") // 성공메시지가 존재하지 않는지 확인
  })

위 코드는 정상적으로 테스트 가능하고, 예제 문제를 풀어보자.

우선 이메일 주소는 john@example.com 를 무조건 사용해야 한다고 하며, 이미 구독중인 경우 뉴스레터에 등록하지 못하게 테스트를 작성해야 한다.

  it("prevents email subscriptions of already registered users", () => {
    cy.getByData("email-input").type("john@example.com")
    cy.getByData("submit-button").click()
  })

우선 위 코드를 작성하고 테스트를 해보자.

실패 메시지가 보이며, data-test="server-error-message" 를 가진다.
그렇다면, 답이 나왔다.

  it("prevents email subscriptions of already registered users", () => {
    cy.getByData("email-input").type("john@example.com")
    cy.getByData("submit-button").click()
    cy.getByData("server-error-message")
      .should("exist")
      .contains("Error: john@example.com")
  })

server-error-message의 data-test 속성을 가진 요소를 찾고 존재하는지 확인하며 Error: john@example.com 내용을 포함하는지 확인한다.