Cypress를 사용하여 JavaScript에서 e2e 테스트 소개

e2e 테스트는 무엇입니까?

엔드 투 엔드(e2e) 테스트는 하나의 기능이 아니라 전체 사용자 작업 흐름을 복제하는 흔한 소프트웨어 응용 프로그램 테스트이다.e2e테스트는 기본적으로 unit test에서 기술한 testing pyramid과 상반된다.철학적으로 말하자면, 단원 테스트는 하나의 기능 단원을 테스트하는 것에 관한 것이다.코드로 말하자면, 이것은 통상적으로 단일 함수, 클래스 방법 또는 유사한 것이다.E2e 테스트는 기능이 아닌 워크플로우를 테스트합니다.예를 들어, 워크플로우는 사용자가 응용 프로그램에 로그인하여 계정 잔액을 확인한 다음 로그아웃할 수 있습니다.E2e 테스트의 주요 장점은 여러 기능과 구성 요소, 그리고 그것들 간의 상호작용을 테스트하는 것이다.이것은 끝에서 끝까지의 테스트를 회귀 테스트에 특히 유용하게 한다.그러나 e2e 테스트의 단점은 코드 라이브러리의 많은 다른 부분을 테스트했기 때문에 운행 속도가 비교적 느리다는 것이다.
일반적으로 모든 기능이 아니라 가장 흔히 볼 수 있는 작업 흐름을 테스트해야 한다.단원 테스트를 사용할 때 팀의 목표는 100%의 코드 커버율을 실현하는 것이지만 e2e 테스트를 사용할 때 테스트 세트의 운행 속도가 매우 느릴 수 있다.E2e 테스트는 일반적으로 API를 호출하거나 전체 페이지를 표시하거나 자원을 불러오기 때문에 운행 속도가 느리고 시간이 소모된다.이것 또한 코드 라이브러리의 정확성 이외의 원인으로 인해 시간을 초과하거나 붕괴될 수 있다는 것을 의미한다.
일반적인 프런트엔드 샘플 프로젝트 (대기 사항 목록 응용 프로그램) 에 대해 몇 가지 가능한 엔드 투 엔드 테스트 샘플을 제공합니다.

로그인, 대기사항 추가 및 로그아웃

에 로그인하여 세 가지 대기사항을 추가하고 대기항목을 다시 정렬하며 대기사항의 텍스트를 편집하고 대기사항을 완성으로 표시한 후

을 취소합니다

은 로그아웃 후 처리해야 할 사항이 있는지 확인한 후 다시 로그인하여 데이터의 지속성을 검사합니다.

등등.

왜 e2e 테스트가 유용합니까

끝에서 끝까지 테스트는 단원급과 집적급 테스트에 대한 높은 보충이다.앞에서 말한 바와 같이 테스트에서 흔히 볼 수 있는 사용자 작업 흐름을 통해 e2e 테스트는 여러 가지 기능, 구성 요소와 코드 라이브러리의 일부분을 연결시킨다.이 시스템들은 함께 테스트를 하고 있기 때문에 시스템과 기능에 대해 더욱 큰 자신감을 가질 수 있다.단원이나 통합 테스트 프레임워크에서 테스트하기 어려울 수도 있는 상호작용도 허용한다.

측백나무

자바스크립트에서 e2e 테스트의 흔한 테스트 프레임워크는 Cypress, Selenium, Nightwatch, Puppeteer과 Testcafe을 포함한다.여기서 Cypress를 빠르게 개술합니다.Cypress는 현대적이고 빠른 차세대 e2e 테스트 프레임워크입니다.그것은 깨끗한 인터페이스와 좋은 문서, 그리고 매우 멋진 영상 스크롤 기능을 가지고 있어 테스트 실패의 원인을 잘 이해할 수 있다.개인적으로 말하자면, 나는 Cypress가 다른 일부 프레임워크(예를 들어 Selenium)보다 빠르지만, 다른 프레임워크(예를 들어 Puppeter)보다 더 느리다는 것을 발견했다.그러나 나는 아직 상술한 어떤 항목의 속도를 최적화하는 데 시간이 걸리지 않았기 때문에 나의 관점을 보류해 주십시오!Cypress는 또한 강력한 선택 기능과 광범위한 보조 기능을 가지고 있어 많은 서로 다른 프로젝트의 이상적인 선택이다.

측백나무 입문

여기서 toy React 프로젝트를 만들고 Cypress로 두 가지 기본 테스트와 단언을 작성합니다.우리 그냥 다이빙하자!

reactstarter 프로젝트 만들기

간단하게 보기 위해서, React에서 빠른 웹 응용 프로그램을 만들고, Cypress를 사용하여 React 응용 프로그램이 정확하게 나타나는지 테스트합니다.우리는 명령줄에서 create-react-app을 사용하여 설정된 starter 프로젝트를 만들 수 있습니다.

npx create-react-app test-cypress-project

Cypress 설치

테스트 React 프로그램을 만들면 Cypress를 React 프로그램 프로젝트에 설치해야 합니다.다행히도 측백나무를 설치하는 것은 매우 쉽다.명령줄에서 React app 항목의 루트 폴더로 이동하여 다음을 실행합니다.

npm i cypress --save-dev

그리고 나서 Cypress를 처음 열려고 합니다. 이것은 새로 만들 폴더를 만들 것입니다. 예를 들어 테스트와 플러그인 지원을 포함합니다.다음 내용을 입력하여 명령줄에서 Cypress를 열 수 있습니다.

npx cypress open

프로젝트에 새'cypress'폴더를 만들 수 있습니다.

측백나무 탐색

이제 Cypress의 작동 원리와 기능에 대해 알아보겠습니다.우선, React 응용 프로그램이 로컬 호스트에서 실행되는지 테스트합니다.그런 다음 페이지에서 일부 HTML 요소를 찾아 볼 수 있는지 테스트하고 마지막으로 HTML 요소에 특정 속성이 있는지 테스트합니다.

구성 요소가 렌더링되었는지 테스트

우선,cypress/integration에서react\u tests라는 새 파일을 만듭니다.회사 명
다음으로 React 응용 프로그램이 실행 중인지 확인해야 합니다.터미널 창에서 프로젝트 루트 디렉토리로 이동하여 다음을 실행합니다.

npm run start

Jest 또는 Mocha를 사용하여 테스트하는 경우 Cypress는 describe()과 it() 함수를 사용하여 테스트를 논리 그룹으로 구성하기 때문에 익숙한 구문을 사용합니다.react_테스트에서 describe()과 it() 함수를 사용하여 첫 번째 테스트를 작성합니다.js 파일.파일에 다음 코드 세그먼트를 추가합니다.

describe("visits the page", () => {
 it("tests elements are visible", () => {
 cy.visit("localhost:3000");
 cy.contains("Learn React");
 });
});

여기서 우리는 describe() 함수부터 시작하여 이 함수는 문자열과 리셋 함수를 첫 번째와 두 번째 매개 변수로 한다.우리는 it () 함수를 리셋 매개 변수로 전달합니다.이와 유사하게 it() 함수도 문자열과 리셋 함수를 첫 번째와 두 번째 매개 변수로 한다.또 두 줄 코드는 cy.visit(“localhost:3000”)과 cy.contains("Learn React”)이다.Cy.visit()은 제공된 URL에 접근하여 http 응답을 받았다고 단언합니다.두 번째 재미있는 함수는 cy.contains()으로 매개 변수로 전달되는 텍스트를 포함하는 페이지에서 요소를 검색합니다.이것은 여러 요소가 전달된 문자열과 일치하지 않는 상황에서 요소를 선택하는 데 좋은 API를 제공한다.Cypress는 자동 단언 선택기give to cy.contains()에서 선택한 요소를 DOM에 존재합니다.
지금 우리는cypress에서 테스트를 실행하고 싶습니다.새 터미널 창에서 (기존 터미널 창을 열어 우리react 프로그램을 계속 실행할 수 있도록) 프로젝트 루트 디렉터리로 이동해서 실행합니다

npx cypress open 

cypress test runner 창을 다시 열 것입니다.이 창에서cypress가 자동으로 생성하는 예시 테스트와 우리의react\u 테스트를 보셔야 합니다.js 파일.cypress 창에서 react_tests 를 클릭합니다.js 탭을 열고 테스트를 실행합니다.
우리는 반드시 테스트를 모두 통과하는 것을 보아야 한다.
다음은 선택한 원소에 대한 더 많은 정보를 어떻게 단언하는지 봅시다.cypress가 선택한 요소(예를 들어 cy.contains())는 .should() 방법을 지원합니다..should() 방법은 많은 다른 유형의 단언을 채택할 수 있는데, 예를 들어 “have.css”이다.have.css 방법은 css 속성이 선택한 요소에 추가된다고 단언할 수 있습니다.DOM에서 "Learn React"라는 내용의 요소를 성공적으로 선택할 수 있는지 테스트했습니다. 이제 선택한 요소에 Font Family css 속성이 있는지 테스트해 보겠습니다.우리가 이 일을 할 때, 우리가 이미 사용한 cy.contains() 함수는 일부 텍스트의 일치에 따라 요소를 선택할 수 있고, 완전한 텍스트가 필요하지 않다는 것을 설명합니다.텍스트 "src/App.js 편집하고 다시 불러오기 위해 저장"을 포함하는 요소를 선택하십시오Cypress에서 "Edit"단어를 포함하는 요소만 선택하면 됩니다.우리는 텍스트 "Edit"으로 요소를 선택하고 코드에서 css 속성을 다음과 같이 테스트할 수 있습니다.

describe("visits the page", () => {
 it("tests elements are visible", () => {
 cy.visit(“localhost:3000");
 cy.contains("Edit").should("have.css", "font-family");
 cy.contains("Learn React");
 });
});

cypresstestrunner 창을 열면 새 코드를 저장할 때 테스트가 자동으로 다시 실행됩니다.없으면 npxcypress를 연 상태에서 테스트 실행 프로그램을 다시 열고 react\u tests를 누르십시오.js 파일.
마지막으로 우리는 다른 방법으로cypress에서 DOM의 요소를 선택하고 요소가 볼 수 있고 html 속성과 css류를 가지고 있다고 단언하는 방법을 사용합시다.엔티티를 선택하는 또 다른 방법은 cy.get() 방법입니다.cy.get()은 css 스타일 선택기를 기반으로 선택됩니다.이 예에서 회전 반응 이미지를 선택하십시오.이것은 페이지의 유일한 그림이기 때문에, 우리는 간단하게 cy.get(“img”)으로 그것을 선택할 수 있다.그리고 우리는 .should() 방법에 포함된 매우 유사한 링크 문법을 사용하여 가시성, 속성과 클래스를 테스트할 수 있다.우리가 이미 소개한 내용에 비해 유일한 새로운 내용은cypress가 .and() 방법과 같은 기능을 가지고 있을 때 .should() 방법을 지원한다는 것이다..and()은 코드를 서면 영어처럼 읽기 쉽기 때문이다.마지막 예제 코드에 다음을 추가합니다.

describe("visits the page", () => {
 it("tests elements are visible", () => {
 cy.visit("localhost:3000");
 cy.contains("Edit").should("have.css", "font-family");
 cy.get("img")
 .should("be.visible")
 .and("have.class", "App-logo")
 .and("have.attr", "src");
 cy.contains("Learn React");
 });
});

마찬가지로cypress 테스트 실행 프로그램이 열려 있다면, 저장할 때 자동으로 실행되는 테스트를 볼 수 있을 것입니다.

이것은 Cypress의 미드레인지 테스트에 대한 첫 번째 매우 간단한 소개입니다.우리는 이미 Cypress 설치, 테스트 프로젝트 만들기, Cypress 열기, 새로운 테스트 파일 만들기, describe()과 it() 함수에서 테스트 구축, cy.visit() 사이트 방문, cy.contains()과 cy.get()을 사용하여 DOM에서 요소를 선택하고 요소가 css 속성, 가시성, 일부 종류와 html 속성을 가지고 있다고 단언했다.그러나 이것은 빙산의 일각일 뿐이고 대량의 학습이 있다.나는 당신이 Cypress documentation을 참고할 것을 건의합니다. 이것은 매우 좋은 정보 출처와 유용한 강좌입니다.특히 좋은 해석은 writing and organising tests에서 찾을 수 있다.
이게 다야!읽어주셔서 감사합니다.질문이 있으시면 [email protected]으로 문의하십시오.