Angular testing

Hello, are you planning to extend Angular-specific keywords to help with Angular testing?

2 Likes

Marek Melocik said:

Hello, are you planning to extend Angular-specific keywords to help with Angular testing?

Hi Marek,

Thank you for using Katalon Studio. The team did plan to support Angular in the roadmap. However, I don’t have the exact ETA but I will share your request with the team.

Thank you for your feedback,
Liam

1 Like

Has there been any movement on this issue? Are there plans to include Angular 6 keywords to help test Angular based SPAs?

This issue is very important. It would be highly prioritized. I read various topics demanding it, and I’m facing problemas testing Angular 6 web pages too.

@Thiago Jorge Almeida dos Santos

What are the problems you have when testing Angular web app?

Trong Bui said:

@Thiago Jorge Almeida dos Santos

What are the problems you have when testing Angular web app?

Because of Angular allows a page to be loaded and then some components are updated asynchronously on the screen, it is difficult to do some checks and pick up information properly.

For example, I have a table that is loaded empty along with the web page and then a REST query is send to the server that returns the records from the table. The loading time of the table may vary. In this way, as the test runs quickly, my scripts that query the records in the table always return that the table is empty. I tried to use some “Wait For” keywords provided by Katalon (including “Wait For Angular Load”), but none worked.

The best contouring solution so far has been to insert delays, but we can list some disadvantages of this solution: it is not the most efficient solution, it can be difficult to maintain, and it does not guarantee with certainty that the table will be updated at the end of the delay.

I believe that the ideal one to solve the problem would be to exist a keyword that received the Test Object and to identify when a request made from this component (or any container it is inside) has already been answered; or that Verify Element keywords verify this.

This report in the forum, related to this problem, suggests a solution implemented for Selenium, may be a tip to integrate something similar in Katalon:

Hi Thiago

Because of Angular allows a page to be loaded and then some components
are updated asynchronously on the screen, it is difficult to do some
checks and pick up information properly.

This is not exclusive to how Angular operates. Any application developed using ASP.NET or node.js (not an exhaustive list - there are many) will behave the same way.

For example, I have a table that is loaded empty along with the web page
and then a REST query is send to the server that returns the records
from the table. The loading time of the table may vary. In this way, as
the test runs quickly, my scripts that query the records in the table
always return that the table is empty. I tried to use some “Wait For”
keywords provided by Katalon (including “Wait For Angular Load”), but
none worked.

Yep. Been there, got the scars to prove it. But again, this is not limited to Angular. The behavior you’re describing fits many asynchronous applications “in the field” (jQuery/Ajax, JavaScript async/await/fetch calls et al).

The best advice is to define clearly the conditions under which the application state changes once a given async call completes its processing. Write a wait condition for that. Between Katalon WebUI and native JavaScript you already have all the tools you need to do that successfully.

For example, let’s examine your “table” example more closely. Does the HTML contain an actual empty HTML table element? Does it look like this or similar:

<table id="data-table-thing"...></table>

In native JavaScript you can query that element and determine the number of rows (TR elements) present. If it’s zero, then the data has not yet loaded. Once it returns a number (say, 6) you know the data has arrived.

All of this can be achieved using current Katalon APIs along with a little JavaScript - no need for Katalon to add anything to support it. And it certainly does not matter if you’re using Angular or jQuery or React or Vue or any other flavor-of-the-year framework. All that stuff is a just distraction, not a pain point.

Let me say all that another way…

We’re supposed to be writing automated tests. What are we automating? We are automating a USER. A user will not try to interact with an empty table. A user will wait for the table to be populated.

Teach your test to behave like a user - make it WAIT for a change in application state, just like a user would.

2 Likes

Thanks @Russ Thomas! :slight_smile:

I happened to learn about Protractor, an end-to-end test framework on Node for Angular and AngularJS applications

I was interested in its concept of Angular specific locator. See

It would be nice if Katalon Studio add a TestObject with Selection method Angular specific locator. For example

TestObject to = new TestObject()
to.addProperty('angular-model', ConditionType.EQUALS, 'todoList.todoText')
def text = WebUI.getText(findTestObject(to))

Then we may say “Katalon Studio now supports Angular”. Don’t you think so?

1 Like

The following post describes testing Angular-based web app using ngWebDriver:

The mission is completed?

Any answer to this? Looks helpful!