Check text in a DOM element using Protractor

angularjs protractor cucumberjs
azangru picture azangru · Mar 13, 2015 · Viewed 13.9k times · Source

Here’s what I’m trying to do while testing an Angular app with Protractor. I would like to get a certain element, which is somewhat like this:

<div class="someClass">
   <p>{{textFromBoundModel}}</p>
</div>

then get its html, and check whether it contains the text that I expect it to have.

I tried to get this element first by the cssContainingText method, but it didn't quite work (not sure why; maybe because the text within the paragraph is produced dynamically). So now I’m getting this element using just the by.css locator. Next, I'm checking whether it contains the text I’m testing for:

// this is Cucumber.js    

this.Then(/^Doing my step"$/, function(callback){
    var el = element(by.css('.someClass'));            
    expect(el).to.contain("some interesting string");
    callback();
 });
});

but this doesn't work. Problem is, el is some kind of a locator object, and I can’t figure out how to get html of the element it found in order to test against this html. Tried .getText(), with no success.

Any suggestions?

Answer

P.T. picture P.T. · Mar 13, 2015

Does:

expect(el.getText()).to.eventually.contain("some interesting string");

work?

I believe you need the .eventually to wait for a promise to resolve, and you need the .getText() to get at the content of the div.

See the chai-as-promised stuff at the head of the cucumber sample.

Related questions

How to select option in drop down protractorjs e2e tests

I am trying to select an option from a drop down for the angular e2e tests using protractor. Here is the code snippet of the select option: <select id="locregion" class="create_select ng-pristine ng-invalid ng-invalid-required" required="" ng-disabled="…

Read More
How to use protractor to check if an element is visible?

I'm trying to test if an element is visible using protractor. Here's what the element looks like: <i class="icon-spinner icon-spin ng-hide" ng-show="saving"></i> When in the chrome console, I can use this jQuery selector …

Read More
How to getText on an input in protractor

In the documentation for protractor, I see the following example: describe('by model', function() { it('should find an element by text input model', function() { var username = element(by.model('username')); username.clear(); username.sendKeys('Jane Doe'); var name = element(by.…

Read More