# cypress
1. React Cypress 절대경로 설정
Cypress란? > Cypress는 JavaScript로 구현된 End-to-End(E2E) 테스트 프레임워크입니다. 사용자의 관점에서 전체 시스템의 동작을 검증하는 것을 목적으로 하며, 테스트를 통해 자동화된 UI 테스트, API 테스트, 브라우저 테스트 등을 수행
간단한 E2E테스트 코드를 통해 Cypress학습하기
Cypress로 어떻게 E2E테스트를 진행하는지에 대해서 간단한 예시를 통해 알아보자.it을 통해 작은 테스트를 작성할 수 있고 이를 묶어 주는 기능을 describe가 한다.테스트 코드를 작성하기에 앞서 테스트할 url이 정상적으로 작동하는지 확인한다. 그리고 해당
[Cypress] async/await가 안 먹는 then에서 Promise로 함수 return 시키기
함수 내에서 변수를 선언then을 이용해 값 할당변수들 return결과 undefined 나옴...비동기 때문이구나 싶어서 async await 활용(나도 이제 비동기 따위 쉽게 해결하는 고수인가?)undefined....then 안에 return을 넣으면 되잖아!!(
[Cypress] should('have.text')와 should('include.text')의 차이
have? 가지다 아니에요? 그럼 포함만 해도 합겨...절대 아니에요!!! have는 엄격하게 딱 작성한 text나 value와 정확히 일치해야 합격이에요포함하고 있으면 불합격이에요!include 많이 익숙하쥬??ㅎㅎㅎinclude는 적은 내용이 포함!!! 포함!!!!
[Cypress] then을 이용해 찾는 요소의 존재 여부 확인
cy.get()으로 원하는 엘리먼트를 얻고 보통 invoke를 사용해요그런데 그런 과정 없이 바로 then을 사용하고, 매개변수를 넣어주면 get()에 쓴 요소들이 배열로 나와요! 따란따란따라라라라라나!!!!그 요소들의 길이를 확인했을 때 1 이상이면 존재!0이면 존재
[Cypress] Cypress Code with commands
How to write Cyrpess Test code with commands
[Cypress] 사이프레스 여러가지 명령어
사이프레스 로컬에서 테스트모든 파일의 시작콜백 함수에 담을 내용 정리단위 테스트 진행되기 전마다 실행될 명령url로 이동 후 체크cypress 테스트 화면 지정콜백 함수에 테스트 할 명령어 입력it가 시작하기 전마다 beforeEach 실행사이프레스 오픈 후 왼쪽 상단
Cypress + Github action으로 vercel Preview에 대해 E2E test 진행.
1.Github Action을 사용하여 Preview Deploy 생성. 2.생성한 Preview Deploy에 대해 E2테스트 작성 후 성공할 경우에만 Production Deploy에 병합. 공식 사이트에 설치방법이 소개되어있다. 설치법은 두가지다. npm으로 설
Cypress (11) 데이터 사용하여 동적 테스트 구축
데이터를 기반으로 동적 테스트의 모든 측면을 구성하는것우선 로그인 양식을 예로 테스트를 할때이런 형태로 유저네임과 패스워드를 입력한다..fixture() 를 사용해서도 사용한다.아래는 API, DB 등 데이터를 사용하는 테스트 코드이다.여기서 사용된 .database(
Cypress (10) .its, .invoke, .request, .within
Cypress 에서 유용한 메소드 4가지를 알아보자.subject의 속성에 대해 접근할 때 사용한다.its docssubject에서 JS함수를 호출 할 수 있다.아래 예시는 JS 데이터 유형에 JS 함수를 호출한 예시이다.invoke docsHTTP 요청을 만든다.re
Cypress (9) browser, viewport test
Cypress 에서 Chromium기반(크롬, 엣지, 일렉트론) 및 Firefox를 지원한다.UI를 통해 실행 브라우저를 선택할 수 있고, CLI로도 가능하다.picutre1브라우저벼로 테스트를 하려면 옵션을 넣는다.cross browser testing(https&#
Cypress (8) intercepting network request
네트워크 요청 및 응답을 조작하고 테스트 해보자..intercept() 를 기본적인 사용법은 아래와 같다./users 경로에 대한 모든 POST요청을 가로챈다.요청에 대한 대기같은 추가작업을 위해 대체로 별칭을 부여한다.응답데이터를 mock 하기 위해 재정의 해야할 때
Cypress (7) debug, log
CLI를 통해서 헤드리스 모드에서 오류 발생 시 스크린샷과 비디오를 자동으로 기록한다.실패지점 스크린샷과 실패테스트 비디오로 제공하여 매우 유용하다.cy.screensh
Cypress (5) 리턴과 비동기 그리고 랩핑
사이프레스는 서브젝트(subject)를 반환하지 않는다고 한다.그래서 아래와 같은 방식으로는 사용이 불가능하다고 한다.단, 상태가 변하는 객체일시에는 const 를 사용하여 변화를 감지한다.위에서 사이프레스는 서브젝트를 리턴 하지 않는다고 하였다. 그럼 어떻게 직접 상
Cypress (4) context로 섹션 나누고 data 속성없는 요소에 접근해보자
context() 를 통해 섹션을 나눌 수 있으며, 테스트 통과 결과를 통해서 볼 수 있다. picture1코드에서의 hero section이 있다. 이로서 섹션을 나눌 수 있다는걸 알았다.예제 템플
Cypress (3) 테스트를 추가해보자.
예제 템플릿 에서는 이메일을 입력하고 구독하는 기능이 있다.picture1기능의 테스트를 작성해 보자.cypress/e2e/subscribe.cy.tsdata-set 속성의 값이 email-input 인 요소에 tom@aol.com의 값을 입력한다.picutre2pic