Angular, Katalon & ngWebDriver

[discover.selenium]

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

GitHub - paul-hammant/ngWebDriver: AngularJS and WebDriver bits and pieces...

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

[kazurayam]

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.

[kazurayam]

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

@discover.selenium

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

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.

[devalex88]

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

[focis.automation]

That would be of great help Alex…

Could you please share the Custom Keywords

[kazurayam]

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?

[discover.selenium]

@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

How to Highlight Test object in each and every step

Hi, I have created a keyword to highlight testobject. Please tell me how to call this keyword globally in such a way that it should highlight testobject of each step during test case execution public class HighlightElement { static WebDriver driver = DriverFactory.getWebDriver() @Keyword public static void HighlightObject(TestObject objectto) { try { WebElement element = WebUiCommonHelper.findWebElement(objectto, 20); for (int i = 0; i < 5; i++) { JavascriptExecutor js = (Javasc…

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 …

Angular Automatic Waiting like Protractor test

Hi Team, Request you to create plugin to support Angular Automatic Waiting like Protractor test. [Automatic%20Waiting]

[kazurayam]

@discover.selenium

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

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

[devalex88]

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

[kazurayam]

@devalex88

you can use @kazurayam’s approach

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
	}

[focis.automation]

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.

[suneelyadava]

Does byAngular.model is supported in angular 7 application ?

[srianoop.d]

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.

[kazurayam]

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.

[srianoop.d]

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.

[kazurayam]

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.

[srianoop.d]

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

[kazurayam]

@srianoop.d

once after restarting the Katalon

I thought so.

[srianoop.d]

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.

[kazurayam]

@srianoop.d

WebUI.click(findTestObject(‘CreatingTipoAndAddingFieldsInside/Address Embed Ref/div_Textclearfullscreen’))

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

The element is not clickable

@Curtis_BRODERICK Yea, the WebUI API can be troublesome at times (or I’m just using it incorrectly). Since the approach in my original comment seemed to work for you, we can just use that. It’s a bit more verbose, but not too bad. Go ahead and replace your Util class with this: package util import org.openqa.selenium.JavascriptExecutor import org.openqa.selenium.WebDriver import org.openqa.selenium.WebElement import com.kms.katalon.core.testobject.TestObject import com.kms.katalon.core.webui…