wam
w__am 개발노트
wam
  • 분류 전체보기 (165)
    • CS 지식 (10)
      • 자료구조 (0)
      • 알고리즘 (0)
      • 컴퓨터 구조 (0)
      • 운영체제 (0)
      • 네트워크 (7)
      • 데이터베이스 (0)
      • 디자인 패턴 (3)
    • Frontend (131)
      • Three.js (64)
      • NPM (1)
      • Nest.js (19)
      • React (10)
      • Apollo (7)
      • TypeScript (2)
      • JavaScript (12)
      • HTML, CSS (1)
      • Jest (3)
      • E2E (5)
      • Cypress (7)
    • Database (12)
      • TypeORM (12)
    • IT 지식 (8)
      • 클라우드 서비스 (3)
      • 네트워크 (1)
      • 데이터 포맷 (2)
      • 기타 (2)
    • IT Book (2)
    • 유용한 사이트 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • 🐱 Github

인기 글

태그

  • 오프-프레미스(off-premise) 방식
  • gridhelper
  • Decorators
  • joi 에러
  • math.cos()
  • getelapsedtime()
  • threejs 개발 할 때 도움을 줄 수 있는 유틸리티
  • react 성능 최적화
  • three.js 구성 요소
  • getdelta()
  • 렌더링 성능 최적화
  • type-graphql
  • Interface
  • reactive variables
  • isabstract
  • 함수의 범위
  • e.preventdefault()
  • 함수 선언문
  • 함수 표현식
  • 원형적인 움직임
  • 데이터 포맷
  • 함수 리터럴
  • 디자인 패턴
  • 스코프
  • math.sin()
  • 삼각함수
  • mapped types
  • 초기 환경설정
  • API
  • axeshelper

최근 글

관리자

글쓰기 / 스킨편집 / 관리자페이지
hELLO · Designed By 정상우.
wam
Frontend/Cypress

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

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

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

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 값이 문자열 타입인지 확인하는 것이다.

 

 

저작자표시 변경금지 (새창열림)

'Frontend > Cypress' 카테고리의 다른 글

Custom Commands  (0) 2024.12.02
Intercept() : cypress를 이용해 request를 가로채는 법  (0) 2024.11.29
Cypress, React Testing Library에서 제공하는 비동기 쿼리 메서드 체인 안되는 부분 해결 방법  (0) 2024.11.25
Cypress testing libray 설치  (0) 2024.11.14
Cypress, 실제 사용 환경에 가까운 테스트  (0) 2024.11.14
    'Frontend/Cypress' 카테고리의 다른 글
    • Custom Commands
    • Intercept() : cypress를 이용해 request를 가로채는 법
    • Cypress, React Testing Library에서 제공하는 비동기 쿼리 메서드 체인 안되는 부분 해결 방법
    • Cypress testing libray 설치
    wam
    wam

    티스토리툴바

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.