[Vue.js] E2E 테스트 - 테스트 연습

/cypress/integration/ 폴더 내부를 비워준 뒤, first.test.js를 생성한다.

테스트 기본 골자

기본 골자는 단위 테스트와 비슷하지만, test 키워드 대신 it라는 키워드를 사용한다.

테스트 로직

cy는 jest와 같은 테스트 전역 변수이다.

테스트의 내용이 localhost:8080으로 접속하는 것이므로 터미널을 두개 사용하여

하나는 개발서버를 열고, 나머지 하나는 cypress를 실행시켜야 한다.

 

테스트 결과

구성 옵션 추가

매번 테스트할 때마다 cy.visit('http://localhost:8080')을 입력하게되면, 포트 변경에 유연하게 대처하기 어렵다.

이를 기본 구성옵션으로 만들어보자.

/cypress.json

/cypress/integration/first.test.js

이제 직접 주소를 다 치는 대신 '/'를 통해 접속이 가능하다.

결과

화면 해상도도 설정한 크기대로 고정됐다.

요소 찾아보기

cy.get() 메소드를 통해 클래스를 특정하여 요소를 찾을 수 있다.

만약 없는 요소를 찾게 된다면 다음처럼 에러가 발생한다.