Angular, Katalon & ngWebDriver

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:

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.

2 Likes

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?

@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 …

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

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

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
	}

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.

Does byAngular.model is supported in angular 7 application ?

Hii @discover.selenium @kazurayam
I was not able to import the statements as they were throwing error in the katalon.

import com.paulhammant.ngwebdriver.ByAngular
import com.paulhammant.ngwebdriver.NgWebDriver

can anyone help me with this in how to use ngwebdriver angular thigs in the katalon testcases.
It will be helpfull if i use ngdriver.waitForAngularRequestsToFinish(); as the webpages which i use are of angular pages.
Thanks in advance.

The project README https://github.com/paul-hammant/ngWebDriver says you can download a jar from

https://search.maven.org/search?q=a:ngwebdriver

You should get it and locate the jar file in the <katalonProjectDir>/Drivers directory.

Hi @kazurayam
Thanks for the response.I have downloaded the jar and placed it inside the katalon project as told in the README but i was still not able to use it.
It is throwing error at the import statements itself

import com.paulhammant.ngwebdriver.ByAngular
import com.paulhammant.ngwebdriver.NgWebDriver

There are no such import statements in the katalon i guess so it is throwing errors.
Can you help me to overcome this issue.
Thanks in advance.

I also downloaded the jar and stored in the Drivers directory of a project, I stopped/restarted Katalon Studio, I made a following Test Case script

import com.paulhammant.ngwebdriver.NgWebDriver
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

def driver = new NgWebDriver()
WebUI.comment(driver.getClass().getName())

When I ran it I got the following log

2020-07-29 20:03:02.070 INFO  c.k.katalon.core.main.TestCaseExecutor   - --------------------
2020-07-29 20:03:02.074 INFO  c.k.katalon.core.main.TestCaseExecutor   - START Test Cases/TC2
2020-07-29 20:03:02.685 DEBUG testcase.TC2                             - 1: driver = new com.paulhammant.ngwebdriver.NgWebDriver()
2020-07-29 20:03:02.705 DEBUG testcase.TC2                             - 2: comment(getClass().getName())
2020-07-29 20:03:02.871 INFO  c.k.k.c.keyword.builtin.CommentKeyword   - com.paulhammant.ngwebdriver.NgWebDriver
2020-07-29 20:03:02.873 INFO  c.k.katalon.core.main.TestCaseExecutor   - END Test Cases/TC2

As you can see, it worked just fine.

I do not see what’s wrong with you.

Hi @kazurayam
It worked once after restarting the Katalon…Thanks for your help and time.

I thought so.

1 Like

Hi @kazurayam
I was using waitForAngularRequestsToFinish() in the test case and I was getting the script timeout exception when it comes to the waitForAngularRequestsToFinish step.

WebDriver driver1 = new ChromeDriver()
NgWebDriver ngWebDriver = new NgWebDriver(driver1);
WebUI.click(findTestObject(‘CreatingTipoAndAddingFieldsInside/Address Embed Ref/div_Textclearfullscreen’))
ngWebDriver.waitForAngularRequestsToFinish();

This is the code that is present in the script…The website is built upon angular.

can you help me with some walkaround if any…
Thanks in advance.

I just guess that WebUI.click() is not working.
WebUI.click() is sometimes faulty.
Why not you try clicking the element using JavaScript?

Thanks @kazurayam
i will try it using javascript