Forum Discussion

RLRE's avatar
RLRE
Occasional Contributor
2 years ago

Web Testing running javascript code from page: can not access to members

Hello!
I am testing a web app in Edge. When I start the web app by myself in Edge, open the developer tools with F12 and go to the console, there I can call a member called 'allShapes'. The result is an array of shape objects that the application displays, containing additional information I need to check in my tests.
Following the instructions in https://support.smartbear.com/testcomplete/docs/app-testing/web/common-tasks/javascript.html#HowTo, I tried the following:

 

var shapes0 = pageObj.contentDocument.Script.allShapes;
var shapes1 = pageObj.contentDocument.Script.eval("allShapes;");
var shapes2 = pageObj.contentDocument.Script.$get("allShapes");
var shapes3 = pageObj.contentDocument.Script.eval("window.allShapes;");
var shapes4 = pageObj.contentDocument.Script.window.allShapes;
var shapes5 = pageObj.contentDocument.Script.window.$get("allShapes");

 

Unfortunately, all the shapes* variables are undefined.
When I look in the debugger, the contentDocument and Script objects are defined, however, allShapes and other members and methods I see in Edge's console are not visible.
What can be the reason for this? What am I doing wrong?

Thank you very much for your time!

PS: Using TestComplete 15.31.374.7. The application in question is written with Angular.

Debugging
Script Extensions
Script Tests
web testing
  • rraghvani's avatar
    rraghvani
    Champion Level 3
    2 years ago

    I'm not familar with Angular, but while looking at the examples shown here https://www.w3schools.com/angular/angular_application.asp, and https://www.w3schools.com/angular/tryit.asp?filename=try_ng_app3. It seems like it's not possible to get the data of $scope.products, as this is contained within the angular module. I even tried in Chrome Dev Tools.

     

    What if you try 

    pageObj.contentDocument.Script.

    followed by the module name and then the function or variable name?

    • RLRE's avatar
      RLRE
      Occasional Contributor
      2 years ago

      Hello rraghvani,
      thank you very much for your effort.

      Unfortunatelly, the modules defined i.e. loaded in the app have names that are not allowed as identifier in javascript, i.e. something like main.308a3c81de0bcf749. Using eval with double quotes fails too. Here my trys:

       

       

      var mainMod00 = pageObj.contentDocument.Script.eval("main.308a3c81de0bcf749");
var mainMod01 = pageObj.contentDocument.Script.eval("'main.308a3c81de0bcf749'");
var mainMod10 = pageObj.contentDocument.Script.eval("eval('main.308a3c81de0bcf749')");
var mainMod11 = pageObj.contentDocument.Script.eval("eval(main.308a3c81de0bcf749)");

       

       

      All the mainMod* vars are undefined (no allShapes at undefined). 

      Really weird things, like the following:

       

      // Try to load it directly: 
pageObj.contentDocument.Script.eval("import { mymod } from 'main.308a3c81de0bcf749';");// ?!?
var shapesReloaded0 = pageObj.contentDocument.Script.mymod.allShapes; 

var mainmod = pageObj.contentDocument.Script.eval("await import('main.308a3c81de0bcf749');");
var shapesReloaded1 = mainmod.allShapes;

       

      unfortunately do not work either.

      Any other ideas?

      Thank you very much.

  • rraghvani's avatar
    rraghvani
    Champion Level 3
    2 years ago

    If you have a public method which returns an array of your objects, then you should be able to access it via your code. You won't be able to access private methods or members.

     

    Dev Tools is able to access the objects, because the interpreter translates the entire source code, and you'll have access to public, private methods and members.

     

    If I come across a better Angular exmaple, then I'll try again. 

     

    • RLRE's avatar
      RLRE
      Occasional Contributor
      2 years ago

      rraghvani thank you for your suggestions.

      I just had a session with our development and tried a few things afterwards:

      The allShapes object is attached to the window object of the page. I.e. something like windows.allShapes should be possible. In the Edge console I see a method getShapeById("someID"), which can be called directly or with windows.getShapeById("someID") and returns a result. I.e. both the call windows.allShapes and windows.getShapeById("someID") should work. However, I can't get the "right" window object in TestComplete.

      The following object is defined:

        var theWindow = pageObj.contentDocument.Script.Window; 
  // pageObj.contentDocument.window returns the me same object as with capital letter

      However, following fails (both of them)

        var shape21P = theWindow.getShapeById("21P");
  var allShapes = theWindow.allShapes;

      because unknown method or member respectivelly .  

      The page is definitely written with Angular.

      There are no protected members or methods (neither of the window object nor of other things).
      Any idea how I could access the window object from TestComplete?

      Thank you very much!