0

Syncronization is a common problem with UI automation and nearly all modern web designs that do a lot of client side rendering or AJAX work. With JQuery I was able to watch the .active property (number of active requests), and if it went to 0 and stayed there a little while, it was usually a safe bet the page was finished updating.

Is there something similar with React that can be used to tell that there are no open AJAX calls, or that the code has finished updating page elements (or 'patching' the virtual DOM to the page DOM)? Or some other way to tell that the page is in a state where automation simulating user actions can interact with it without fear of the page updating and getting errors such as 'element not found'.

Chuck van der Linden
  • 6,660
  • 2
  • 28
  • 43
  • this may not be the correct way, but it works for nearly all kinds of pages, when you design a page, you should know at what point the page is ready. That is the time for you to set a global js flag or even a hidden input to indicate that the page is ready. then have your UI automation tool to check for that flag. else you will need to write extensive checks in your ui automation test. – Ji_in_coding Mar 17 '16 at 16:54
  • getting help like that from the programmers would be ideal. But in larger orgs, larger projects with more than one team, getting the programmers to adopt and hold to something like that can be a tall order. So I'm presuming I'll have to come up with something test side that does not depend on a 'ready' flag in the code. – Chuck van der Linden Mar 17 '16 at 17:03
  • I have written selenium tests for angular apps. the common strategies I use are: 1. timed sleep (no promises on this one since db query may vary in time). 2. loops with short sleeps to iteratively check if a certain element contains the data/attr/styling I am expecting, this check applies to most 90% of ajax affected elements. If you want to check if certain animation is playing, i would recommend to first check for src, then take multiple screenshots over a period of time, and perform byte comparison. – Ji_in_coding Mar 17 '16 at 17:18
  • yeah I've done all those sorts of things. but was hoping I might be able to find a more generic method that is native to react (similar to `jQuery.active`) – Chuck van der Linden Mar 17 '16 at 17:25

0 Answers0