# cypress

70개의 포스트
post-thumbnail

1. React Cypress 절대경로 설정

Cypress란? > Cypress는 JavaScript로 구현된 End-to-End(E2E) 테스트 프레임워크입니다. 사용자의 관점에서 전체 시스템의 동작을 검증하는 것을 목적으로 하며, 테스트를 통해 자동화된 UI 테스트, API 테스트, 브라우저 테스트 등을 수행

4일 전
·
0개의 댓글
·

간단한 E2E테스트 코드를 통해 Cypress학습하기

Cypress로 어떻게 E2E테스트를 진행하는지에 대해서 간단한 예시를 통해 알아보자.it을 통해 작은 테스트를 작성할 수 있고 이를 묶어 주는 기능을 describe가 한다.테스트 코드를 작성하기에 앞서 테스트할 url이 정상적으로 작동하는지 확인한다. 그리고 해당

2023년 3월 13일
·
0개의 댓글
·

[Cypress] async/await가 안 먹는 then에서 Promise로 함수 return 시키기

함수 내에서 변수를 선언then을 이용해 값 할당변수들 return결과 undefined 나옴...비동기 때문이구나 싶어서 async await 활용(나도 이제 비동기 따위 쉽게 해결하는 고수인가?)undefined....then 안에 return을 넣으면 되잖아!!(

2023년 3월 4일
·
0개의 댓글
·
post-thumbnail

[Cypress] should('have.text')와 should('include.text')의 차이

have? 가지다 아니에요? 그럼 포함만 해도 합겨...절대 아니에요!!! have는 엄격하게 딱 작성한 text나 value와 정확히 일치해야 합격이에요포함하고 있으면 불합격이에요!include 많이 익숙하쥬??ㅎㅎㅎinclude는 적은 내용이 포함!!! 포함!!!!

2023년 3월 4일
·
0개의 댓글
·

[Cypress] then을 이용해 찾는 요소의 존재 여부 확인

cy.get()으로 원하는 엘리먼트를 얻고 보통 invoke를 사용해요그런데 그런 과정 없이 바로 then을 사용하고, 매개변수를 넣어주면 get()에 쓴 요소들이 배열로 나와요! 따란따란따라라라라라나!!!!그 요소들의 길이를 확인했을 때 1 이상이면 존재!0이면 존재

2023년 3월 4일
·
0개의 댓글
·

[Cypress] 사이프레스 여러가지 명령어

사이프레스 로컬에서 테스트모든 파일의 시작콜백 함수에 담을 내용 정리단위 테스트 진행되기 전마다 실행될 명령url로 이동 후 체크cypress 테스트 화면 지정콜백 함수에 테스트 할 명령어 입력it가 시작하기 전마다 beforeEach 실행사이프레스 오픈 후 왼쪽 상단

2023년 2월 12일
·
0개의 댓글
·

[Cypress] Cypress Intro.

Cypress Intro

2023년 2월 8일
·
0개의 댓글
·
post-thumbnail

웹 개발자의 최소한 이정도 테스트 코드 만큼은 (feat.Cypress)

웹 개발자로서 최소한 이정도 테스트는 해야한다.

2023년 2월 4일
·
2개의 댓글
·

Cypress + Github action으로 vercel Preview에 대해 E2E test 진행.

1.Github Action을 사용하여 Preview Deploy 생성. 2.생성한 Preview Deploy에 대해 E2테스트 작성 후 성공할 경우에만 Production Deploy에 병합. 공식 사이트에 설치방법이 소개되어있다. 설치법은 두가지다. npm으로 설

2023년 1월 10일
·
0개의 댓글
·

Cypress (11) 데이터 사용하여 동적 테스트 구축

데이터를 기반으로 동적 테스트의 모든 측면을 구성하는것우선 로그인 양식을 예로 테스트를 할때이런 형태로 유저네임과 패스워드를 입력한다..fixture() 를 사용해서도 사용한다.아래는 API, DB 등 데이터를 사용하는 테스트 코드이다.여기서 사용된 .database(

2023년 1월 4일
·
0개의 댓글
·

Cypress (10) .its, .invoke, .request, .within

Cypress 에서 유용한 메소드 4가지를 알아보자.subject의 속성에 대해 접근할 때 사용한다.its docssubject에서 JS함수를 호출 할 수 있다.아래 예시는 JS 데이터 유형에 JS 함수를 호출한 예시이다.invoke docsHTTP 요청을 만든다.re

2023년 1월 4일
·
0개의 댓글
·
post-thumbnail

Cypress (9) browser, viewport test

Cypress 에서 Chromium기반(크롬, 엣지, 일렉트론) 및 Firefox를 지원한다.UI를 통해 실행 브라우저를 선택할 수 있고, CLI로도 가능하다.picutre1브라우저벼로 테스트를 하려면 옵션을 넣는다.cross browser testing(https&#

2023년 1월 4일
·
0개의 댓글
·

Cypress (8) intercepting network request

네트워크 요청 및 응답을 조작하고 테스트 해보자..intercept() 를 기본적인 사용법은 아래와 같다./users 경로에 대한 모든 POST요청을 가로챈다.요청에 대한 대기같은 추가작업을 위해 대체로 별칭을 부여한다.응답데이터를 mock 하기 위해 재정의 해야할 때

2023년 1월 4일
·
0개의 댓글
·

Cypress (7) debug, log

CLI를 통해서 헤드리스 모드에서 오류 발생 시 스크린샷과 비디오를 자동으로 기록한다.실패지점 스크린샷과 실패테스트 비디오로 제공하여 매우 유용하다.cy.screensh

2023년 1월 4일
·
0개의 댓글
·

Cypress (6) alias, sharing context 와 wait

alias와 sharing context, wait

2023년 1월 3일
·
0개의 댓글
·

Cypress (5) 리턴과 비동기 그리고 랩핑

사이프레스는 서브젝트(subject)를 반환하지 않는다고 한다.그래서 아래와 같은 방식으로는 사용이 불가능하다고 한다.단, 상태가 변하는 객체일시에는 const 를 사용하여 변화를 감지한다.위에서 사이프레스는 서브젝트를 리턴 하지 않는다고 하였다. 그럼 어떻게 직접 상

2023년 1월 2일
·
0개의 댓글
·
post-thumbnail

Cypress (4) context로 섹션 나누고 data 속성없는 요소에 접근해보자

context() 를 통해 섹션을 나눌 수 있으며, 테스트 통과 결과를 통해서 볼 수 있다. picture1코드에서의 hero section이 있다. 이로서 섹션을 나눌 수 있다는걸 알았다.예제 템플

2023년 1월 2일
·
0개의 댓글
·
post-thumbnail

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

예제 템플릿 에서는 이메일을 입력하고 구독하는 기능이 있다.picture1기능의 테스트를 작성해 보자.cypress/e2e/subscribe.cy.tsdata-set 속성의 값이 email-input 인 요소에 tom@aol.com의 값을 입력한다.picutre2pic

2022년 12월 29일
·
0개의 댓글
·