[angularjs] 각도기를 사용하여 요소가 보이는지 확인하는 방법은 무엇입니까?

각도기를 사용하여 요소가 보이는지 테스트하려고합니다. 요소는 다음과 같습니다.

<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.

왜 이것이 유효하지 않습니까? 각도기를 사용하여 가시성을 어떻게 확인할 수 있습니까?

답변

이렇게해야합니다.

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

각도기 $는 jQuery :visible가 아니며 아직 사용 가능한 CSS 선택기 + 의사 선택기 의 일부 가 아닙니다.

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

답변

Protractor로 요소의 가시성을 확인하는 올바른 방법은 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 참조

따라서 다음을 수행 할 수 있습니다.

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

답변

비슷한 문제가 있는데, 페이지 개체에서 볼 수있는 반환 요소 만 원한다는 점입니다. 나는 css를 사용할 수 있음을 발견했습니다 :not. 이 문제의 경우이 작업을 수행해야합니다.

expect($('i.icon-spinner:not(.ng-hide)').isDisplayed()).toBeTruthy();

페이지 개체의 컨텍스트에서 이러한 방식으로 표시되는 요소 만 가져올 수 있습니다. 예 : 여러 항목이있는 페이지에서 일부만 표시되는 경우 다음을 사용할 수 있습니다.

this.visibileIcons = $$('i.icon:not(.ng-hide)');

이것은 당신에게 모든 보이는 i.icons를 반환합니다

답변

동일한 클래스 이름을 가진 DOM에 여러 요소가있는 경우. 그러나 요소 중 하나만 표시됩니다.

element.all(by.css('.text-input-input')).filter(function(ele){
        return ele.isDisplayed();
    }).then(function(filteredElement){
        filteredElement[0].click();
    });

이 예제에서 필터는 요소 모음을 가져와 isDisplayed ()를 사용하여 표시되는 단일 요소를 반환합니다 .

답변

이 답변은 페이지에없는 요소에 대해 작동하기에 충분히 견고하므로 선택기가 요소를 찾지 못하면 정상적으로 실패합니다 (예외를 던지지 않음).

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()
    })
})

답변

가시성을 기다리려면

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"]))

답변

 element(by.className('your-class-name')).isDisplayed().then(function (isVisible) {
if (isVisible) {
    // element is visible
} else {
    // element is not visible
}
}).catch(function(err){
console.log("Element is not found");
})