Testing Angular Dynamic Page Content (ng-if) with Geb

Question

I am trying to check if an Angular ng-if element is visible or not using Geb. So far, I have been trying to check whether the displayed property is true or false, as shown below.

Angular:

<article ng-if="!condition" class="bar foo ng-scope">Text to Display</article>

Geb user interface module:

unselectedErrorText { $(class: "bar foo ng-scope") }

Test:

assertThat(unselectedErrorText.displayed).isFalse()
checkBox.value()==false
assertThat(unselectedErrorText.displayed).isTrue()

I get the following error:

The required page content 'unselectedErrorText - SimplePageContent' is not present

Thanks in advance!

Answer 1

What I missed is that Angular generates dynamic page content. Geb (through the underlying selenium) will only have an initial DOM before any JavaScript manipulation is performed.

I solved this using the waitFor method provided by Geb.

checkbox.value(false)
waitFor("quick") {
    assertThat(unselectedErrorText.displayed).isTrue()
}

, !