Over a million developers have joined DZone.
Platinum Partner

WebDriver and AngularJS

· Web Dev Zone

The Web Dev Zone is brought to you in partnership with Mendix. Download this Forrester Report to gain a better understanding of the low-code platform market and how to make a strategic platform selection you won’t regret.

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.

The Web Dev Zone is brought to you in partnership with Mendix. Better understand the aPaaS landscape and how the right platform can accelerate your software delivery cadence and capacity with the Gartner 2015 Magic Quadrant for Enterprise Application Platform as a Service.

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

Published at DZone with permission of Paul Hammant , DZone MVB .

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}