Taiko Animation Detection before Click

[RobinMuenstermann]

Is your feature request related to a problem? Please describe.
Taiko clicks on elements, which are still animating. Because of an animation the element can move, which leads to wrong clicks, depending on the execution speed and the speed between getting the position of an element and the actual click. This leads to flakiness of tests/instable tests.

I created a project, which demonstrates the flakiness of Taiko on animated elements: https://github.com/RobinMuenstermann/taiko_animation

---

Describe the solution you'd like

Taiko gets an "animation_detection_timeout" environment variable.
Before a click starts, the following is done:

1. The element's position is computed
2. Taiko waits for "animation_detection_timeout"
3. Computes the element's position again. If the position is changed, then Taiko repeats this loop until a maximum timeout is reached (e.g., one second).

If "animation_detection_timeout" is 0, then this functionality is disabled, which could be useful for websites without animation.

(In the future an animation detection would be nice for all kind of actions, but I experienced most problems with clicks.)

---

Describe alternatives you've considered
Implementing a manual wait before any animation as I did in the problem demonstration project https://github.com/RobinMuenstermann/taiko_animation -> This leads to bad tests, because you lose the focus of the actual functionality, which you want to test.

Implementing the presented solution in the project itself, but the solution should be a part of Taiko.

[saikrishna321]

Thanks for reporting. Will take a look.

Currently taiko waits for the element to be stable before performing the click. Let me see the project which you have shared.

[RobinMuenstermann]

Thank you for having a look. I implemented a first idea, how an animation could be detected in the "waitForAnimation" function in https://github.com/RobinMuenstermann/taiko_animation/blob/master/tests/steps.js

[saikrishna321]

@RobinMuenstermann I tried it a couple of times and was unable to reproduce it at my end. I did take a look at your code on the waitForAnimation and taiko is already doing it https://github.com/getgauge/taiko/blob/master/lib/actions/pageActionChecks.js#L71-L107

[RobinMuenstermann]

Unfortunately, I cannot reproduce the instability in a deterministic manner right now, but I tried to increase the probability that the problem occurs. Therefore, I added the following spec: https://github.com/RobinMuenstermann/taiko_animation/blob/master/specs/animation-fails-repeated.spec
Can you execute "npm run test-repeated-fails" and "npm run test-repeated-fails-headless" without any errors?

The Taiko implementation seems to wait only for one frame. Maybe more than one frame is needed in some cases?

[Tockra]

I've the same issue in my project. I'm happy I found this issue which seems to be related with my problem.
After I run npm run test-repeated-fails I got the following error:

> gauge run -v specs/animation-fails-repeated.spec

# Repeated of animation-fails
  ## Open and close dialog repeated
      * Open "https://element-plus.org/en-US/component/drawer.html" website	 ...[PASS]
      * User opens dialog and closes it
          * When user clicks "with footer"	 ...[PASS]
          * When user clicks "Option 1"	 ...[PASS]
          * When user clicks "confirm"	 ...[FAIL]

            Failed Step: When user clicks "confirm"
            Specification: specs/animation-fails-repeated.spec
            Error Message: Error: Timed out
            Stacktrace:
            Error: Timed out
                at Timeout.<anonymous> (/Users/my-user/.gauge/plugins/js/2.3.17/src/test.js:44:23)
                at listOnTimeout (node:internal/timers:559:17)
                at processTimers (node:internal/timers:502:7)
  ## With wait success
      * Open "https://element-plus.org/en-US/component/drawer.html" website	 ...[FAIL]

        Failed Step: Open "https://element-plus.org/en-US/component/drawer.html" website
        Specification: specs/animation-fails-repeated.spec:2
        Error Message: Error: Timed out
        Stacktrace:
        Error: Timed out
            at Timeout.<anonymous> (/Users/my-user/.gauge/plugins/js/2.3.17/src/test.js:44:23)
            at listOnTimeout (node:internal/timers:559:17)
            at processTimers (node:internal/timers:502:7)

Successfully generated html-report to => /Users/my-user/taiko_animation/reports/html-report/index.html

Specifications:	1 executed	0 passed	1 failed	0 skipped
Scenarios:	2 executed	0 passed	2 failed	0 skipped

Total time taken: 27.974s
Updates are available. Run `gauge update -c` for more info.

[Tockra]

I think the problem is on taiko site or does we use taiko the wrong way?
Can somebody help or give this issue the correct tags?