Forum Discussion

wmtan01's avatar
wmtan01
Contributor
4 years ago
Solved

TestComplete having issues with ReactJS Applications

Hi,

 

Our application under test recently moved to using React JS library. We started noticing that the UI that we see during execution was not updating correctly. When events would happen that would trigger UI changes, the UI changes did not reflect onto the browser, it did in the back end but not on the visible layer. Everything works well when done manually but when our automation scripts are running the UI fails to catch up. This has started to cause issues such as the script failing to click object that have not "reflected" yet in the UI. 

 

I was wondering if there are other users out there that has experienced the same thing and if you have found a workaround. The only change the application has gone through was switching to the ReactJS library and as more and more components of the application has switched, the more areas we see the issue. If this continues we might have to stop using TestComplete entirely for this application.

 

I've attached a video, if you notice at the end the entire sub window collapses, that should have happened a few seconds ago from an action. This is what happens, after we stop the TestComplete execution and click on the browser all the delayed "actions/changes" would all happen and the UI adjusts itself to correction

web testing

3 Replies

Sort By
  • vinniew's avatar
    vinniew
    Icon for Staff rankStaff
    4 years ago

    Hi wmtan01 

     

    Hope you are well. 

     

    Il need to know more about your approach 

     

    What version of TestComplete are you using? 

     

    When you moved to using ReactJS did you create new UI automation tests or are you simply using older test cases? 

     

    KR

     

    Vinnie 

    • wmtan01's avatar
      wmtan01
      Contributor
      4 years ago

      Hi!

       

      We were using 14.7 when the company started shifting to react. At first wee did not care about the UI being "delayed" since they were not impacting the actions, but as more and more components got changed, and more and more pages were not updating the UI when being tested, it started breaking the functional flow itself. We have tried it as well in the latest version 15.X, tried running it different machines that has better specs and the results are the same, as long as it's a page that has shifted to reactJS, whenever dynamic page events would occur, the UI would not change.

       

      No, we did not change the flow but we did change all the identifiers to be able to point to the objects when the id's changed. We tried the same thing in selenium, and it worked there. :(. 

       

      We also have a dirty workaround but I feel like TestComplete should be able to handle it. Our workaround is as follow:

      We find an object in the page that is already visible/interactable that triggers a dynamic event, it seems like page interactions that trigger dynamic events would trigger UI refresh but dynamic event triggered by backend would not (i.e our app is a chat app, if the other end sends a message, the message would not appear in the UI unless I click a button on the page that causes a panel to be visible triggering a UI change)

      • vinniew's avatar
        vinniew
        Icon for Staff rankStaff
        4 years ago

        Hi wmtan01 

         

        I meant what happens if you record a new test,

         

        Does it also struggle to replay successfully?

         

        Either way it sounds strange however iv no doubt well get to the bottom of it. 

         

        If you haven't already I would suggest opening a support case 

        https://support.smartbear.com/testcomplete/message/

         

        Add as much information possible (attach log files this can help the team debug the issue sooner)

         

        If support solve the issue, kindly let us know what the cause was just for future reference  

         

        KR

        Vinnie