Fix: wait for element to be stable fails on infinite animations (#2711)

packages/taiko/lib/actions/pageActionChecks.js

@@ -79,15 +79,18 @@ const checkStable = async (elem) => {
   function waitForElementToBeStable() {
     let elem = this;
     return new Promise((resolve, reject) => {
-      setTimeout(() => reject(false), 10000);
+      setTimeout(
+        () => reject(new Error("Element is not stable: still moving after 10000ms")),
+        10000,
+      );
       let previousRect;
       let currentRect;
       function isInSamePosition(previousRect, currentRect) {
         const topDiff = Math.abs(previousRect.top - currentRect.top);
         const leftDiff = Math.abs(previousRect.left - currentRect.left);
         const bottomDiff = Math.abs(previousRect.bottom - currentRect.bottom);
         const rightDiff = Math.abs(previousRect.right - currentRect.right);
-        return topDiff + leftDiff + bottomDiff + rightDiff;
+        return topDiff + leftDiff + bottomDiff + rightDiff === 0;
       }
       (function step() {
         if (elem.nodeType === Node.TEXT_NODE) {
@@ -101,14 +104,14 @@ const checkStable = async (elem) => {
         if (previousRect === undefined) {
           previousRect = currentRect;
           window.requestAnimationFrame(step);
+          return;
         }
 
-        const positionalDiff = isInSamePosition(previousRect, currentRect);
-        if (positionalDiff) {
+        if (isInSamePosition(previousRect, currentRect)) {
+          resolve(true);
+        } else {
           previousRect = currentRect;
           window.requestAnimationFrame(step);
-        } else {
-          resolve(true);
         }
       })();
     });
@@ -123,6 +126,14 @@ const checkStable = async (elem) => {
       awaitPromise: true,
     },
   );
+  if (res.exceptionDetails) {
+    const exceptionDetails = res.exceptionDetails;
+    const message =
+      exceptionDetails.exception && exceptionDetails.exception.description
+        ? exceptionDetails.exception.description
+        : exceptionDetails.text || "Element is not stable";
+    throw new Error(message);
+  }
   return res.result.value;
 };
 

tests/unit-tests/actions/pageActionChecks.test.js

@@ -214,4 +214,35 @@ describe("pageActionChecks", () => {
       expect(result.name).to.equal("notActionable1");
     });
   });
-});
+  describe("checkStable", () => {
+    afterEach(() => {
+      pageActionChecks = rewire("taiko/lib/actions/pageActionChecks");
+    });
+    it("should return true when element is stable", async () => {
+      pageActionChecks.__set__("runtimeHandler", {
+        runtimeCallFunctionOn: () => ({
+          result: { value: true },
+        }),
+      });
+      const elem = { get: () => 1 };
+      const result = await pageActionChecks.__get__("checkStable")(elem);
+      expect(result).to.be.true;
+    });
+    it("should throw when element keeps moving and never becomes stable", async () => {
+      pageActionChecks.__set__("runtimeHandler", {
+        runtimeCallFunctionOn: () => ({
+          exceptionDetails: {
+            exception: {
+              description:
+                "Error: Element is not stable: still moving after 10000ms",
+            },
+          },
+        }),
+      });
+      const elem = { get: () => 1 };
+      await expect(
+        pageActionChecks.__get__("checkStable")(elem),
+      ).to.be.rejectedWith("Element is not stable: still moving after 10000ms");
+    });
+  });
+});