Как использовать транспортир, чтобы проверить, является ли элемент видимым?

Я пытаюсь проверить, видно ли элемент с помощью транспортира. Вот как выглядит элемент:

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

Почему это недействительно? Как проверить видимость с помощью транспортира?

Ответ 1

Это должно сделать это:

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

Помните, что транспортир $ не является jQuery и :visible еще не является частью доступных CSS-селекторов + псевдо-селекторов

Более подробная информация на fooobar.com/questions/62920/...

Ответ 2

Правильный способ проверки видимости элемента с помощью 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 ожидают(), поэтому он всегда ждет решения promises. См. 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

Ответ 3

У меня была похожая проблема в том, что я хотел вернуть только те элементы, которые были видны в объекте страницы. Я обнаружил, что могу использовать CSS :not. В случае этой проблемы, это должно сделать вас...

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

В контексте объекта страницы вы можете получить ТОЛЬКО те элементы, которые также видны таким образом. Например. учитывая страницу с несколькими элементами, где видны только некоторые, вы можете использовать:

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

Это вернет вам все видимые i.icon s

Ответ 4

Если в DOM есть несколько элементов с тем же именем класса. Но видна только одна из элементов.

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

В этом примере фильтр принимает набор элементов и возвращает один видимый элемент, используя isDisplayed().

Ответ 5

Этот ответ будет достаточно прочным для работы с элементами, которые не находятся на странице, поэтому изящно (не выбрасывая исключение) из-за невозможности поиска элемента.

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

Ответ 6

Ждать видимости

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

Ответ 7

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