How to write selenium webdriver code for Angular JS

How to write selenium webdriver code for Angular JS

Angular JS is a opensource web application framework based on Java-script. Angular JS based code uses a different format to identify the DOM object. If we want to capture those with selenium web-driver the only way we could think of is using xpaths and using xpath through the whole selenium code to identify the UI objects will not be fun :)

Luckily, we can use what is know as NgWebDriver. Take for example the below code segment from an Angular JS webpage. What we find hear are ng-model.

<td style="width:50%;vertical-align: top;padding-left:100px;">
   <div style="padding-bottom:20px;">
      <h3 style="margin-top:0px">Add a Company</h3>
   </div>
   <form class="form-horizontal" role="form" ng-submit="addRow()">
   <div class="form-group">
      <label class="col-md-2 control-label">Name</label>
      <div class="col-md-4">
         <input type="text" class="form-control" name="name"
            ng-model="name" />
      </div>
   </div>
   <div class="form-group">
      <label class="col-md-2 control-label">Employees</label>
      <div class="col-md-4">
         <input type="text" class="form-control" name="employees"
            ng-model="employees" />
      </div>
   </div>
   <div class="form-group">
      <label class="col-md-2 control-label">Headoffice</label>
      <div class="col-md-4">
         <input type="text" class="form-control" name="headoffice"
            ng-model="headoffice" />
      </div>
   </div>
   <div class="form-group">
      <div style="padding-left:110px">
         <input type="submit" value="Submit" class="btn btn-primary"/>
      </div>
   </div>

Note: The AngularJS code is from https://hello-angularjs.appspot.com/sorttablecolumn

In order to use NgWebDriver we need to first add a dependency to our maven project. If we navigate to https://mvnrepository.com/artifact/com.paulhammant/ngwebdriver/ we would find the versions available. In my example I will be using 1.1.4 as the ngwebdriver version.

<dependency>

    <groupId>com.paulhammant</groupId>

    <artifactId>ngwebdriver</artifactId>

    <version>1.1.4</version>

</dependency>

Once we add the above code segment, we need to first run maven install to download the relevant dependent jars.

Our Selenium Webdriver code should then import the NgWebdriver and make use of it. The below example code we can see the lines which call the specific code that makes use of NgWebdriver.

package AngularPakg;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.AfterTest;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;

import com.paulhammant.ngwebdriver.ByAngular;
import com.paulhammant.ngwebdriver.NgWebDriver;


public class NGWebDriverTest {
   
    static WebDriver driver;
    static NgWebDriver ngdriver;
   
   
@BeforeTest
    public void setup()
    {
       
System.setProperty("webdriver.chrome.driver", "/home/shavantha/Documents/chromedriver");
        driver = new ChromeDriver();
        driver.get("https://hello-angularjs.appspot.com/sorttablecolumn");
       
        ngdriver = new NgWebDriver((JavascriptExecutor) driver);
    }

@Test
    public void testSearch()
    {
        driver.findElement(ByAngular.model("name")).sendKeys("Shavantha");
        driver.findElement(ByAngular.model("employees")).sendKeys("30");
        driver.findElement(ByAngular.model("headoffice")).sendKeys("Colombo");
        driver.findElement(ByAngular.buttonText("Submit")).click();
       
       
String txt = driver.findElement(ByAngular.repeater("company in companies").row(4).column("name")).getText();
          System.out.println(txt + " Added.");
       
    }

@AfterTest
    public void tearDown()
    {
      driver.close();
      driver.quit();
    }

}