32

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

Sakamoto Kazuma
  • 2,573
  • 7
  • 34
  • 75

7 Answers7

32

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)

Carl
  • 1,266
  • 10
  • 20
  • 1
    This is the only one that worked for me, since element(by.css()) for some reason would make the test to fail immediately if the element did not exist at all. – Alexandros V Feb 02 '16 at 21:34
  • Note that you may need to include await browser.waitForAngularEnabled(false); on a line before this in order for it to work as expected, or if not using async/await then browser.waitForAngularEnabled(false).then(() => {//check presence of element here}) – emery Apr 28 '21 at 21:19
26

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.

Sakamoto Kazuma
  • 2,573
  • 7
  • 34
  • 75
  • can you please link to the docs. i can't seem to find this and i would like to use it. it's also very difficult to see how this fits into your test. does this happen before you run the switch change? – gabereal Aug 11 '15 at 21:34
  • I think the documentation has changed a bit since I last worked with Protractor, but this is what I found recently: http://angular.github.io/protractor/#/api?view=ElementFinder.prototype.isPresent – Sakamoto Kazuma Aug 12 '15 at 13:40
  • 1
    thanks for writing back. unfortunately i already saw this in the docs and was looking for docs on the .to.become...and parts of the answer. but if i'm right those are part of chai? i'm using jasmine which doesn't seem to support the same functionality – gabereal Aug 13 '15 at 15:19
16

I got it working by doing this:

expect(element(by.css('css')).isPresent()).toBeFalsy();
Daniel
  • 2,028
  • 20
  • 18
  • its working in some case and not working in same case. is anyting I have to care for. although I am using save browser and same version – Aniruddha Das Jul 03 '18 at 16:07
3

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()
    })
})
activedecay
  • 10,129
  • 5
  • 47
  • 71
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)
evanjmg
  • 3,465
  • 1
  • 14
  • 12
0

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();
Boris Yakubchik
  • 3,861
  • 3
  • 34
  • 41
0

if your switch is defined in a config, you could do this

let dropdownSwitch = config.switch

expect(await $('dropdown css').isPresent()).toBe(dropdownSwitch);

this will cover it's verification in both scenarios, when it's on or off

Sergey Pleshakov
  • 7,964
  • 2
  • 17
  • 40