Paul is a principal consultant at ThoughtWorks. He is enthusiastic about open source in particular. He is known for Dependency Injection (one of its pioneers with PicoContainer), Selenium browser automation (co-founder), Branch by Abstraction and most recently Client-Side MVC frameworks. Paul is a DZone MVB and is not an employee of DZone and has posted 79 posts at DZone. You can read more from them at their website. View Full User Profile

WebDriver and AngularJS

09.03.2013
| 2696 views |
  • submit to reddit

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();

wd.get("http://docs.angularjs.org/cookbook/advancedform");

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"));

cityField.clear();
cityField.sendKeys("Chicago");

// 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"));

wd.quit();
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 .scope() is smart enough to work out which scope you mean from that. Using it is slightly less than perfect IMO, as I’d prefer executeScript() 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.
Published at DZone with permission of Paul Hammant, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)