How to retrieve AngularJS generated content in li from Selenium and JUnit?

Question

I am writing an Integration Test with Play! Framework, JUnit and Selenium. My client side web has AngularJS to fullfill the page content. I want to test the content but I cannot get how to do it. Here is my sample code:

HTML view:

...
<ul name="quequeEntityList">
   <li class="list-group-item" ng-click="turnClick($index)" ng-repeat="turn in turns"> {{turn.value}}</li>
</ul>
...

JUnit with Selenium test:

@Test
public void loginToControlPanelTest()
{
    running(testServer(9000, fakeApplication()),
            HTMLUNIT,
            new Callback<TestBrowser>()
            {
                public void invoke(TestBrowser browser) 
                {          
                    browser.goTo("http://localhost:9000/panel");
                    browser.await();  
                    System.out.println(browser.find("ul[name='queueEntityList'] > li"));
                }
            });        
}

With this simple test I could get the ul but I want to navigate through the lis and see the generated content, how can I do it?

score 1 · Answer 1 · answered May 12 '15 at 00:10

By default Selenium does it actions without waiting and tries to execute right after the previous action. So in your example, the find() is executed right after the page is loaded. However, when using Angular or anything other asynchronous (like AJAX calls) the moment when the page is loaded does not meet it is fully rendered and all ajax request have finished.

Thus you must use wait and provide Selenium some condition, which it should wait for, until it continues with the test execution. In this case it could be ie. when the number of

elemets is greater than one, so you basically behaves as it is some ajax request which takes a moment until it is loaded.

How to retrieve AngularJS generated content in li from Selenium and JUnit?

1 Answers1