Forum Discussion

gshipp's avatar
gshipp
Occasional Contributor
3 years ago

Trying to create Automation for a react application

HI,

We are trying to create application using React, then create TestComplete test cases that can see the object ID’s. However we are having a problem with TC seeing our ID’s. What are we missing, or doing wrong here?

 

He is what we found on the support site.

 

 

Here is our code (it has two simple buttons that go back and forth). TC sees none of this. When I use I spy it only sees the whole window, not the one button or I am not able to use the mapping attributes. In another example we had, It identified the text via OCR.

 

When I do use the web spy to go over it, I get an error message that “The selected object is not a web element”

 

--------------------------------

<html>

<body id="Page 1">

    <h1 id="Header 1">Page 1</h1>

    <button id="PushMe1" onclick="location.href='Page2.html'">Go to Page 2</button>

</body>

</html>

 

--------------------------------

<html>

<body id="Page 2">

    <h1 id="Header 2">Page 2</h1>

    <button id="PushMe2" onclick="location.href='Page1.html'">Go to Page 1</button>

</body>

</html>

Object Recognition
Test Creation
web testing
  • ChrisAdams's avatar
    ChrisAdams
    Champion Level 3
    3 years ago

    Hi,

     

    I've never user TestComplete, but I have tested some React apps using Jest etc.

     

    React themselves suggest using an attribute called data-testid for testing with Jest.  E.g. 

    <button id="PushMe2" data-testid="PushMe2" onclick="location.href='Page1.html'">Go to Page 1</button>

     

    Not convinced it's your answer, but you never know.

  • Kitt's avatar
    Kitt
    Regular Contributor
    3 years ago

    Because you have 2 separate pages, TC may not know that it needs to set it's focus on another window to find the objects within. You can use the SetFocus method on a tested object (BrowserWindow or Window) to switch between pages before attempting to search for the object [TestComplete reference].

     

    You can also consider using NameMapping to find the object [Community reference]