ngWebDriver – a way to automate angular apps in selenium using java

Problem –

In one of my earlier post Selenium java for angularJS apps, we have seen how we can use selenium webdriver and java to test angular js controls, but there are few limitations like we need to stick to a particular locator strategy (xpath or css) as selenium itself do not have locators method specific to angular controls [like ngbinding, ngrepeater etc], and sometime angular element’s actions lag behind the selenium line by line execution [synchronisation issue]

Solution – ngWebDriver

To over come above said issues while testing angular js controls with selenium and java, a library known as ngWebDriver came out to add features to selenium and can write the scripts in java [so that we need not to switch or learn any other languages like javascript for protractor]

ngwebdriver basically taken the advantage of protractor and passing the javascript to browser to handle angular controls and also allows to write scripts in java language with out any synchronisation issue.

Let’s list our few angular controls that are different than normal html elements

ng-model

ng-repeat

ng-binding

If your application has only the above attributes allocated for the browser elements, then we can not use automate using selenium’s default locators like id, tagname, link etc..

but ngwebdriver has capability to identify the above elements directly, let’s see

byAngular.binding(Str)

byAngular.model(str)

byAngular.options(str)

byAngular.repeater(str) - Angular web table

Note – Along with above angular specific locators, we even can use selenium specific locators like id, name, className, css selector etc.

Code implementation

Let’s see sample implementation of ngWebDriver

Setup ngWebDriver is simple, simply add ngwebdriver-x.x.jar file to your existing selenium project and follow below code.

Download the jar file from here

If you want to use ngWebDriver maven dependency – you can find here

import com.paulhammant.ngwebdriver.ByAngular;
import com.paulhammant.ngwebdriver.NgWebDriver;
import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.Assert;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.Test;

import java.time.Duration;

public class NgWebD {

    private static WebDriver driver;
    private static NgWebDriver ngDriver;

    @BeforeMethod
    void Login() throws InterruptedException {
        WebDriverManager.chromedriver().setup();
        driver = new ChromeDriver();

        driver.get("http://juliemr.github.io/protractor-demo/");
        Thread.sleep(2000);
    }

    @Test
    public void AngTest() throws InterruptedException {
        ngDriver = new NgWebDriver((JavascriptExecutor) driver);
        ngDriver.waitForAngularRequestsToFinish();

        driver.findElement(ByAngular.model("first")).sendKeys("2");
        driver.findElement(ByAngular.model("second")).sendKeys("2");
        //driver.findElement(By.id("gobutton")).click();
        driver.findElement(ByAngular.buttonText("Go!")).click();
        ngDriver.waitForAngularRequestsToFinish();

        int count = driver.findElements(ByAngular.repeater("result in memory")).size();
        Assert.assertEquals(count, 1);

        Thread.sleep(2000);
        driver.quit();
    }

}

Note – waitForAngularRequestsToFinish() is used to sync between your selenium script and application.

For instance, in above code, after clicking on Go button, application takes some time to process the request and selenium will move to next line of code as soon as Go button is clicked, and then your script will fail.

to avoid script failing, we have to use waitForAngularRequestsToFinish() to sync between script and application.