Frontend/Cypress

Cypress, 브라우저의 localStorage에 저장된 값을 검증하는 코드 테스트

wam 2024. 11. 25. 18:51

 

describe("로그인", () => {
  const user = cy;

  it("양식을 작성하고 로그인해야 합니다.", () => {
    user.visit("/");
    user.findByPlaceholderText("이메일").type("client@mail.com");
    user.findByPlaceholderText("비밀번호").type("123123");
    user
      .findByRole("button")
      .should("not.have.class", "pointer-events-none")
      .click();
    user.window().its("localStorage.token-name").should("be.a", "string");
  });
});
  • 윈도우의 로컬스토로지에 접근 후 로그인
  • 테스트할 때 토큰을 기억 못하기 때문에 따로 로그아웃을 해주지 않아도 된다.
  • 각 테스트는 분리되어 있다. 별도로 로그아웃을 해주지 않아도 된다.

 

 

.window()

  • window 객체는 브라우저의 전역 객체로, 페이지와 관련된 다양한 속성 및 메서드에 접근할 수 있다.
  • 현재 활성화된 페이지의 window 객체를 가져온다.
  • 예를 들어, window 객체에는 localStorage, sessionStorage, document, navigator, location 등이 포함되어 있다.

 

 

.its("localStorage.token-name")

  • .its(): 이 메서드는 Cypress command chain에서 객체의 속성(property)에 접근하기 위해 사용된다.
  • 여기서 "localStorage.nuber-token"은 localStorage 객체에서 token-name이라는 저장된 항목에 접근하는 것이다.

 

 

.should("be.a", "string")

  • .should(): Cypress에서 어떤 조건을 만족하는지 확인하는 메서드이다.
  • "be.a", "string": nuber-token의 값이 문자열(string) 타입인지 검사한다.
  • be.a는 타입을 확인하는 메서드이다.
  • "string"은 확인하고자 하는 데이터 타입이다.
  • localStorage에 저장된 nuber-token 값이 문자열 타입인지 확인하는 것이다.