0

I'm using AngularJs 1.6 and protractor to do e2e tests.

I have the following code in my HTML template

<h1>{{exercise.a}} * {{exercise.b}}</h1>

Then in protractor I'm testing the page and want to get value of that bindings. I do

element(by.binding('exercise.a')).getText().then(console.log)

and the result is combination of exercise.a and exercise.b i.e. '9 * 2' while I expect the result to be '9'. I get exactly the same result is when I try to get value of exercise.b i.e. '9 * 2' while I expect '2'.

It took me a while to find a workaround. After I modifies my code to this it start working properly

<h1><span>{{exercise.a}}</span> * <span>{{exercise.b}}</span></h1>

It seems that something combines both bindings to one.

Could anybody explain why it happens and how to make it work without workaround.

Stepashka
  • 2,648
  • 20
  • 23

1 Answers1

0

To my understanding, Angular attaches your h1 tag with watchers to exercise.a and excercise.b. The original bindings are gone since inner body of h1 tag get's replaced with text 9 * 2.

Angular however remebers the interpolation function together with watchers so that when any of them changes it would recalculate the new value.

That said, both bindings here point to body of h1 which is in your case 9 * 2. The only way to have them separate is to use wrapper element (span in you example) or use ng-bind but again it would require two elements.

Miroslav Jonas
  • 5,407
  • 1
  • 27
  • 41