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

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

---

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

<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 ()를 사용하여 표시되는 단일 요소를 반환합니다 .

---

This answer will be robust enough to work for elements that aren't on the page, therefore failing gracefully (not throwing an exception) if the selector failed to find the element.

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

---

To wait for visibility

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

Xpath trick to only find visible elements

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");
})

---

Here are the few code snippet which can be used for framework which use Typescript, protractor, jasmine

browser.wait(until.visibilityOf(OversightAutomationOR.lblContentModal), 3000, "Modal text is present");

// Asserting a text

OversightAutomationOR.lblContentModal.getText().then(text => {
                    this.assertEquals(text.toString().trim(), AdminPanelData.lblContentModal);
                });

// Asserting an element

expect(OnboardingFormsOR.masterFormActionCloneBtn.isDisplayed()).to.eventually.equal(true

    );

OnboardingFormsOR.customFormActionViewBtn.isDisplayed().then((isDisplayed) => {
                        expect(isDisplayed).to.equal(true);
                });

// Asserting a form

formInfoSection.getText().then((text) => {
                        const vendorInformationCount = text[0].split("\n");
                        let found = false;
                        for (let i = 0; i < vendorInformationCount.length; i++) {
                            if (vendorInformationCount[i] === customLabel) {
                                found = true;
                            };
                        };
                        expect(found).to.equal(true);
                    });     

참고URL : https://stackoverflow.com/questions/22850271/how-to-use-protractor-to-check-if-an-element-is-visible