Angular, Katalon & ngWebDriver


#1

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

WebUI.openBrowser(‘https://hello-angularjs.appspot.com/sorttablecolumn’)

WebUI.maximizeWindow()

WebDriver driver = DriverFactory.getWebDriver()

driver.manage().window().maximize()

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

// Waiting for Angular to finish async activity
ngdriver.waitForAngularRequestsToFinish();

driver.findElement(ByAngular.model(“name”)).sendKeys(“NSE”);
driver.findElement(ByAngular.model(“employees”)).sendKeys(“1000”);
driver.findElement(ByAngular.model(“headoffice”)).sendKeys(“New York”);
driver.findElement(ByAngular.buttonText(“Submit”)).click();

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();
}

Thread.sleep(3000);

driver.quit();

Angular


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
#2

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

ngWebDriver-based code

WebUI.openBrowser(‘https://hello-angularjs.appspot.com/sorttablecolumn’)
WebUI.maximizeWindow()
WebDriver driver = DriverFactory.getWebDriver()
driver.manage().window().maximize()
ngdriver = new NgWebDriver((JavascriptExecutor) driver);
ngdriver.waitForAngularRequestsToFinish();
driver.findElement(ByAngular.model(“name”)).sendKeys(“NSE”);
driver.quit()

Conventional Katalon Studio test case

WebUI.openBrowser(‘https://hello-angularjs.appspot.com/sorttablecolumn’)
WebUI.maximizeWindow()
WebUI.waitForPageLoad()
WebUI.sendKeys(findTestObject('Test Objects/angular_page_name'), “NSE”)
WebUI.closeBrowser()

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:


#4

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.


#5

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


#6

That would be of great help Alex… :hugs:

Could you please share the :wink: Custom Keywords


#7

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?