How to make sure that the element is not visible and proceed with the next conditions in protractor

Question

I am testing an element that when a user selects a radiobutton, a loading image will appear in the middle, and will be invisible after a few seconds. When the loading image disappears, it should show the login screen and do all the other conditions. Below is my protractor code:

it('Displays the small login screen', function () {
    var loadpanel = element(by.id("loadingimage"));
    var el = loadpanel;
    browser.driver.wait(protractor.until.elementIsNotVisible(el));
    smallLogin = element(by.id('loginScreen'));
    browser.wait(EC.presenceOf(smallLogin), 30000);
    expect(smallLogin.isPresent()).toBe(true);
    element(by.id('dropdown')).click();

This doesn't work, but it passes. I want the loading image to be hidden and until it is visible, the small login condition should not be executed. What happens is that it executes the small login condition and the dropdown click as well, while the image is still visible. Thanks.

Answer 1

The Expected Condition you want to use is invisibilityOf :

var EC = protractor.ExpectedConditions;

// select a radiobutton 

var loadpanel = element(by.id("loadingimage"));
browser.wait(EC.invisibilityOf(loadpanel), 5000);

var smallLogin = element(by.id('loginScreen'));
expect(browser.isElementPresent(smallLogin)).toBe(true);

element(by.id('dropdown')).click();

Also, in a similar case and while testing an internal Angular application, I remember also having to set the ignoreSynchronization to true before the test and set it to false after in order to catching a "loading" state of the app.