How to use protractor to check if an element is visible?

protractor check if element is not visible
protractor check if element exists
protractor if element exists then
protractor isdisplayed vs ispresent
protractor wait for element to be visible
nosuchelementerror: no element found using locator
protractor api
protractor expectedconditions

I'm trying to test if an element is visible using protractor. Here's what the element looks like:

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

When in the chrome console, I can use this jQuery selector to test if the element is visible:

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

However, when I try to do the same in protractor, I get this error at runtime:

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

Why is this not valid? How can I check for visibility using protractor?

This should do it:

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

Remember protractor's $ isn't jQuery and :visible is not yet a part of available CSS selectors + pseudo-selectors

More info at https://stackoverflow.com/a/13388700/511069

How to check if an element is present with protractor?, WebElement.prototype.isDisplayed. Schedules a command to test whether this element is currently displayed. Example. View. <div  I am trying to the count of find all visible elements under a container using Protractor function getVisibleDivs(driver) { var links = driver.findElements(by.css("#MainContent div")); return

The correct way for checking the visibility of an element with Protractor is to call the isDisplayed method. You should be careful though since isDisplayed does not return a boolean, but rather a promise providing the evaluated visibility. I've seen lots of code examples that use this method wrongly and therefore don't evaluate its actual visibility.

Example for getting the visibility of an element:

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

However, you don't need this if you are just checking the visibility of the element (as opposed to getting it) because protractor patches Jasmine expect() so it always waits for promises to be resolved. See github.com/angular/jasminewd

So you can just do:

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

Since you're using AngularJS to control the visibility of that element, you could also check its class attribute for ng-hide like this:

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

isDisplayed() - Protractor, An expected condition that returns a promise representing whether the element is visible. Use element by css to check if element exists in Protractor. Ask Question isDisplayed returns false for a visible element in Protractor. Hot Network Questions

I had a similar issue, in that I only wanted return elements that were visible in a page object. I found that I'm able to use the css :not. In the case of this issue, this should do you...

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

In the context of a page object, you can get ONLY those elements that are visible in this way as well. Eg. given a page with multiple items, where only some are visible, you can use:

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

This will return you all visible i.icons

visibilityOf - Protractor, Put together a very simple Protractor test case to check for visibility. An element is in general to be considered visible if any part of it is drawn on sense that you shouldn't really use those together, since you're trying to hide  The correct way for checking the visibility of an element with Protractor is to call the isDisplayed method. You should be careful though since isDisplayed does not return a boolean, but rather a promise providing the evaluated visibility.

If there are multiple elements in DOM with same class name. But only one of element is visible.

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

In this example filter takes a collection of elements and returns a single visible element using isDisplayed().

isDisplayed returns false for a visible element that has an ancestor , I'm trying to test if an element is visible using protractor. Here's what the element looks like: <i class="icon-spinner icon-spin ng-hide"  With Protractor, I need to check to see if this element is not present when the switch is off. However, I should not be thrown into Element Not Found Error, as it is one test in a set of many. How should I do this?

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

How to use protractor to check if an element is visible , I'm trying to test if an element is visible using protractor. Here's what the element looks like: <i class="icon-spinner icon-spin ng-hide" ng-show="saving"></i>. Even if the element is not displayed, you would still have // do smth part executed. Instead, if you need to check the value of isDisplayed() to use inside a conditional expression, you have to resolve the promise with then() explicitly:

How to use protractor to check if an element is visible?, Instead of checking if an element is visible on the viewport, I checked the I was able to overcome this using visibilityOf which is defined by Protractor API as. My tests using isDisplayed() pass correctly on initial page load (element is visible), as well as after a search is submitted (element is hidden). But, once the user (or protractor) clicks the link to display the search input again, my tests using isDisplayed() do not pass as expected.

Correct Strategy for Element to be not present in DOM, If you use the page object pattern when setting up e2e tests (as they are written in the gulp-angular yeoman generated project) then you might  make sure the element you want to click is actually visible. Sometimes you need to make extra actions on a page to make the element visible. For example, open up a dropdown for an option to appear or open menu for submenu to appear

Checking If An Element Exists in Protractor, We could check the web element visibility using Selenium such as buttons, used in Protractor tests to check if an element is displayed present, expect(el). To check the web element visibility using Selenium WebDriver, we do use the following methods. We could check the web element visibility using Selenium such as buttons, checkboxes, radio buttons, drop down boxes etc., Boolean isSelected(): This method is used to verify the element is selected or not. This method returns a true value if the

Comments
  • Hey @limp_chimp did my below answer helped you?
  • @limp_chimp for such things as visibility, think about using AngularJS client DOM unit tests. They are much faster to run and easier to develop.
  • Aw man. So cool. This is exactly what I needed to be able to determine. Thank you very much dude.
  • The answer below also uses isDisplayed() but just expands to resolve the promise for completeness though that step is optional and only meant for including conditionals in your tests which is a bad practice. @asenovm can you further elaborate your "This is plain wrong" comment?
  • @LeoGallucci, isDisplayed() returns ElementFinder and not a boolean.
  • Please don't use .toBeTruthy(); use .toBe(true) instead. .toBeTruthy(); will match things like [], 'false', 42. Basically anything expect 0, "", null, undefined, NaN or false is truthy.
  • isDisplayed() should be in the expect scope as @leoGallucci explained it.
  • This is a great answer; consider the case where there is no such element! $('.text-input-input') would alert the user elegantly; this might fail because filteredElement.length === 0?