Inconsistent behavior using element.all(by.css())

[acostaf]

Having this html

    <ol class="breadcrumb">
        <li>Welcome John, Winchester </li>
        <li>You are:</li>
        <!-- ngRepeat: breadcrumb in breadcrumbs --><li ng-repeat="breadcrumb in breadcrumbs" class="ng-scope">
            <a href="#/RolesByUnit" ng-hide="$last" class="ng-binding ng-hide">Role Management</a>
            <span ng-show="$last" class="ng-binding">Role Management</span>
        </li><!-- end ngRepeat: breadcrumb in breadcrumbs -->
    </ol>

and running this test:

  it("should do something", function () {
    var tabs = element.all(by.css('.breadcrumb li')).map(function (elm) {
        return elm.getText();
    });

    tabs.then(function (result) {
        browser.getCurrentUrl().then(function (uri) {
            console.log(uri);

            console.log(result.length);
            console.log(result);
        });
      });
  });

It's returned this [ 'Welcome John, Winchester', 'You are:', 'Role Management', '', '', '', '' ]

So now I do navigate to another page where the breadcrumb contains more item like the next piece of html

    <ol class="breadcrumb">
        <li>Welcome John, Winchester </li>
        <li>You are:</li>
        <!-- ngRepeat: breadcrumb in breadcrumbs --><li ng-repeat="breadcrumb in breadcrumbs" class="ng-scope">
            <a href="#/RolesByUnit" ng-hide="$last" class="ng-binding">Role Management</a>
            <span ng-show="$last" class="ng-binding ng-hide">Role Management</span>
        </li><!-- end ngRepeat: breadcrumb in breadcrumbs --><li ng-repeat="breadcrumb in breadcrumbs" class="ng-scope">
            <a href="#/RolesByUnit?UnitId=2" ng-hide="$last" class="ng-binding">FX</a>
            <span ng-show="$last" class="ng-binding ng-hide">FX</span>
        </li><!-- end ngRepeat: breadcrumb in breadcrumbs --><li ng-repeat="breadcrumb in breadcrumbs" class="ng-scope">
            <a href="#/RolesByUnit" ng-hide="$last" class="ng-binding ng-hide">New Role 1</a>
            <span ng-show="$last" class="ng-binding">New Role 1</span>
        </li><!-- end ngRepeat: breadcrumb in breadcrumbs -->
    </ol>

Then I run the above test to get the same result, Why is that ?

it("should 2", function () {
    browser.get('#/RolesByUnit/2/67');
    var tabs = element.all(by.css('.breadcrumb li')).map(function (elm) {
        return elm.getText();
    });

    tabs.then(function (result) {
        browser.getCurrentUrl().then(function (uri) {
            console.log(uri);

            console.log(result.length);
            console.log(result);
        });
      });
  });

Now if I insert a browser.debugger(); after navigate I get the right result [ 'Welcome John, Winchester', 'You are:', 'Role Management', 'FX', 'New Role', '', '', '', '' ]

so Inconsistent behavior, I don't know why this is happening

[juliemr]

Have you turned off synchronization?

[acostaf]

Yes I am turning it off

beforeEach(function () { browser.ignoreSynchronization = true; browser.get('#/RolesByUnit'); });

However not doing that get some other issues like "Error: Error while waiting for Protractor to sync with the page: {}"

[juliemr]

I'm guessing you have a race condition on your second one, and since synchronization is turned off the .breadcrumb elements are being grabbed before the navigation completes. You'll need to do some sort of custom browser.wait.

[juliemr]

Is there still an issue here?