angularjs - 차이 - 앵귤러튜토리얼




각도기를 사용하여 요소가 보이는지 확인하는 방법? (4)

나는 요소가 분도기를 사용하여 볼 수 있는지 테스트하려고합니다. 다음은 요소 모양입니다.

<i class="icon-spinner icon-spin ng-hide" ng-show="saving"></i>

크롬 콘솔에서이 jQuery 선택기를 사용하여 요소가 표시되는지 테스트 할 수 있습니다.

$('[ng-show=saving].icon-spin')
[
<i class=​"icon-spinner icon-spin ng-hide" ng-show=​"saving">​</i>​
]
> $('[ng-show=saving].icon-spin:visible')
[]

그러나 각도기에서 똑같이하려고하면 런타임에이 오류가 발생합니다.

InvalidElementStateError: 
invalid element state: Failed to execute 'querySelectorAll' on 'Document': 
'[ng-show=saving].icon-spin:visible' is not a valid selector.

왜 이것이 유효하지 않습니까? 각도기를 사용하여 가시성을 확인할 수있는 방법은 무엇입니까?


가시성을 기다리는 중.

const EC = protractor.ExpectedConditions;
browser.wait(EC.visibilityOf(element(by.css('.icon-spinner icon-spin ng-hide')))).then(function() {
  //do stuff
})

보이는 요소 만 찾기위한 Xpath 트릭

element(by.xpath('//i[not(contains(@style,"display:none")) and @class="icon-spinner icon-spin ng-hide"]))

각도기를 사용하여 요소의 가시성을 확인하는 올바른 방법은 isDisplayed 메서드를 호출하는 것입니다. isDisplayed 는 부울을 반환하지 않으므로 평가 된 가시성을 제공하는 promise 이므로주의해야합니다. 이 메서드를 잘못 사용하는 코드 예제를 많이 보았으므로 실제 가시성을 평가하지 않았습니다.

요소의 가시성을 얻는 예 :

element(by.className('your-class-name')).isDisplayed().then(function (isVisible) {
    if (isVisible) {
        // element is visible
    } else {
        // element is not visible
    }
});

그러나 각도기가 Jasmine expect ()에 패치를 적용하여 항상 약속이 해결 될 때까지 기다리지 않도록하기 때문에 요소의 가시성을 확인하는 경우 (가져 오기와 반대) 요소가 필요하지 않습니다. github.com/angular/jasminewd 참조하십시오 github.com/angular/jasminewd

그래서 당신은 할 수 있습니다 :

expect(element(by.className('your-class-name')).isDisplayed()).toBeTruthy();

AngularJS 를 사용하여 해당 요소의 가시성을 제어하므로 ng-hide 대한 클래스 속성을 다음과 같이 확인할 수 있습니다.

var spinner = element.by.css('i.icon-spin');
expect(spinner.getAttribute('class')).not.toMatch('ng-hide'); // expect element to be visible

이 대답은 페이지에없는 요소에 대해 작동 할만큼 강력 할 것이므로 선택기가 요소를 찾지 못한 경우 정상적으로 실패하지 않습니다 (예외를 throw하지 않음).

const nameSelector = '[data-automation="name-input"]';
const nameInputIsDisplayed = () => {
    return $$(nameSelector).count()
        .then(count => count !== 0)
}
it('should be displayed', () => {
    nameInputIsDisplayed().then(isDisplayed => {
        expect(isDisplayed).toBeTruthy()
    })
})

이 작업을 수행해야합니다.

expect($('[ng-show=saving].icon-spin').isDisplayed()).toBeTruthy();

protractor의 $ 가 jQuery가 아니라는 것을 기억하십시오 :visible아직 사용 가능한 CSS 선택자 + 의사 선택자의 일부가 아닙니다.

https://.com/a/13388700/511069 에서 자세한 정보





protractor