Angular, Katalon & ngWebDriver


I was successfully able to execute a sample script with angular attributes in Katalon.

need experts opinion on ngWebDriver and the best way to integrate with Katalon

Note: First add the ngwebdriver-1.1.4.jar to Katalon project.

import org.openqa.selenium.WebDriver as WebDriverimport

import com.kms.katalon.core.webui.driver.DriverFactory as DriverFactory
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

import org.openqa.selenium.By as By
import org.openqa.selenium.WebDriver as WebDriver

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



WebDriver driver = DriverFactory.getWebDriver()


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

// Waiting for Angular to finish async activity

driver.findElement(ByAngular.model(“headoffice”)).sendKeys(“New York”);

String txt = driver.findElement(ByAngular.repeater(“company in companies”).row(4).column(“name”)).getText();
System.err.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();




i am unable to get locators using Spy web for Angular JS application, Is katalon supports Angular Js??
When can we expect support for multilevel of nested Shadow DOM
Angular testing

Nice finding. I am impressed by the power of open source projects.

ngWebDriver-based code

WebDriver driver = DriverFactory.getWebDriver()
ngdriver = new NgWebDriver((JavascriptExecutor) driver);

Conventional Katalon Studio test case

WebUI.sendKeys(findTestObject('Test Objects/angular_page_name'), “NSE”)

These 2 fragments are meant to achieve the same thing. But they look different.

I hope any testers, even if h/she may say “i am not a programmer”, would understand the conventional code. But how about the ngWebDriver-based code? I am afraid it would puzzle them. To me, the ngWebDriver-based code above is easy enough.

The ‘Manual mode’ of test case editor in Katalon Studio would be no help for writing ngWebDriver-based code.

Do we expect the ‘Manual mode’ of test case editor to be able to support ngWebDriver-based code just as it does for conventional WebDriver-based code? This could be a criteria to test if ngWebDriver is integrated with Katalon Studio or not.

My reply is “No, i do not need it integrated, because I personally never use the Manual mode”.
More over, I do not have a Angular application to test myself, therefore I am not keen on this topic very much. :wink:


In the above sample code, I find the following line is most interesting.

Angular-powered web apps are highly Ajax-driven. Therefore there would be many cases where we need to wait for target elements to be present / visible / clickable in the Angular-specific way. The above one line of code seems encapsulating quite a lot of technical details.


I like this a lot. I think we can wrap some methods as Custom Keywords to make it easier for new users.


That would be of great help Alex… :hugs:

Could you please share the :wink: Custom Keywords


As you see

driver.findElement( ByAngular.model(“name”) ).sendKeys(“NSE”);

Not only custom keywords, we need TestObject and Object Repository to be extend to host Angular-origined citizens like ByAngular.mode("name")


However in the README, I found an puzzling note by the ngWebDriver creater

Note that for Angular 2 apps, the binding and model locators are not supported. We recommend using by.css .

hmm, should Katalon support ByAngular.mode("name") as a new type of TestObject, or not necessary?

If ngWebDriver pushes by.css then why not Katalon makes by.css as the Default Selection Method of TestObjects automatically generated by Recorder/Spy Web tools?