Cypress
1.Cypress (1) 기본 코드 읽어보면서 파악하기
Cypress의 경우 End-To-End에 테스트에 적합하고 Cypress Stuido를 통해 테스트에 대한 레코딩도 가능하여, 업무 QA단계에서 스프레드 시트를 통해 테스트를 진행 해온걸 조금 더 개선시킬 수 있을거라 생각되어 공부하려고 한다.우선 대표적으로 마음에
2.Cypress (3) 테스트를 추가해보자.
예제 템플릿 에서는 이메일을 입력하고 구독하는 기능이 있다.picture1기능의 테스트를 작성해 보자.cypress/e2e/subscribe.cy.tsdata-set 속성의 값이 email-input 인 요소에 tom@aol.com의 값을 입력한다.picutre2pic
3.Cypress (2) data 속성의 접근방식을 개선해보자.(커스텀 명령어)
저번 게시글에는 요소에 접근할때 class명이나 ID가 변경되는것을 고려해 data-set 등 data 속성을 통해 접근하는 코드를 보았다.코드길이가 더 길어지는 신기한(?) 모습을 보았고 그걸 더 개선해보자.우선 그전에 cypress 에서는 커스텀 명령을 만들 수 있
4.Cypress (4) context로 섹션 나누고 data 속성없는 요소에 접근해보자
context() 를 통해 섹션을 나눌 수 있으며, 테스트 통과 결과를 통해서 볼 수 있다. picture1코드에서의 hero section이 있다. 이로서 섹션을 나눌 수 있다는걸 알았다.예제 템플
5.Cypress (5) 리턴과 비동기 그리고 랩핑
사이프레스는 서브젝트(subject)를 반환하지 않는다고 한다.그래서 아래와 같은 방식으로는 사용이 불가능하다고 한다.단, 상태가 변하는 객체일시에는 const 를 사용하여 변화를 감지한다.위에서 사이프레스는 서브젝트를 리턴 하지 않는다고 하였다. 그럼 어떻게 직접 상
6.Cypress (6) alias, sharing context 와 wait
alias와 sharing context, wait
7.Cypress (7) debug, log
CLI를 통해서 헤드리스 모드에서 오류 발생 시 스크린샷과 비디오를 자동으로 기록한다.실패지점 스크린샷과 실패테스트 비디오로 제공하여 매우 유용하다.cy.screensh
8.Cypress (8) intercepting network request
네트워크 요청 및 응답을 조작하고 테스트 해보자..intercept() 를 기본적인 사용법은 아래와 같다./users 경로에 대한 모든 POST요청을 가로챈다.요청에 대한 대기같은 추가작업을 위해 대체로 별칭을 부여한다.응답데이터를 mock 하기 위해 재정의 해야할 때
9.Cypress (9) browser, viewport test
Cypress 에서 Chromium기반(크롬, 엣지, 일렉트론) 및 Firefox를 지원한다.UI를 통해 실행 브라우저를 선택할 수 있고, CLI로도 가능하다.picutre1브라우저벼로 테스트를 하려면 옵션을 넣는다.cross browser testing(https&#
10.Cypress (10) .its, .invoke, .request, .within
Cypress 에서 유용한 메소드 4가지를 알아보자.subject의 속성에 대해 접근할 때 사용한다.its docssubject에서 JS함수를 호출 할 수 있다.아래 예시는 JS 데이터 유형에 JS 함수를 호출한 예시이다.invoke docsHTTP 요청을 만든다.re
11.Cypress (11) 데이터 사용하여 동적 테스트 구축
데이터를 기반으로 동적 테스트의 모든 측면을 구성하는것우선 로그인 양식을 예로 테스트를 할때이런 형태로 유저네임과 패스워드를 입력한다..fixture() 를 사용해서도 사용한다.아래는 API, DB 등 데이터를 사용하는 테스트 코드이다.여기서 사용된 .database(