동일한 Angular 앱을 다시로드하는 Protractor 테스트가 있습니다. 때때로 Travis 빌드에서 실패하지만 빌드를 한두 번 다시 시작한 후에 통과합니다. 드물게 내 로컬 컴퓨터에서 실패합니다. Travis 빌드는 Firefox를 사용하지만 내 컴퓨터에서 실패한 경우 Firefox와 Selenium의 chromedriver를 모두 사용했습니다.
나는 그것이있는 곳이기 때문에 ( 이 GitHub 문제에서rootElement: 'html'
권장 하는 Protractor 에서 권장) 설정 ng-app
했지만 여전히이 오류가 발생합니다.
Protractor가 페이지와 동기화되기를 기다리는 동안 오류 : "루트 요소 (html)에 인젝터가 없습니다. 이는 ng-app 내부에 없음을 의미 할 수 있습니다."
이 오류는 Angularangular.element('html').injector()
가로드 된 경우에도 falsey 를 반환 한 결과입니다 . 각도기 코드 의 이전 테스트 에서이를 확인합니다.
테스트에는 index.html
동일한 각도 앱인 다른 앱 으로 리디렉션되는 것이 포함됩니다 . 리디렉션 이유는 언어 선택을 제공 한 다음 해당 언어로 앱을 다시로드하기위한 것입니다.
여러 로케일이 있습니다 (단순성을 위해 여기에 두 개 표시됨). app
문서 루트이므로 app/index.html
시스템 언어를 감지하거나 기본값을 en-gb
로 지정한 다음로 리디렉션 하는 진입 점도 있습니다 app/<locale>/index.html
. 전자는 Angular 앱이 아닙니다 ( app/
). 후자는 ( app/<locale>/
)이며 ../common/
라이브러리 및 Angular 모듈 파일 에 대한 링크 입니다. index.html
로케일 폴더 의 파일은 동일합니다.
문서 루트를 방문하면 어떻게됩니까?
/
-> 리디렉션 /en-gb/#/language
그리고 독일어를 선택할 때?
/en-gb/#/language
리디렉션 ../de/#/menu
->/de/#/menu
디렉토리 구조 :
└── app
├── common
│ ├── fonts
│ ├── images
│ ├── lib
│ ├── modules
│ └── styles
├── de
│ ├── i18n.js
│ └── index.html
├── en-gb
│ ├── i18n.js
│ └── index.html
└── index.html
테스트:
(function () {
'use strict';
describe('Module: app, language screen:', function () {
beforeEach(function () {
browser.get('http://localhost:9000/en-gb/#/language/');
this.$germanChoice = // get the clickable element to select German
this.$buttonContinue = // get the clickable element to continue
});
describe('continue button', function () {
it('should go forward to the menu', function () {
this.$germanChoice.click();
this.$buttonContinue.click();
expect(browser.getCurrentUrl()).toBe('http://localhost:9000/de/#/menu/');
});
});
});
}());
index.html
축소 된 파일을 사용하는 로케일 :
<!doctype html>
<!--[if IE 8]> <html id="ng-app" ng-app="app" lang="{{ app.locale.html }}" class="no-js lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]> <html id="ng-app" ng-app="app" lang="{{ app.locale.html }}" class="no-js lt-ie10"> <![endif]-->
<!--[if gt IE 9]><!--> <html id="ng-app" ng-app="app" lang="{{ app.locale.html }}" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title ng-bind="app.page.title ? app.page.title + ' - ' + app.page.titleBase : app.page.titleBase"></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../common/lib/nouislider/jquery.nouislider.css" />
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="../common/styles/b8a085fb.main.css">
<!--<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" href="../common/styles/f71e8123.ie.css">
<![endif]-->
<!--[if lt IE 9]>
<script src="../common/scripts/a5663f12.lt-ie9.js"></script>
<![endif]-->
</head>
<body ng-class="{ 'ios6': app.environment.ios6, 'gt-ios6': app.environment.gtIos6, 'cordova': app.environment.cordova }">
<div ng-view="" autoscroll="true"></div>
<script src="../common/scripts/cbd2241e.app.js"></script>
<script src="i18n.js"></script>
</body>
</html>
비 Angular 로그인 페이지 (일부는 여러 단계가 있음)에 문제가 발생하는 경우가 있습니다. 언어 선택 페이지가 비슷할 것 같습니다. 솔루션은 .NET의 노출 된 Webdriver API와 결합 된 테스트의 논리입니다 browser.driver
.
if ('some condition that determines you are on a non-Angular page') {
browser.driver.findElement(by.id('language-choice')).click();
}
테스트하기에 가장 좋은 조건은 다음과 같습니다.
browser.driver
각도기를 우회하기 때문에 Angular 페이지에 있지 않을 때 언제든지 사용 하십시오. 그렇지 않으면 Protractor는 Angular를 찾아서 찾지 못하고 오류를 발생시킵니다. 당신이 할 수있는 모든 것은 browser.driver
메뉴의 하단 영역에서 찾을 수 있습니다 : http://angular.github.io/protractor/#/api
그런 다음 각도기를 사용하기 전에 Angular 페이지가 나타날 때까지 기다리려면 다음 스 니펫을 사용해보세요.
browser.driver.wait(function() {
return browser.driver.getCurrentUrl().then(function(url) {
return url.toString().indexOf('my angular page url') !== -1;
}, function(err) {
throw err;
});
}, 5000, 'Timed out waiting for your Angular page to load.');
이것은 당신의 onPrepare
진술 에서 특히 유용 합니다 (그냥 return
시작 부분에 추가하십시오 browser.driver.wait
). 테스트는 Angular 페이지가로드 될 때까지 기다린 후 마음의 내용으로 각도기를 조정할 수 있습니다.
약간의 엉망으로이 동일한 스 니펫을 사용하여 다단계 비 Angular 소개 페이지에 반응 할 수 있습니다. 그리고 자체의 깔끔한 작은 기능으로 캡슐화되어, 이것은 각도기가 각도가 아닌 페이지에 덤프 될 수있는 모든 곳에서 재사용 될 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다