Recognizing PrimeNg Table Cells

[TikiHardBop]

We have an application that uses PrimeNg components, v14. The application has a lot of Table components. We are having issues with TestComplete not being able to recognize the individual cells within a table component. The Checkpoint Wizard seems to find them OK, and you can see them in the Object Browswer, but when it comes to running the tests, it cannot recognize the individual cells. We are new to TestComplete, so I am assuming that there are tricks to doing this that we are just not aware of.

So any suggestions on reliably recognizing cells within an Angular table component would be greatly appreciated.

And while I am posting, is there some kind of group just for folks using TestComplete with Angular. I bet there are lots of tips and tricks that we have yet to learn and it would be good to have a central place where we can ask specific questions about this topic.

[Marsha_R]

Here's the documentation about working with AngularUI controls. Hopefully this is what you are looking for.

I've never seen user groups split up that way, only by SmartBear product.  @Rache1 do you have any suggestions?

[Rache1]

Thanks @Marsha_R !

Hi @TikiHardBop ! There is not a Community group like that but I have reached out to our team if there is any other additional information that would be helpful. I'll let you know when I hear from them. Thanks!

[TikiHardBop]

I'm not sure I see a link to the documentation? Am I missing something? 

[Marsha_R]

Oops here!

https://support.smartbear.com/testcomplete/docs/general-info/supported-technologies/controls/angular...

[TikiHardBop]

Yes, I have seen that documentation page, and I did see that the table components aren't listed there. But since tables are such a huge part of most web pages, I would think that the folks who are using Test Complete with Angular tables would have developed a set of tips, secrets and strategies in order to test tables and their contents. Hence, my question about a specific User Group. 

[AlexKaras]

Hi,

> any suggestions on reliably recognizing cells within an Angular table

Unfortunately, Angular (like many other modern fancy frameworks) does not assume automated UI testing and thus (at least by default) does not provide unique and stable identifiers for its UI web elements. With no unique and stable web element identifiers provided, creation of fast, reliable and more or less readable test code is a kind of an art with implementation specific for any given tested application. So the only universal piece of advice that I can provide you with for Angular application is to examine it carefully in the Object Browser and try to figure out the ways of how to reliably identify web elements that you need to interact with in your test.

P.S. As Angular applications quite often have one or two root elements with IDs provided, I guess that in general it is possible to provide identifiers to web elements. What I don't know is why this is not done in the real projects. Either developers do not want to bother themselves with extra work or nobody just requires this until tests automation starts (and when it is too late).

[TikiHardBop]

I did find a way around this issue. I was able to add a unique tag to each cell component (e.g. id=<table>.<column>.<uniqueRowIdentifier>). Next I wrestled with getting the CheckPoint Wizard and the Name Mapping to use id as their primary selection criteria. (I never did find it. I noticed that the QuickCheckPoint feature does this, so I am just going to use this from now on.). And now my current issue is getting TestComplete to hover over a specific cell in the table and select a button that only becomes visible during a hover. All these things have probably already been solved by somebody else somewhere and it would save myself, and other newbies, enormous numbers of hours and frustration if there was a central repository of Angular/PrimeNg specific information like this, or a specific group of "power users" that we could ask. I already have a series of pretty extensive Confluence pages with what I've learned so far to help other users in my organization.  

Thanks for all the suggestions y'all have given so far, though! 

[AlexKaras]

Hi,

> my current issue is getting TestComplete to hover over a specific cell in the table

Have you tried the .HoverMouse() method? Does it work for you?

[TikiHardBop]

When you hover over the table cell, an icon becomes visible in that cell and you click that icon to do a delete. I'm doing a call to HoverMouse() on the cell, but the Click() call for the icon is returning a "Object not found" error, so I have to figure out if the hover isn't bringing up the icon which is why it isn't being found, or if the hover is working but TestComplete isn't finding the icon to call the click. I'm thinking that it takes the Object Manager some time to update with the new icon and that the Click() is being called before the Object Manager has found the new icon. Or I could be all wrong. This is all new to me!