Get child element of span with certain attribute value with protractor

Question

I want to test with protractor if a popover pops up. This is the my html. The popover sits in the last child span:

<span tariff-popover="views/popovers/c2g/airport.html" class="ng-isolate-scope">
    <span ng-transclude="">
        <span class="ng-scope">
           Flughafenpauschale
         </span>
     </span>
        &nbsp;
     <span popover-placement="right" popover-template="text" popover-trigger="mouseenter" class="fa fa-info-circle">
     </span>
</span>

How do I select the last span? I need to select it based on the value of tariff-popover on the parent span. This is how I've tried to selet it:

it('should display the popover-content on mouseover', function() {
  var popover = element(by.css('span[tariff-popover=views/popovers/c2g/airport.html] > .fa.fa-info-circle'));

  console.log(popover.getInnerHtml());

  /* more tests here */

});

The console.log gives me errors as the css selector is wrong. Any suggestions?

Answer 1

There should be quotes around the tariff-popover value. Try with this -

var popover = element(by.css('span[tariff-popover="views/popovers/c2g/airport.html"] > .fa.fa-info-circle'));

And moreover .getInnerHtml() will return a promise. So, you need to wait for it to return a value. Here's how -

popover.getInnerHtml().then(function(val){
    console.log(val);
});

Hope this helps.