Protractor locator chaining fails to find an element text

Question

I try to find an element located under another element, and protractor seems to fail getting the right value.

Here's an elaborated description.

I have the following HTML:

<div ng-repeat="stageRow in stageModel" debugId="stage-row">
  <div>
    <span debugId="stage-name-text">{{ stageRow.name }}</span>
  </div>
  <div>
    <span debugId="stage-count-text">{{ stageRow.count }}</span>
  </div>
</div>

I then use the following protractor code to find a row:

var allStages = element.all(by.css('[debugId="stage-row"]'));
var stage01 = allStages.get(0);

I then try to chain a locator to find a certain cell:

var count01 = stage01.$('[debugId="stage-count-text"]');

Then I make an expectation:

expect(count01.getText()).to.eventually.equal('1')

And here is what I get:

  + expected - actual

  +"1"
  -""

Even though I clearly have "1" as the stage's count. I know this because:

I see it with my own eyes :)
I stop in debug mode right before the expectation, and inspect the HTML to see that indeed the text of that span is "1".
Then I try this:

I put a printout of the HTML before the expectation:

stage01.getOuterHtml().then(function(result) {
  console.log(result);
});

And I see the expected HTML:

<div ng-repeat="stageRow in stagingModel" class="ng-scope" debugid="stage-row">
  <div>
    <span debugid="stage-name-text" class="ng-binding">nuziba</span>
  </div>
  <div>
    <span debugid="stage-count-text" class="ng-binding">1</span>
  </div>
</div>

And right after that, I manually try this:

stage01.element(by.css('[debugId="stage-count-text"]')).getText().then(function(count) {
  console.log(count);
});

And I get "" at the printout...

I then tried to locate the elements using a different method - with by.repeater instead of by.css. Got the same results.

What happens here? Clearly, the HTML contains the correct markup. Why is protractor failing to extract it properly?

For the record, I'm using protractor version 1.4.0, and the runner is mocha 1.18.2, rather than Jasmine.

Many thanks in advance, Daniel

Try this locator, it should work: element(by.repeater('stageRow in stagingModel').row(0)).$('[debugid="stage-name-text"]') — Sergey Teplyakov
I'm not sure why this is happening as it's working for me (I just made a quick app with your html markup and copied your test over). Can you try with protractor 1.8.0 and report the results? — hankduan
Try using elementexplorer to run the browser and find the element in runtime. I found it useful as often I made stupid mistakes in locators. — Igor Shubovych

BarretV BarretV · Accepted Answer · 2015-04-14T19:14:20

You need at least protractor 1.7 to use the expected conditions the current version is 2.0 so you should be able to do something like this if you're still having issues.

Here you can have protractor wait till the element has the text '1' in it and then the expect won't check until that condition is met

var count01HasText = EC.textToBePresentInElement(count01, '1');
browser.wait(count01HasText, 5000,);
expect(count01.getText()).toEqual('1');

Protractor locator chaining fails to find an element text

1 Answers