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??
Angular testing
Is there a way to run test scripts written in Angular and node JS ( UI and API) in Katalon studio
Wait for Ready State during AJAX calls
Can use Katalon studio for angularjs Web application testing?
When can we expect support for multilevel of nested Shadow DOM
#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?


#8

@kazurayam

Hi Kaz …Is there a way to call a custom keyword in each and every step, like what you created for Highlight Test object in each and every step

The below keyword should execute for each and every step

@Keyword
public staic void waitAllRequest() {
// waitUntilJSReady ();
// ajaxComplete();
// etc …etc
// waitForPageload();
// waitUntilAngularReady();
}

If this is achievable … then it would be close to Automatic waiting like protactor test. Thanks …


#9

Sorry, I can not tell anything without running code in my hand.


#10

Most keywords work with Test Objects. I think you can use @kazurayam’s approach with findTestObject method.


#11

This probablly refers to isToBeTraced() method in https://github.com/kazurayam/HighlightingElementByTestObjectInEachAndEveryStep/blob/Drunda_Nibel/Keywords/com/kazurayam/ksbackyard/HighlightElement.groovy,

private static final boolean isToBeTraced(String keywordName, Object args) {
		Class clazz = args.getClass()
		if (clazz.isArray()) {
			Object[] objects = (Object[])args
			if (objects.length > 0) {
				return (args[0] instanceof TestObject)
			} else
				return false
		} else
			return false
	}

#12

Hi @kazurayam @devalex88, Could you pleasssseeeee … explain how to achieve this…

I want to check the below conditions for all the steps in a testcase i.e.

WebUI.waitForPageLoad(300, FailureHandling.OPTIONAL)
WebUI.waitForJQueryLoad(300, FailureHandling.OPTIONAL)
CustomKeywords.‘util.Util.waitUntilJQueryReady’()
CustomKeywords.‘util.Util.waitUntilAngularReady’()

It would be great if you could explain how to achieve it with a sample github project.

your help in this regard is highly appreciated.


#13

Does byAngular.model is supported in angular 7 application ?