Protractor : how to compare the text content of the same web element before and after clicking on a button

Question

I would like to test a filtering function in my angularJS app. In fact when I click on the filter the number of search results displayed on the page should decrease Here is is my code so far :

    element(by.id('foundNumber')).getText().then (function(text){console.log(text); })
    element(by.repeater('term in facets.uproctype').row(0)).click ()
    element(by.id('foundNumber')).getText().then (function(text){console.log(text); })

And here is my console log :

Using the selenium server at http://localhost:4444/wd/hub
6209
6195
.... 

I don't know how can I compare theses two values in an expect line as I can't use them inside their function. Any help?

Thanks Zied

Answer 1

I believe you would have to nest your then functions to ensure the original value is available.

element(by.id('foundNumber')).getText().then( function(original_text) {

  element(by.repeater('term in facets.uproctype').row(0)).click ();

  element(by.id('foundNumber')).getText().then( function(new_text){
    expect(original_text).not.toBe(new_text);
  });

});

This link also might be helpful. https://code.google.com/p/selenium/wiki/WebDriverJs#Control_Flows

Answer 2

Another way is to schedule the comparison at the protractor control flow so it will be executed after all values are available.

var oldValue,newValue;
element(by.id('foundNumber')).getText().then(function(text){oldValue=text})
element(by.repeater('term in facets.uproctype').row(0)).click()
element(by.id('foundNumber')).getText().then(function(text){newValue=text})

protractor.promise.controlFlow()
  .execute(function(){return protractor.promise.fulfilled()},'wait for control flow')
    .then(function(){
      expect(oldValue).not.toEqual(newValue);
    });

There is a nice explanation of flow.execute() in this blog post.