Forum Discussion

TinaZ's avatar
TinaZ
New Contributor
7 years ago

Issue using JQuery to access hyperlink in Angular grid

We are on TC Version 12.2 and I am trying to use JQuery to access a hyperlink (9936) in the cost center column within an Angular grid. I have found that all of the data in the grid (headers, all data lines, footer with page numbers) are contained in one object thus I am not able to search for data within the grid. Our development team indicated that we need to use JQuery to access the grid data per the following:

 

var link = $("a.costCenterLink").filter(function(){ return $(this).text().toLowerCase() === '9936';});

 

The variable “link” now contains the <a> element with a correct cost center link.

Then you can simulate browser click event by:

 

link.trigger(“click”);

 

When I tried the above two lines I received a JavaScript runtime error on the var link line:

ReferenceError

$ is not defined

 

So I added page.contentDocument.Script into that line per an example found in TC help and I was able to execute the code without error. However nothing happens in the test – the cursor does not try to select the cost center in the grid.

 

Here is the code:

 

//select item in grid

Log.Message("before var link line");

var link = page.contentDocument.Script.$("a.costCenterLink").filter(function(){ return $(this).text().toLowerCase() === '9936';});

Log.Message("before click");

Log.Message(link);

link.trigger("click");

Log.Message("after click");

 

Attached is what shows in the log, which is basically all of my comments.  But nothing happens in the actual script. 

 

Need some help understanding how to get this to work.

3 Replies

  • AlexKaras's avatar
    AlexKaras
    Champion Level 3

    Hi,

     

    First of all: as it was amazingly explained here (https://community.smartbear.com/t5/TestComplete-Functional-Web/TestComplete-9-3-Does-it-support-kendoUI/m-p/81168#M17730), the content of any web page is just html, regardless of what was used to generate this html. So you must be able to locate the given cell within the grid using TestComplete's Object Browser.

    Now the bad news. (By default?) neither most of modern libraries used in web development, nor developers themselves, bother to create a testable web pages. This means that with 99% probability neither the table itself, nor its cells will have assigned identifiers (id attributes with assigned stable values). In the worst case, your only option to search for the web page elements will be to search by their text.

    The best solution here is to talk to developers/management, describe the problem and ask for the stable IDs for the web page elements that are used in your tests. Though your success here depends exclusively on the project state and your communication skills. (Heh, once I was told a story that developers had to support UI tests for a week while QA was on sick leave. In two days a magic happened - most of web elements used in tests got their stable IDs...)

     

    As for what was told to you by developers.

    First, it illustrates 'developers way' of testing (which may be called 'unit testing' here) when you use code from within the tested page's code to interact with page elements by calling their methods. This significantly differs from UI testing approach (that is used in TestComplete) that assumes that the tool obtains elements that are accessible to the human end-user and interacts with them exactly like end-user does (i.e. via mouse and keyboard).

    Second, the code provided to you will not work because it is context-specific (note that it references current object 'this' and a call to local JQuery function with the 'a.costCenterLink' parameter and hardcoded '9936' value).

     

    I would suggest you to leave JQuery and unit testing to developers and use TestComplete's approach (as you are using this tool).

    https://support.smartbear.com/screencasts/testcomplete/ contains webinar recordings that I would recommend to watch (select those relevant to your experience with TestComplete and functional UI testing).

    http://support.smartbear.com/testcomplete/docs/app-testing/web/general/object-identification/index.html and http://support.smartbear.com/testcomplete/docs/testing-with/object-identification/index.html help sections may provide you with the useful information about objects identification in TestComplete.

    What you definitely must do is to investigate your tested web application using TestComplete's Object Browser and check if at least the core UI elements on the page have stable unique IDs assigned. If they are not, then for your own benefit you should talk to the management and told them that without stable IDs, UI tests will be slow and brittle. Outline, that above will also be correct if they suggest you to switch to, say, Selenium. Without stable IDs, Selenium tests will be slow and brittle as well.

    • TinaZ's avatar
      TinaZ
      New Contributor

      Thanks much Alex for taking the time to give such a detailed reply.  I've logged a ticket on this and my plan is, once we have the solution, to post it here.  The issue appears to be that the angular grid is on an iFrame inside two other iFrames on the page.  I think we would be able to use CSS Selector statements to get at these values if they were in the outside iFrame but we are having a challenge getting to the inner iFrame.  SmartBear support has offered to work through the problem with us and hopefully we'll be successful.  It isn't an option to change the design of the page to accommodate this, as we have multiple enterprise applications built in a similar way so I expect to encounter the issue elsewhere, although I haven't proven that yet because we are a new customer of TestComplete.  Thanks again for your help and suggestions.