Selenium webDriver to test AngularJS applications

AngularJS controls are becoming more popular these days due to it’s flexibility of use, less coding, allows single page applications and many more which a developer know much better than us (us as  testers :P)…

So with the changing in technology and the way controls are used. as a tester, we also need to upgrade our skills and way of testing the applications…

in AngularJS controls, we are getting some extra html attributes like ng-model, ng-repeater, ng-controller etc, these are not included as locators in selenium.
if any controls have only these attributes are set, we can’t find the elements with selenium,
There is an alternative given to selenium, Protractor which is built on top of selenium to handle the above mentioned attributes.

Protractor tutorial [using typescript or javascript]

Protractor don’t support java language to write scripts, so the workaround to selenium java for Angulas JS applications is to use the xpath (or CSS Selector) as locator when we are using raw selenium for angularJS controls.

xpath / CSS Selector simply searches for the elements with the tags and attributes irrespective of what technology used to build the site…




while automating angular sites, we need to only take care of identifying the elements which is different than regular web elemenets.., rest automation stuff like framework, reportings are as usual…

let’s see a sample code for testing angularJS controls with raw selenium for Java…

package testPkg;

import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;

public class AngularSite {

 public static void main(String[] args) throws InterruptedException {
     WebDriver driver = new FirefoxDriver();
     driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
     driver.manage().window().maximize();
     driver.get("https://angularjs.org/"); 
     Thread.sleep(1000);
      //we are about to identify an element with attribute ng-model
     driver.findElement(By.xpath("//input[@ng-model='yourName']")).sendKeys("xyz");
     WebElement fld_Result = driver.findElement(By.xpath("//h1[@class='ng-binding']"));
     System.out.println(fld_Result.getText());
     if (!(fld_Result.getText() == "Hello xyz!")) //returns 0, if equals, so negation
        {
            System.out.println("Passed");
        }
   }
}