When I am testing a GUI, an element appears and disappears too quickly

I am testing the GUI using the tools of Webdriver.io and mocha. The tests themselves are written in CoffeeScript. Some interface elements are loaded for a long time, and a rotating loading indicator appears. In order to continue the testing process, it is necessary to wait for the data to be fully loaded (that is, to wait until the loading indicator disappears). This process was performed using function (1):

wait_for_page_load = () ->
  $('... load indicator selector ...').waitForDisplayed(20000)
  $('... load indicator selector ...').waitForDisplayed(20000, true)

In the first line, I expect the moment when the download indicator becomes visible. In the second term I expect the disappearance of the loading indicator.

However, in the process, I was faced with a situation in which the download indicator appears and disappears too quickly. At the same time, I simply do not have time to “catch” the loading indicator, because at that moment, when I expect it to appear, it already disappears. At the same time, an error message is displayed in the console:

element ("... load indicator selector ...") still not displayed after 20000ms

I found a way out of this situation. When a similar problem occurred, I fixed only the disappearance of the loading indicator. This process was performed using function (2):

wait_for_page_load = () ->
  $('... load indicator selector ...').waitForDisplayed(20000, true)

It should be noted that with the fast disappearance of the loading indicator, it is also impossible to do without waiting at all - in this case, new data will not have time to load.

However, in some situations, I cannot determine in advance exactly how long the loading indicator will be visible: sometimes it disappears almost immediately, and I cannot track the moment it appears, in these cases I have to use function (2); sometimes it rotates for a long time, and it is possible to track the moment of its appearance using the function (1).

Is it possible to write a universal function that will fix the appearance and disappearance of a graphic element, even if the element appears and disappears very quickly?

Solution

So far I have found the following way to solve the problem. In situations where it is necessary to wait for the loading indicator to disappear, I first time out one second, and then wait for the loading indicator to disappear.

utilities.wait_for_page_load = () ->
  browser.pause(1000)
  $('... селектор индикатора загрузки ...').waitForDisplayed(20000, true)

Thus, if the download indicator appeared and disappeared too quickly, then at the end of the timeout, it will no longer be on the screen, respectively, we automatically waited for the download indicator to disappear. If the download indicator hangs on the screen for a long time, then at the end of the timeout, we simply continue to wait for it to disappear.

The method is not ideal. Its main drawback is an increase in the total test run time. However, the method is universal and allows you to handle both situations described in the question.