14

I've written a test to check if a element is visible on screen, in my case an angular-ui-bootstrap collapsible panel, aka, the "warning". The code works, but the tests used to fail ~75% of the time.

There is a collapse animation on the display of the "warning", and I can't shutwod the animation for the tests, since it's a jquery animation. The warning is always 'present' in the DOM, just collapsed when there is no reason to show it.

At first, I've tested with this code, which is pretty easy:

expect(element('.warning').isDisplayed()).toEqual(true);

The problem came when I needed to test that the element is not displayed, e.g. : once the warning is displayed, some action cause it to collapse.

That test:

expect(element('.warning').isDisplayed()).toEqual(false);

will pass only if the animation started. It will fail when the condition is checked while the element is still displayed.

I've came up with two solutions.

The easy one using a ptor.driver.sleep(2000). Is slows my tests and is not acceptable.

The hard, ugly one, but that gives me good results:

exports.isWarningDisplayed = function (expectedVisibility) {
  return ptor.driver.wait(function () {
     if (expectedVisibility) {
       return element(by.css('.warning')).isDisplayed().then(function(visibility) {
         return visibility === expectedVisibility;
       });
      } else {
        return element.all(by.css('.warning .collapse.in')).then(function(items) {
          return items.length === 0;
       });
      }
    }, 2000).then(function() {
      return element.all(by.css('.warning .collapse.in'));
    }).then(function (items) {
      return items.length > 0;
    });
};

My problem is that it just feels awfully wrong. Have you found a better way to handle that situation? My expectation would be to have something like:

expect(element('.warning').not.isDisplayed()).toEqual(true);

...but there is no .not in protractor or webDriver AFAIK.

4 Answers 4

18

I had a similar issue - wanting to test for when an element is no longer disabled. I struggled trying to work around things without the .not test and then realized that I could just move the 'not' test into the css selector:

// we're looking for when the element doesn't have a .disabled class
var availableElement = by.css('.some-class:not(.disabled)');
browser.wait(function() {
  return ptor.isElementPresent(availableElement);
}, 30000);

expect(ptor.isElementPresent(availableElement)).toBeTruthy();

Not sure if it helps but I had a moment of clarity so thought I would share.

4
  • It does help! Thanks, that is so much cleaner that what I've got! Jul 2, 2014 at 21:40
  • I get a Error which says TypeError: Unimplemented function: "isPending" from selenium-webdriver's promise.js when using isElementPresent :-(?!
    – Sebastian
    Jul 31, 2014 at 9:57
  • 5
    I need to use browser.isElementPresent( ...
    – mvndaai
    Jan 16, 2015 at 23:11
  • I was experiencing a very similar issue causing many of our tests to be shaky, with seemingly random fails depending on what machine was running them. I found that disabling css transitions helped significantly, as these were used in some ui bootstrap components we're relying on: stackoverflow.com/a/32264842/446030
    – JcT
    Aug 28, 2015 at 7:25
8

Using the elementexplorer (https://github.com/angular/protractor/blob/master/docs/debugging.md) I looked at the protractor object and found an answer that is working wonderfully for me:

var el = element(by.id('visibleElementId'));
browser.driver.wait(protractor.until.elementIsNotVisible(el));
2
expect(ptor.isElementPresent(by.css('.warning'))).toBe(false);

This is another way of checking if something is displayed on the page or not

4
  • Not really what I'm looking for, as it will pass the expectation if the element is not in the DOM. In my case it is always in the DOM, but it is hidden. May 15, 2014 at 19:36
  • I get ReferenceError: isElementPresent is not defined. Jun 12, 2014 at 6:25
  • According to Protractor API, you can call isElementPresent from a protractor instance, elementFinder or a webElement.
    – glepretre
    Jul 1, 2014 at 7:02
  • 2
    Thanks this helped me! You should just add by.css() around the locator string. Jul 9, 2014 at 11:20
0

From my experience, this is a common "sad" issue. You know your code is written properly, but test is failed due to waits. For instance, in Chrome I get the next error in console :

< unknown error: Element is not clickable at point (952, 275). >

So, I created separate function in my WebDriver class and seems it works:

this.waitElementToBeShown = function (elmLocator) {
        browser.sleep(500);
        browser.wait(function () {
            return (elmLocator).isPresent();
        }, 3000);
        browser.wait(function () {
            return (elmLocator).isDisplayed();
        }, 3000);
    }
1
  • 2
    I would strongly advocate against using a browser.sleep if any other option is still available. From my experience, slow tests are run less often, which make them less usefull, so they are run less often. Aug 18, 2015 at 17:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.