protractor 를 사용 하여 페이지 요 소 를 조작 합 니 다.

Protractor 는 Angular JS 응용 양 체 를 위 한 엔 드 테스트 프레임 워 크 입 니 다.웹 애플 리 케 이 션 에 대한 테스트 를 자동 으로 수행 할 수 있 는 실제 브 라 우 저 를 구동 할 수 있 습 니 다.Protractor 드라이버 브 라 우 저 는 WebDriver 표준 을 사용 하기 때문에 다른 언어 로 이 루어 진 WebDriver 라 이브 러 리 와 대체적으로 같 습 니 다.물론 대체로 같다 고 말 하면 분명 다른 점 이 있 을 것 이다.이런 다른 점 에 주의 하지 않 으 면 너 를 함정 에 빠 뜨 릴 것 이다.
Protractor 작성 테스트 의 핵심 은 DOM 요 소 를 찾 는 것 입 니 다.상호작용 을 한 다음 에 상호작용 후의 상태 가 당신 의 기대 와 일치 하 는 지 확인 하 는 것 입 니 다.그래서 DOM 요 소 를 찾 고 상호작용 을 하 는 것 이 중요 합 니 다.Protractor 는 Locator 대상 을 받 아들 이 고 Element Finder 대상 을 되 돌려 주 는 전역 함수 element 을 제공 합 니 다.이 함 수 는 하나의 요 소 를 되 돌려 줍 니 다.여러 요 소 를 되 돌려 주 고 싶다 면 element.all 함 수 를 사용 하 십시오.Locator 대상 을 받 아들 이 고 Element Array Finder 대상 을 되 돌려 줍 니 다.Element Finder 대상 은 요소 의 상호작용 에 사용 되 는 방법 이 있 습 니 다.예 를 들 어 click(),getText(),sendKeys 등 입 니 다.
Locator 대상 의 생 성 은 주로 전역 적 인 by 대상 을 사용 하 며,일부 API 를 제공 하여 Locator 대상 을 생 성하 여 element 또는 element.all 함수 에 사용 하도록 합 니 다.
예 를 들 면:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//  class       by.css(‘myclass')  //  id      by.id(‘myid')  //  ng-model       by.model(’name')  //            by.binding(‘bindingname')  //    repeater     by.repeater(‘myrepeater') 

이 를 통 해 알 수 있 듯 이 앞의 두 Locator 의 생 성 방법 은 다른 언어 로 이 루어 진 WebDriver 의 용법 과 대체적으로 같 고 뒤의 몇 개 는 AngularJS 응용 을 위해 디자인 된 것 으로 AngualrJS 프레임 워 크 를 바탕 으로 쓴 웹 응용 에서 페이지 요 소 를 쉽게 찾 을 수 있 습 니 다.이것 은 첫 번 째 로 다르다.
다른 언어 로 이 루어 진 WebDriver 라 이브 러 리 에서 Locator 를 사용 하여 찾 은 요소 유형 은 WebElement 이 고,Protractor 는 Element Finder 대상 을 되 돌려 줍 니 다.두 가지 차이 점 은 Element Finder 대상 이 브 라 우 저 와 즉시 상호작용 을 하지 않 고 지정 한 Locator 에 따라 페이지 의 요 소 를 찾 는 것 이다.Element Finder 대상 의 방법 을 호출 했 을 때 만 브 라 우 저 와 진정 으로 상호작용 을 할 수 있 습 니 다.일부 상용 방법 은 다음 과 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

//                 var el = element(by.css(‘mycss’));  //     el.click();  //         el.sendKeys(’text’);  //        el.clear();  //         el.getAttribute(‘value’);  //         el.getText(); 

이 방법 들 은 모두 비동기 적 이라는 것 을 주의 하 세 요.모든 방법 이 되 돌아 오 는 것 은 하나의 promise 이다.그래서 예 를 들 어 요소 의 값 을 출력 하려 면 이렇게 써 야 합 니 다.

1
2
3

element(by.css(‘myclass’)).getText().then(function(text) {  console.log(text); }): 

만약 에 expect 방법 으로 요소 의 값 을 검증 할 때 expect 방법 은 promise 의 중간 값 을 꺼 내 줄 것 입 니 다.그래서 이렇게 만 쓰 십시오.

1

expect(element(by.css(‘myclass’)).getText()).toEqual('  ’); 

또 다른 점 은 Protractor 가 요 소 를 찾 을 때 체인 호출 을 지원 하 는 것 입 니 다.이런 기능 은 상당히 실용적이다.요소 와 element.all 두 함 수 를 조합 하여 요 소 를 찾 을 수 있 습 니 다.또한 Protractor 는 몇 가지 보조 방법 을 제공 하여 당신 의 사용 을 더욱 편리 하 게 합 니 다.

1
2
3

element.all(locator1).first().element(locator2); element(locator1).all(locator2); element.all(locator1).get(index).all(locator2); 

element.all 함수 가 제공 하 는 보조 방법 은 다음 과 같 습 니 다.

filter:필 터 를 제공 하여 그 중의 요 소 를 걸 러 냅 니 다

1
2
3
4
5

element.all(by.css(‘myclass’)).filter(function(ele, index) { return ele.getText().then(function(text) {  return text == ‘  '; }); }); 

get:색인 에 따라 지정 한 요 소 를 가 져 옵 니 다.예 를 들 어 element.all(by.css('myclass').get(0);

first:첫 번 째 요 소 를 가 져 옵 니 다.element.all(by.css(’myclass’)).first();

last:마지막 요 소 를 가 져 옵 니 다.용법 이 같 습 니 다

count:원소 개 수 를 가 져 옵 니 다.

이 밖 에 each,map,reduce 등 방법 으로 목록 을 조작 할 수 있 습 니 다.
element 함수 가 제공 하 는 보조 방법 은 다음 과 같 습 니 다.

locator:locator 대상 을 되 돌려 줍 니 다.

getWebElement:이 Element Finder 패키지 의 WebElement 대상 을 되 돌려 줍 니 다.

4.567917.all:하위 요 소 를 찾 습 니 다

element:하위 요 소 를 찾 습 니 다

isPresent:요소 가 페이지 에 표 시 될 지 여부 입 니 다

요약 하면 Protractor 와 다른 WebDriver 언어 가 실현 하 는 차 이 는 다음 과 같다.

Protractor 는 AngualrJS 응용 을 위 한 맞 춤 형 제작 으로 그 자체 에 많은 wait 작업 을 포함 하여 AngularJS 스 크 립 트 가 실 행 된 후에 야 다음 작업 을 하여 테스트 의 안정성 과 건장 성 을 확보 합 니 다

Protractor 가 디자인 한 By 대상 은 AngularJS 응용 에 많은 실 용적 인 방법 을 제공 하여 AngularJS 응용 페이지 를 정의 할 때 더욱 쉽다

element 함 수 는 Element Finder 대상 을 되 돌려 줍 니 다.Element Finder 대상 을 호출 하 는 방법 을 제외 하고 브 라 우 저 와 즉시 대화 하지 않 습 니 다

Element Finder 대상 을 호출 하 는 방법 은 promise 입 니 다.(이것 은 매우 중요 하 다.

Protractor 는 요 소 를 찾 을 때 체인 호출 을 지원 합 니 다