ngWebdriver Overview

In simple ngWebdriver is a java library of webdriver locators that used to automate angularJs (v1.x) & Angular (v2 through v9).

Comparing protractor with ng-webdriver:

Protractor is one of the most famous tool in the market which automates angular apps. When SDET receives a requirement to automate webapps which is build on angular or angular JS, at that time SDET should have the knowledge in protractor and JavaScript & if the framework is already build on java, SDET should come with the solution to integrate java with JavaScript.

To overcome this difficulties we can use ngwebdriver which is a java library that has a webdriver locators to automate angular web apps. It supports chrome, Firefox browsers in a most efficient way.

How to identify whether the given web app or website is built on angular or angular JS technology ?

By using  below instructions the user can find whether the application is built on angular or not.

Using html attributes:

In the below screenshot, ng-model used as an attribute. ng-model is one of the directive used to build angular apps.

Below few listed directives are associated with angular:

• NgRepeat
• ngclass
• ngclick
• ngmodel, etc.

Maven Dependency to install ngwebdriver:

Use the below link to add maven dependency in  maven project, after adding ngwebdriver maven project the jarfiles associated with ngwebdriver will automatically added in the maven project.

ngwebdriver maven dependency

To initiate ngwebdriver:

Below code explains to initiate ngwedriver:

WebDriverManager.chromedriver().setup();
WebDriver driver = new ChromeDriver();
driver.get("http://juliemr.github.io/protractor-demo/");
NgWebDriverngDriver = new NgWebDriver((JavascriptExecutor) driver);
ngDriver.waitForAngularRequestsToFinish();

Below locator’s available to locate the web-elements in a effective way to automate angular websites/web-apps.

• ByAngular.model(“attribute value”);
• ByAngular.binding(“attribute value”);
• ByAngular.buttonText(“attribute value”);
• ByAngular.exactBinding(“attribute value”);
• ByAngular.exactRepeater(“attribute value”);
• ByAngular.options(“attribute value”);
• ByAngular.partialButtonText(“attribute value”);
• ByAngular.repeater(“attribute value”);
• ByAngular.exactRepeater(“attribute value”);

Sample code to ByAngular.model(locator value) & ByAngular.buttonText (locator value).

Code:

The above screenshot represents the angular attributes i.e ng-model & button text can also be used as a locator in ngwebdriver.

The below is the code for the example shown in the above screenshot.

WebDriver driver=null;
NgWebDriverngDriver=null;
WebDriverManager.chromedriver().version("81.0.4044.138").setup();
driver = new ChromeDriver();
driver.get("http://juliemr.github.io/protractor-demo/");
ngDriver = new NgWebDriver((JavascriptExecutor) driver);
driver.findElement(ByAngular.model("first")).sendKeys("2");
driver.findElement(ByAngular.model("second")).sendKeys("2");
driver.findElement(ByAngular.buttonText ("Go!")).click();

Caution: When using web-driver manager try to set the version of the chrome browser under version parameter.

Sample code to ByAngular.repeater (locator value), ByAngular.partialButtonText(locator value), ByAngular.model(locator value) and ByAngular.options(locator value):

In the below screenshot, ng- repeat attribute is used to click on a drop down. The user can select the drop down value using the ng- repeat attribute & partial button text is used to click on the button.

Code:

Below code for the example shown in the above screenshot:

public class Ngwebdriver {
public static void main(String[] args) throws InterruptedException {
WebDriver driver=null;
NgWebDriverngDriver=null;
WebDriverManager.chromedriver().version("81.0.4044.138").setup();
driver = new ChromeDriver();
driver.get("http://www.way2automation.com/angularjs-protractor/banking/#/login");
driver.manage().window().maximize();
ngDriver = new NgWebDriver((JavascriptExecutor) driver);
driver.manage().timeouts().implicitlyWait(1000, TimeUnit.SECONDS);
//click customer login button
driver.findElement(By.cssSelector(".center:nth-child(1) > .btn")).click();
//click dropdown
driver.findElement(By.id("userSelect")).click();
//select harry potter
WebElementele= driver.findElement(ByAngular.repeater("cust in Customers").xpath("//*[@id='userSelect']/option[3]"));
ele.click();
//click login button
driver.findElement(ByAngular.partialButtonText("Logi")).click();
//click drop number dropdown 
Thread.sleep(1000);		
driver.findElement(ByAngular.model("accountNo")).click();
Thread.sleep(1000);
//select option 3 i.e 1006 using options locator
driver.findElement(ByAngular.options("account for account in Accounts").xpath("//*[@id='accountSelect']/option[3]")).click();
driver.findElement(ByAngular.model("accountNo")).click();
driver.quit();
    }
}

Sample code for ByAngular.exactBinding(locator value) andByAngular.binding (locator value):

The user should take the attribute value to locate the web – element by using exact binding.

Code:

Below code for the example shown in the above screenshot:

public class Ngwebdriver {
public static void main(String[] args) throws InterruptedException {
WebDriver driver=null;
NgWebDriver ngDriver=null;
WebDriverManager.chromedriver().version("81.0.4044.138").setup();
driver = new ChromeDriver();
driver.get("https://docs.angularjs.org/api/ng/directive/ngBind");
driver.manage().window().maximize();
ngDriver = new NgWebDriver((JavascriptExecutor) driver);
driver.manage().timeouts().implicitlyWait(1000, TimeUnit.SECONDS);
Thread.sleep(10000);
JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("window.scrollBy(0,1500)");
Thread.sleep(4000);
driver.switchTo().frame(0);
Thread.sleep(5000);
WebElement ele=
driver.findElement(By.xpath("//input[@type='text']"));
ele.click();
ele.sendKeys("Test");
Thread.sleep(5000);
WebElement exactBinding= driver.findElement(ByAngular.exactBinding("name"));
WebElement binding= driver.findElement(ByAngular.binding("name"));
String exactBindingvariable= exactBinding.getText(); 
String bindingvariable= binding.getText(); 
System.out.println("Value from Exact binding"+exactBindingvariable);
System.out.println("Value from binding"+bindingvariable);
driver.quit();}}

Sample code for ByAngular.exactRepeater (locator value):

The user can select the drop down also by using exact repeater. The exact repeater locator incorporated with a method called row(), using the row() method the user can select the options.  In the below code  Longbottom  is selected using the row number 4.

Code:

Below code for the example shown in the above screenshot:

public class ExactRepeater {
public static void main(String[] args) throws InterruptedException {
WebDriver driver=null;
NgWebDriver ngDriver=null;
WebDriverManager.chromedriver().version("81.0.4044.138").setup();
driver = new ChromeDriver();
driver.get("http://www.way2automation.com/angularjs-protractor/banking/#/login");
driver.manage().window().maximize();
ngDriver = new NgWebDriver((JavascriptExecutor) driver);
driver.manage().timeouts().implicitlyWait(1000, TimeUnit.SECONDS);
//click customer login button
driver.findElement(By.cssSelector(".center:nth-child(1) > .btn")).click();
//click dropdown
driver.findElement(By.id("userSelect")).click();
//To select Neville Longbottom use row method & exact repeater locator
WebElement ele= driver.findElement(ByAngular.exactRepeater("cust in Customers").row(4));
ele.click();
driver.quit();
}}

Sample code for ByAngular.cssContainingText(locator value):

The user should enter the cssvalue with the element text to use the cssContainingText(String value ) to interact with the web elements.

 

Code:

The below is the code for the example shown in the above screenshot

public class cccontaingtext {
public static void main(String[] args) throws InterruptedException {
WebDriver driver=null;
NgWebDriverngDriver=null;
WebDriverManager.chromedriver().version("81.0.4044.138").setup();
driver = new ChromeDriver();
driver.get("http://www.way2automation.com/angularjs-protractor/banking/#/login");
driver.manage().window().maximize();
ngDriver = new NgWebDriver((JavascriptExecutor) driver);
driver.manage().timeouts().implicitlyWait(1000, TimeUnit.SECONDS);
//click customer login button
driver.findElement(By.cssSelector(".center:nth-child(1) > .btn")).click();
//click dropdown
driver.findElement(By.id("userSelect")).click();
//To select Neville Longbottom
WebElementele= driver.findElement(ByAngular.exactRepeater("cust in Customers").row(4));
ele.click();
Thread.sleep(1000);
WebElement text=driver.findElement(ByAngular.cssContainingText("button.btn.btn-default", "Login"));
String login= text.getText();
System.out.println(login);
}}

Conclusion:

In this article we have seen an overview to locate/automate angular web apps. Feel free to comment below if there is any clarifications or corrections.