Retrieving Selenium WebElements after AngularJs populates table

Question

I'm currently trying to implement an e2e testing of a website that relies heavily on AngularJs using Selenium/Fluentlenium.

I've used this approach before with no problems but it seems as if phantomJS simply can't handle running Angular.

If I "view page source" in Chrome, all I see are the bindings(e.g. {{ object.item }}), if I however "inspect element", I get what I get the content I expect.

Let's say our html looks like this(and is loaded by $http, and assume $scope.loading is false after $scope.objects has populated):

<table ng-show="!loading" id="itemList">
<tbody>
    <tr ng-repeat="object in objects">
        <td class="item1">{{ object.item1 }}</td>
        <td class="item2">{{ object.item2 }}</td>
        <td class="item3">{{ object.item3 }}</td>
        <td class="itemSafe"><input type="checkbox" disabled="true" ng-checked="object.itemSafe == 1"></td>
    </tr>
</tbody>
</table>

So far this is what I got:

private static final int TIMEOUT = 10;
private static final int PORT = 3333;
protected static final String URL = "http://localhost:" + PORT;

public static PhantomJSDriver driver = setupWebDriver();
public static WebDriverWait wait = new WebDriverWait(driver, TIMEOUT);
public static TestBrowser browser = testBrowser(driver);

    private static PhantomJSDriver setupWebDriver() {
        DesiredCapabilities caps = new DesiredCapabilities();
        caps.setJavascriptEnabled(true);

        LoggingPreferences logPrefs = new LoggingPreferences();
        logPrefs.enable(LogType.BROWSER, Level.ALL);
        caps.setCapability(CapabilityType.LOGGING_PREFS, logPrefs);

        String path = findDriverPath(); //Not relevant, just finds the binary
        caps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY, path);
        return new PhantomJSDriver(caps);
    }

    @Before
    public static void setup() throws Throwable {
        driver.manage().window().setSize(new Dimension(1280, 720));
        driver.get(URL);
    }

    @Test
    public void testFindItem1(){
            browser.$("#items").click();  //opening site has link with id
            wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("itemList")));  //table element
            browser.$("#filter").text("item1Text");  //input element for filtering
            List<WebElement> item1s = driver.findElements(By.className("item1"));
            for(WebElement item1: item1s){
            System.out.println(item1.getText()); //outputs "{{ object.item1 }}"  once <-- MY PROBLEM
        }
    }

....this only results in "{{ object.item1 }}" being printed once, but works perfectly in Chrome.

EDIT: I'm sorry my question wasn't clear enough, I should have included the following piece of javascript code:

$scope.objects = [{item1: "one", item2: "two", item3: "three", itemSafe: "1"}, {item1: "four", item2: "five", item3: "six", itemSafe: "0"}];
$scope.loading = false;

Given that, my expected html is:

<tr>
<td class="item1">one</td>
<td class="item2">two<td>
<td class="item3">three</td>
<td class="itemSafe"><input type="checkbox" disabled="true" ng-checked="object.itemSafe == 1"></td>
</tr>
<tr>
<td class="item1">four</td>
<td class="item2">five<td>
<td class="item3">six</td>
<td class="itemSafe"><input type="checkbox" disabled="true" ng-checked="object.itemSafe == 1"></td> 
</tr>

Please note that given that JSON array, the first checkbox should be checked but the second should not.

Based on the html you pasted, this is correct behavior - there is only one element with `item1` class. You could use some xpath to find all the relevant elements, or get all `td` tags and filter them before processing. — skandigraun, Mar 23 '16 at 00:56

score 0 · Answer 1 · answered Mar 23 '16 at 02:18

Looks like your selenium is working correctly as per your code - there is only one element with class = "item1"

What you probably want is something like

List<WebElement> item1s = driver.findElements(By.tagName("td"));

If that doesn't produce the results you want please explain more clearly what is the correct expected result.

Retrieving Selenium WebElements after AngularJs populates table

1 Answers1