Protractor Check if Element Does Not Exist

Question

I have a setting in my angular based website that turns a dropdown on and off. If it is off, then it does not show on the main page.

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?

I have tried to do:

expect($$('.switch').count()).to.equal(0).and.notify(next);

But I am getting an AssertionError with this...

Answer 1

These answers do not wait for the element to disappear. In order to wait for it to disappear you need to use ExpectedConditions like below. InvisibilityOf detects whether an element has left the DOM. See it in the docs here: https://www.protractortest.org/#/api?view=ProtractorExpectedConditions.

  export const invisibilityOf = (el) =>
     browser.wait(ExpectedConditions.invisibilityOf(el) as any, 12000, 
    'Element taking too long to disappear in the DOM')
  const el = element(by.css(arg1))
  return invisibilityOf(el)

Answer 2

I got it working by doing this:

expect(element(by.css('css')).isPresent()).toBeFalsy();

Answer 3

stalenessOf may be a good way to go: Protractor - ExpectedConditions.stalenessOf

For example you have a modal that is currently open. You close it and expect it to not be present:

element(by.css('.modal-dialog .cancel-button')).click();
browser.wait(EC.stalenessOf(element(by.css('.modal-dialog')), 60000);
expect(element(by.css('.modal-dialog')).isPresent()).toBeFalsy();

Answer 4

Got the thing working by using something I found in the docs:

expect(element(by.css('.switch')).isPresent()).to.become(false).and.notify(next);

Also uses assertions, so it doesn't break cucumberjs.

Answer 5

none of these answers which include count() worked for me;

the typeof $$('.selector').count() is 'object'

you have to use the promise to pull the count value out like this.

const nameSelector = '[data-automation="name-input"]';
const nameInputIsDisplayed = () => {
    return $$(nameSelector).count()
        .then(count => count !== 0)
}
it('should not be displayed', () => {
    nameInputIsDisplayed().then(isDisplayed => {
        expect(isDisplayed).toBeFalsy()
    })
})

Answer 6

Another option that worked a bit better for me, and uses protractor 'way' of doing things http://angular.github.io/protractor/#/api?view=ElementArrayFinder.prototype.all

element.all(by.css('.k-loading-image')).then(function(items) {
    expect(items.length).toBe(0);
});

(I wanted to check that a loading indicator had disappeared)