이전 기사에서는 NG의 단위 테스트에 대해 이야기했습니다. 오늘은 E2E (End-to-End) 테스트에 대해 이야기하겠습니다.
특정 모듈의 단일 기능 지점을 테스트하면 단위 테스트가 가장 적합합니다. 그러나 사용자가 여러 페이지와 상호 작용할 때 버그가 발생하면 장치 테스트가 작동하지 않습니다. 현재 E2E는 사용자 작업을 시뮬레이션하고 문제 사이트를 복원하는 데 사용해야합니다. 물론 E2E 테스트를 사용하면 프로그램의 견고성을 테스트 할 수도 있습니다. E2E 테스트로 단위 테스트를 수행 할 수없는 많은 것들.
이전에 NG는 각도 시나리오 러너를 사용하여 E2E 테스트를 실행했으며 이제는 E2E를 실행하기 위해 오기체로 대체되었습니다.
길게 끄는 것
Protractor는 AngularJS에서 E2E를 테스트하는 데 사용되는 프레임 워크입니다. 자체는 NPM 모듈이며 WebDriverJS를 기반으로합니다. Protractor를 사용하면 테스트 케이스가 브라우저에서 실행되고 사용자의 실제 동작을 완전히 시뮬레이션 할 수 있습니다.
자원 주소는 다음과 같습니다.
1. Protractor에서 제공 한 테스트 API
2. 돌출부의 간단한 사용 예
3. WebDriverjs Guide, 이것은 Protractor 의존성의 핵심이며 NPM 모듈을 Selenium-Webdriver라고합니다.
오기체 운영 원리
Protractor는 E2E 테스트를 실행하기 위해 다음과 같은 사항에 따라 다릅니다.
1. 위에서 언급 한 WebDriverJS 인 WebDriver API는 셀레늄에서 프론트 엔드 테스트와 관련된 JS API입니다.
2. 백엔드 JAR 패키지 인 Selenium Server는 브라우저 드라이버와 통신하는 데 사용됩니다.
3. WebDriver 브라우저 드라이버는 실제 웹 사이트 컨텐츠를 표시하고 Selenium Server와 통신하는 데 사용됩니다. 이곳은 실제 브라우저 작업을 전달할 수있는 곳입니다.
전체 작동 프로세스는 다음과 같습니다
이러한 구성 요소의 이전 상호 작용에 대해 더 알고 싶다면 여기를 클릭하십시오.
NG 시드 프로젝트를 사용하여 E2E를 설명하십시오
우리는 NG가 제공 한 종자 프로젝트를 사용하여 실제 E2E 예를 설명합니다. 먼저 다음 명령을 사용하여 시드 프로젝트를 얻으십시오.
코드 사본은 다음과 같습니다.
git 클론 https://github.com/angular/angular-seed.git
그런 다음 실행하십시오
코드 사본은 다음과 같습니다.
NPM 설치
관련된 모든 종속성을 설치하십시오
여기서는 먼저 E2E 테스트를 실행하는 데 필요한 구성 파일에 대해 이야기합니다. Test/Protractor-conf.js 파일이 관련 기능을 구성하는 데 사용되는 것을 알 수 있습니다. 몇 가지 속성에 중점을 두겠습니다
1. 스펙은 실행할 테스트 파일의 경로를 나타내고 여기에 쓰여진 것은 e2e/*입니다. JS
2. BaseUrl은 테스트 파일의 브라우저간에 페이지 점프의 루트 주소를 나타냅니다.
3. 기능은 Chrome 사용과 같은 테스트 케이스를 실행하는 데 사용할 브라우저를 나타냅니다.
코드 사본은 다음과 같습니다.
기능 : {
'Browsername': 'Chrome'
}
프레임 워크는 사용할 테스트 프레임 워크를 나타냅니다. 여기 Jasmine이 있습니다.
이 구성 파일에 대한 자세한 내용을 보려면 여기를 클릭하여 확인하십시오.
구성 파일에 대해 이야기 한 후 테스트 케이스를 작성하고 공식 웹 사이트에 예제를 게시하는 방법을 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
'엄격한 사용';
/ * https://github.com/angular/protractor/blob/master/docs/getting-started.md */
설명 ( '내 앱', function () {
browser.get ( 'index.html');
It ( '위치 해시 /조각이 비어있을 때 /view1로 자동 리디렉션해야합니다.', function () {
expling (browser.getLocationAbsurl ()). tomatch ( "/view1");
});
설명 ( 'view1', function () {
이전에 (function () {
browser.get ( 'index.html#/view1');
});
it ( '사용자가 /view1', function () {를 탐색 할 때 view1을 렌더링해야합니다.
expling (element.all (by.css ( '[ng-view] p')). first (). getText ()).
tomatch (/보기 1/);
});
});
설명 ( 'view2', function () {
이전에 (function () {
browser.get ( 'index.html#/view2');
});
it ( 'view2를 렌더링해야합니다. 사용자가 /view2', function () {
expling (element.all (by.css ( '[ng-view] p')). first (). getText ()).
tomatch (/view 2/)의 부분);
});
});
});
우선, 위의 구문은 Jasmine 프레임 워크에서 지원하는 쓰기 방법입니다. 사용법을 이해하지 못하면 여기를 클릭 할 수 있습니다.
여기서 우리는 위의 예에서 오기체가 제공 한 몇 가지 일반적인 방법과 속성에 대해서만 이야기 할 것입니다.
1. 글로벌 객체 인 브라우저는 현재 브라우저의 인스턴스를 나타냅니다. 일반적으로 사용되는 GET 방법은 브라우저의 주소 변경을 구현하는 데 사용됩니다.
2. Global Object, 요소는 문서 요소를 찾는 책임이있는 jQuery와 같은 기능을 제공하며 종종 객체에 의해 공동 사용에 사용됩니다.
3. Global Object는 선택기 유형을 제공합니다. 예를 들어 CSS, 모델, 바인드 및 기타 기능을 통해 요소를 찾을 수 있습니다.
요소의 방법과 바이에서 위의 오기체 API 문서를 참조하십시오.
너무 많이 말하면 위의 테스트 사례를 실행할 시간입니다. 명령은 비교적 간단합니다.
코드 사본은 다음과 같습니다.
NPM 업데이트-웨브 드라이버를 실행합니다
이는 관련 브라우저 드라이버 및 Selenium-Server 로컬 JAR 패키지를 다운로드 할 책임이 있습니다. 일반적으로 두 리소스가 Google 서버에 있기 때문에 실패하므로 브라우저를 사용하여 벽을 탐색하여 별도로 다운로드 할 수 있습니다. 주소는 다음과 같습니다.
1. Chrome 드라이버 주소는 일반적으로 Chromedriver_2.9.zip 파일을 다운로드합니다.
2. Selenium-Server의 로컬 JAR 패키지를 다운로드하고 일반적으로 Selenium-Server-Standalone-2.40.0.jar 파일을 다운로드하십시오.
그런 다음 Protractor 패키지의 Selenium-Server를 Selenium 폴더에 복사하십시오. 위의 명령이 시간을 초과하면 파일이 여기에 나타나지 만 비어 있으면 직접 교체하십시오. 또한 Chromedriver_2.9.zip을 여기에서 감압 후 파일을 복사해야합니다.
마지막으로 다음 명령을 실행하여 테스트 결과를 확인하십시오.
코드 사본은 다음과 같습니다.
NPM Run Run Protractor
NG Seed 프로젝트의 명령 줄에 대해 더 알고 싶다면 여기를 클릭하여 볼 수 있습니다.
요약
NG E2E 테스트는 단위 테스트 구성보다 훨씬 더 복잡하지만 많은 일을 할 수 있습니다. 그만한 가치가 있다면 시도해 볼 수도 있습니다. 궁금한 점이 있으면 의견에 회신 할 수 있습니다.