WebDriver and AngularJS

DZone 's Guide to

WebDriver and AngularJS

· Web Dev Zone ·
Free Resource

Eighteen months ago I was hypothesizing about new WebDriver (Selenium 2.x) accessors specific to AngularJS. It’s now a reality.

WebDriver Locators for items in an Angular View

These were pioneered by Julie M Ralph in her Protractor project. There’s a bunch of Angular-centric locators for elements in the DOM supported in Protractor. Specifically:

  • Find by Angular Binding, like ‘cat.name’
  • Find ‘row’ from a ng-repeat list, like ‘cat in cats’ / #3
  • Find ‘cell’ from a ng-repeat list, like ‘cat in cats’ / #3 / ‘cat.color’
  • Find a ‘column’ from a ng-repeat list like ‘cat in cats’ / ‘cat.color’
  • Find inputs and selects in a more idiomatic way for Angular

As well as plural versions of many of the above. See the source for protractor and the first 280 lines at least. These are not compatible (yet) with findElement(s), but I raised it with the rest of the Selenium dev team that they could be with some changes.

WebDriver scripts for items in an Angular Model

It’s also possible to retrieve values from the model in $scope, as well as change model value directly.

With The Cookbook’s advanced form, (1/3 down the page) as a testbed, here is an example code for that. The source below is in Java, but it shouldn’t be hard to port to other languages:

FirefoxDriver wd = new FirefoxDriver();


WebElement cityField = wd.findElement(By.cssSelector("input[ng-model='form.address.city']"));
WebElement theForm = wd.findElement(By.cssSelector("div[ng-controller='UserForm']"));

assertThat(cityField.getAttribute("value"), is("Anytown"));


// returns a GoogleCollections Map ordinarily ... note the toString() at the end..
String addr = wd.executeScript("return angular.element(arguments[0]).scope().form.address;", theForm).toString();

// Not JSON, but close enough
assertThat(addr, is("{zip=12345, state=AA, line1=123 Main St., city=Chicago}"));

wd.executeScript("angular.element(arguments[0]).scope().form.address.city = 'New York';" +
        "angular.element(document.body).injector().get('$rootScope').$apply();", theForm);

assertThat(cityField.getAttribute("value"), is("New York"));


Given the potential for nested scopes, it’s important to find an element that’s part of the scope that you are dealing with so that Angular can find the right scope. That’s the only reason I’m locating ‘theForm’ above. It could be any element that’s co-located with the ng-app, as


is smart enough to work out which scope you mean from that.Using it is slightly less than perfect IMO, as I’d prefer


to return a string as is, and I do the transformation into an object-model (or not) myself. In some circumstances I might choose Jackson for deserialization, but can’t because of internal WebDriver choices.

angularjs, html & xhtml, html 5, news, selenium

Published at DZone with permission of Paul Hammant , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}