Selenium for Angular JS Pages

Selenium + NgWebDriver  =  Better AngularJS Support

Angular JS is a opensource web application framework based on Java-script. Any Angular JS implemented web page would have additional custom tag attributs like ng-app, ng-model, ng-bind, ng-repeat etc.

Automating the AngularJS based web application is possible using Selenium. However in certain cases where the web pages are built extensively using AngularJS  resulting in complex DOM structure, it is difficult to locate DOM elements with simple XPaths & CSS selectors.In this case, Protractor (an E2E test framework for Angular Applications) built on Java script version of Selenium makes it easy for identifying the locators easily.



For people who are on java version of Selenium & do not want to switch to Protractor, there is an option of enhancing the Selenium ability to locate angular tags by using NgWebDriver.

NgWebDriver: A small java library of WebDriver locators built to address AngularJS tags.
Like Protractor, it works with Angular versions greater than 1.* and is compatible with Angular 2 applications. In other words, this is alternative to Protractor in java version.



Below example demonstrate a way to use the NgWebDriver with the regular webDriver scripts.

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import com.paulhammant.ngwebdriver.ByAngular;
import com.paulhammant.ngwebdriver.NgWebDriver;

public class AngularWebDriver {

static WebDriver driver;
static NgWebDriver ngdriver;

public static void main(String[] args) throws InterruptedException{
System.setProperty("webdriver.chrome.driver","./chromedriver.exe");
driver = new ChromeDriver();

  //Sample AngularJs Webpage
driver.get("https://hello-angularjs.appspot.com/sorttablecolumn");
driver.manage().window().maximize();

  //Creating an instance of NgWebDriver
ngdriver = new NgWebDriver((JavascriptExecutor) driver);

driver.findElement(ByAngular.model("name")).sendKeys("Test Company");
driver.findElement(ByAngular.model("employees")).sendKeys("1000");
driver.findElement(ByAngular.model("headoffice")).sendKeys("Mysore");
driver.findElement(ByAngular.buttonText("Submit")).click();

Thread.sleep(2000);
String txt = driver.findElement(ByAngular.repeater("company in companies").row(4).column("name")).getText();
System.out.println(txt + " Added.");

if(txt.equalsIgnoreCase("Test Company")){
System.out.println("New Company Added. Now remove it");
driver.findElement(ByAngular.repeater("company in companies").row(4)).findElement(ByAngular.buttonText("Remove")).click();
}

Thread.sleep(3000);
driver.quit();

}

}

References:

https://github.com/paul-hammant/ngWebDriver

http://paulhammant.com/2013/08/31/webdriver-and-angularjs/