인형극과 함께 엔드 투 엔드 테스트를 배우십시오

이 자습서는 소프트웨어 테스트의 세계를 탐구하고 웹 애플리케이션의 효율적인 엔드 투 엔드 테스트를 위해 노드 라이브러리 인 Puppeteer를 사용하는 방법을 보여줍니다. 다른 테스트 유형을 다루고 간단한 카운터 응용 프로그램을 사용하여 실제 예제를 작성합니다.

주요 개념 :

인형극 : DevTools 프로토콜을 통해 크롬 또는 크롬을 제어하는 ​​강력한 node.js 라이브러리. 엔드 투 엔드 테스트 및 브라우저 자동화에 이상적입니다. 기본적으로 헤드리스 모드로 표시되지만 눈에 보이는 브라우저 창으로 실행할 수 있습니다.

테스트 유형 : 우리는 4 가지 주요 테스트 방법론을 검토 할 것입니다 : 정적 테스트 (Linters and Type Systems 사용), 단위 테스트 (개별 코드 단위 테스트), 통합 테스트 (여러 단위의 상호 작용 테스트) 및 엔드 투 엔드 테스트 (전체 응용 프로그램에서 실제 사용자 상호 작용 시뮬레이션). PUPPETEER와의 엔드 투 엔드 테스트 : 튜토리얼은 인형극을 사용하여 엔드 투 엔드 테스트를 설정하고 실행하기위한 단계별 안내서를 제공합니다. 여기에는 페이지 탐색, 특정 요소 대기 대기, 데이터 추출 및 응용 프로그램 동작 확인이 포함됩니다.

인형극이란 무엇입니까?
• 인형극은 크롬 또는 크롬과 상호 작용하기위한 높은 수준의 API를 제공합니다. 주로 헤드리스이지만 전체 브라우저 경험을 위해 구성 할 수 있습니다. 전제 조건 :
이 튜토리얼은 JavaScript (ES6), Node.js 및 Yarn (패키지 관리자)에 익숙해집니다. 기본 인형극 지식은 도움이되지만 엄격하게 필요하지는 않습니다. 튜토리얼은 다음을 사용합니다
• <..> 노드 13.3.0 npm 6.13.2 원사 1.21.1 PUPPETEER 2.0.0
create-react-app 3.3.0 테스트 소개 : 테스트는 응용 프로그램 기능을 검증하고 버그를 조기에 식별하는 데 도움이됩니다. 위에서 언급 한 4 가지 테스트 유형은 포괄적 인 테스트 전략을 형성합니다. "테스트 트로피"(아래 그림)는이 테스트의 계층 적 특성을 시각적으로 나타냅니다.

인형극과의 엔드 투 엔드 테스트 : 실용적인 예 우리는 를 사용하여 간단한 카운터 응용 프로그램을 작성한 다음 꼭두각시로 테스트합니다.

.

프로젝트 설정 :
1. 새 React 프로젝트 생성 : npx create-react-app e2e-puppeteer 앱을 실행하십시오 :
인형극을 설치하십시오 :
2. 카운터 앱 구현 : 수정 및 는 증분 및 감소 버튼으로 카운터를 만듭니다. 인형극 테스트 : cd e2e-puppeteer && yarn start
인형극 테스트 작성 카운터의 기능 (초기 상태, 증분, 감소)을 확인하십시오. 이 테스트는 ,
3. , 를 사용하고 응용 프로그램 동작을 확인하기위한 어설 션을 사용합니다. yarn add -D puppeteer 테스트를 실행하십시오 :
4. App.js 결론 : App.css 이 튜토리얼은 인형극을 사용한 엔드 투 엔드 테스트에 대한 실질적인 소개를 제공했습니다. 인형극의 기능은 테스트를 넘어 확장되어 다양한 브라우저 자동화 작업을위한 유용한 도구입니다. 전체 코드는 GitHub에서 사용할 수 있습니다 (원본 텍스트로 제공되지 않으므로 가능한 경우 추가해야 함). 테스트에 대한 추가 리소스는 Sitepoint Premium을 통해 제공됩니다 (원본 텍스트로 제공되지 않으면 사용 가능한 경우 추가해야합니다).
faqs :
5. 이 섹션에서는 PUPPETEER의 목적, 다른 도구와의 차이, 자동화 및 스크래핑에서의 사용, 헤드리스 브라우저의 개념 및 크로스 브라우저 호환성을 포함하여 PUPPETEER에 대한 일반적인 질문에 답변합니다. (원래 FAQ는 출력에 포함되어 있습니다.)

위 내용은 인형극과 함께 엔드 투 엔드 테스트를 배우십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!