요소가 표시되는지 확인하려면 어떻게 해야 합니까?

요소가 표시되는지 확인하려면 어떻게 해야 합니까?

나는 어떤 요소가 보이는지 견인기를 사용하여 테스트하려고 한다.요소의 외관은 다음과 같습니다.

<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 를 참조해 주세요.

투영기를 사용하여 요소의 가시성을 확인하는 올바른 방법은 메서드를 호출하는 것입니다.그래도 조심하셔야 돼요.isDisplayed는 부울을 반환하지 않고 평가된 가시성을 제공합니다.이 방법을 잘못 사용하여 실제 가시성을 평가하지 않는 코드 예를 많이 봐왔습니다.

요소의 가시성을 얻는 예:

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에 클래스명이 같은 요소가 여러 개 있는 경우.단, 1개의 요소만 표시됩니다.

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.error("Element is not found! ", err);
  })

다음은 Typescript, protractor, jasmine을 사용하는 프레임워크에 사용할 수 있는 몇 가지 코드 조각입니다.

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

// 텍스트 아사트

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

// 요소 아사트

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

    );

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

// 폼 아사트

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

고려해야 할 사항

.isDisplayed()가 존재하는 을 전제로 하고 있습니다 에 ).

그러니 네가 한다면

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

이 요소는 했던 것이 , 「예상대로 되지 않습니다」라고 하는 것입니다.그러면 우아하게 실패한 기대 대신$('[ng-show=saving]').isDisplayed() 에러가 에러가 발생합니다.it not (실행되지 않음)

솔루션

체크하고 있는 요소가 페이지에 표시되지 않을 가능성이 있다고 생각되는 경우는, 다음의 안전한 방법을 사용해 주세요.

/**
*  element is Present and is Displayed
*  @param    {ElementFinder}      $element       Locator of element
*  @return   {boolean}
*/
let isDisplayed = function ($element) {
  return (await $element.isPresent()) && (await $element.isDisplayed())
}

및 사용

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

waitTillElementIsPresent(locator: Locator): promise.Promise<boolean> 
{

const EC = protractor.ExpectedConditions;
return browser.wait(EC.visibilityOf(element(by.id('xyz')), browser.params.explicitWaitTime, 'Element taking too long to appear in the DOM');

}

const isDisplayed = await $('div').isDisplayed().then(null, err => false)

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