browser.wait() does not work when there is no spinner

Hi there!

I am facing very weird behaviour of browser.wait(). In my test website sometime Spinner appear and sometime it does not appear to handle this situation I am using browser.wait(). But when there is no spinner appears in the page in that condition my code is not working and throwing exception. Can you please help me to resolve this issue. How I can make sure that if there is no spinner execution will continue if there is a spinner it wait for spinner to finish and then move to next step in test.

Below is my code:

this.waitForSpinnerFinished = () => {
       browser.wait(function() {
            return element(by.css('.spinner')).isDisplayed().then(function(result) {
                return !result;
            })
        }, 30000)
    }}

Bug report

Node Version: v6.10.0 Protractor Version: 4.0.9 Angular Version: 1.X Browser(s): Chrome Operating System and Version Windows 10

• Your protractor configuration file

require(‘babel-register’);

exports.config = {

    directConnect: true,
    // chrome driver location if different than installed with webdriver-manager update, when directConnect: true
    chromeDriver: './4_utilsObjects/chromedriver_2.29.exe',

    allScriptsTimeout: 180000,

    framework: 'jasmine',

        suites: {
        tests: ['1_testLaunchers/*.js'],
        visual: ['visualRegression/*.js'],
    },
     rootElement: '[ng-app="preApp"]',
         capabilities: {
        'browserName': 'chrome',
        'chromeOptions': {
            // needed to disable saving passwords in account creation tests
            'prefs': {
                'credentials_enable_service': false,
                'profile': {
                    'password_manager_enabled': false
                }
            }
        },

           },

           jasmineNodeOpts: {
        silent: true,
        defaultTimeoutInterval: 180000,
        // needed for jasmine-spec-reporter
        print: function () {
        }
    },

        onPrepare: () => {
        // here we're adding real time jasmine reporter that will display test steps
        // see https://github.com/bcaudan/jasmine-spec-reporter
        var SpecReporter = require('jasmine-spec-reporter');
        // add jasmine spec reporter
        jasmine.getEnv().addReporter(new SpecReporter({
            displayStacktrace: 'none',
            displaySuccessfulSpec: true,
            displayFailedSpec: true,
            displaySpecDuration: true,
            displaySuiteNumber: true,
            displayPendingSummary: false,
            displayPendingSpec: false
        }))

        // adding Jasmine JUnit reporter
        var jasmineReporters = require('jasmine-reporters');
        jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter({
            consolidateAll: true,
            savePath: 'reports/JUnitReporter',
            filePrefix: 'testresults'
        }))

        // reporter for TeamCity, enabled only in CI
        if (process.env.TEAMCITY_VERSION)
        {
            jasmine.getEnv().addReporter(new jasmineReporters.TeamCityReporter());
        }

        // Disable animations so e2e tests run faster
        var disableNgAnimate = function () {
            angular.module('disableNgAnimate', []).run(['$animate',function ($animate) {
                $animate.enabled(false);
            }]);
        }
        browser.addMockModule('disableNgAnimate', disableNgAnimate);

        // reporter taking screenshots when failed assertion is spotted, comment out to speed up test run
        var Jasmine2HtmlReporter = require('protractor-jasmine2-html-reporter');
        jasmine.getEnv().addReporter(new Jasmine2HtmlReporter({
            savePath: 'reports/screenshotReporter/',
            takeScreenshotsOnlyOnFailures: true,
        }))
    }
}

• A relevant example test

this.startSignUp = () => {
        element(by.css('#protractorjs')).click();
        this.waitForSpinnerFinished();
    }

• Output from running the test
• Failed: No element found using locator: By(css selector, ‘.spinner’)

[cnishina]

I think isDisplayed already assumes that it is in the DOM and either is displayed or it is in the DOM but currently hidden. My guess is that the reporter to this issue thought that calling isDisplayed will work; however, it appears that it is not part of the DOM. My guess is that they really wanted isPresent since it would check how many elements actually exist on the DOM with the class spinner. So the way I would fix this:

this.waitForSpinnerFinished = () => {
       browser.wait(() => {
            return element(by.css('.spinner')).isPresent().then((result) => {
                return !result;
            })
        }, 30000);
    });

[cnishina]

@wswebcreation what do you think?