Selenium DOM is not changed after execution of Angular ng-if condition

we have following code on page which has angular ng-if condition.

<p ng-if="!old_email" style="line-height: 20px; font-weight: normal;"><b>Hi,</b><br><br>
    We have created a new account with &rsquo;{{ new_email }}&lsquo;, for you on<br> Plobal Apps to preview and test your app and mailed you the details. Please check your inbox.
</p>

<p ng-if="new_user && old_email" style="line-height: 20px; font-weight: normal;"><b>Hi,</b><br><br>
  We have created a new account with &rsquo;{{ new_email }}&lsquo;, for you on<br> Plobal Apps to preview and test your shopify app and mailed you the details. Please check your inbox.
  <br />
  You have been logged out of the previous account with &rsquo;{{ old_email }}&lsquo;.
</p>

<p ng-if="existing_user && old_email" style="line-height: 20px; font-weight: normal;"><b>Hi,</b><br><br>
  We have logged you in with &rsquo;{{ new_email }}&lsquo;, on Plobal Apps to preview and test your shopify app.
  <br />
  You have been logged out of the previous account with &rsquo;{{ old_email }}&lsquo;.
</p>

ng-if condition will execute dynamically and pickup tags as per requirements. I have observed on html page that everything is working. I observed following html code after inspecting page.

<!-- ngIf: !old_email -->

<!-- ngIf: new_user && old_email -->

<!-- ngIf: existing_user && old_email --><p class="ng-binding ng-scope" ng-if="existing_user &amp;&amp; old_email" style="line-height: 20px; font-weight: normal;"><b>Hi,</b><br><br>
  We have logged you in with ’suwarnawandhekar46@gmail.com‘, on Plobal Apps to preview and test your shopify app.
  <br>
  You have been logged out of the previous account with ’test@plobalapps.com‘.
</p><!-- end ngIf: existing_user && old_email -->

If I print innerHTML of parent element by selenium then I found

<p ng-if="!old_email" style="line-height: 20px; font-weight: normal;"><b>Hi,</b><br><br>
  We have created a new account with ’{{ new_email }}‘, for you on<br> Plobal Apps to preview and test your app and mailed you the details. Please check your inbox.
</p>

<p ng-if="new_user &amp;&amp; old_email" style="line-height: 20px; font-weight: normal;"><b>Hi,</b><br><br>
  We have created a new account with ’{{ new_email }}‘, for you on<br> Plobal Apps to preview and test your shopify app and mailed you the details. Please check your inbox.
  <br>
  You have been logged out of the previous account with ’{{ old_email }}‘.
</p>

<p ng-if="existing_user &amp;&amp; old_email" style="line-height: 20px; font-weight: normal;"><b>Hi,</b><br><br>
  We have logged you in with ’{{ new_email }}‘, on Plobal Apps to preview and test your shopify app.
  <br>
  You have been logged out of the previous account with ’{{ old_email }}‘.
</p>

As per my understanding, Selenium DOM is not changed after execution of Angular ng-if condition. Please help me if anyone knows how to tell selenium to execute angular ng-if condition and then look for element.

Answer

Please recheck if the following code is really present:

ng-if="new_user &amp;&amp; old_email"

Because initially it was:

ng-if="new_user && old_email"

I.e. it looks like Selenium replaces && symbols by

&amp;&amp;

in ng-if and it’s the root of the issue: Angular can’t parse “non JS” code (or interprets it incorrectly)

P.S. The same is with the following code:

ng-if="existing_user &amp;&amp; old_email"

i.e.

&amp;&amp;

is present instead of && in ng-if too.

Advertisement

Answer