How to have a Selenium test locate elements generated by Angular?

Question

I'm currently taking the angular tutorial using Wisdom framework as back end. As a consequence, I run end-to-end tests using Fluentlenium, as the wisdom framework doc states.

My test for step 3, although dead simple, doesn't pass.

Full test can be found at github : Step03IsImplementedIT

However, here is the offending extract (around lines 30)

@Test
public void canTestPageCorrectly() {
    if (getDriver() instanceof HtmlUnitDriver) {
        HtmlUnitDriver driver = (HtmlUnitDriver) getDriver();
        if(!driver.isJavascriptEnabled()) {
            driver.setJavascriptEnabled(true);
        }
        Assert.assertTrue("Javascript should be enabled for Angular to work !", driver.isJavascriptEnabled());
    }
    goTo(GoogleShopController.LIST);
    // Et on charge la liste des téléphones
    FluentWebElement phones = findFirst(".phones");
    assertThat(phones).isDisplayed();

    FluentList<FluentWebElement> items = find(".phone");
    assertThat(items).hasSize(3); // <-- this is the assert that fails
}

Failure message :

canTestPageCorrectly(org.ndx.wisdom.tutorial.angular.Step03IsImplementedIT)  Time elapsed: 2.924 sec  <<< FAILURE!
java.lang.AssertionError: Expected size: 3. Actual size: 1.
    at org.fluentlenium.assertj.custom.FluentListAssert.hasSize(FluentListAssert.java:60)
    at org.ndx.wisdom.tutorial.angular.Step03IsImplementedIT.canTestPageCorrectly(Step03IsImplementedIT.java:33)

From that failure, I guess the angular controllers weren't loaded.

How can I make sure they are ? And how can I have a working test ?

score 0 · Accepted Answer · answered Jul 09 '14 at 12:08

Turned out the error wasn't the expected one ... Well, it was, but in a hidden fashion.

HtmlUnitDriver, as one may be aware, is a pure Java implementation of a browser and, as such, has some limitations.

One of its limitation is Javascript interpretation, which seems to go awfully bad with angular ....

To make long things short, the simplest way to fix that is to replace the default driver with firefox one which implies

setting fluentlenium.browser to firefox
make sure driver loads correctly (since firefox.exe should be on path when trying to use its driver) by adding a small assert at the beginning of the test

Final test is then

    assertThat(getDriver()).isInstanceOf(FirefoxDriver.class);
    goTo(GoogleShopController.LIST);
    FluentList<FluentWebElement> items = find("li");
    FluentLeniumAssertions.assertThat(items).hasSize(3);
    fill("input").with("nexus");
    await();
    items = find(".phone");
    FluentLeniumAssertions.assertThat(items).hasSize(1);
    fill("input").with("motorola");
    await();
    items = find(".phone");
    FluentLeniumAssertions.assertThat(items).hasSize(2);

How to have a Selenium test locate elements generated by Angular?

1 Answers1