fix(web): improve the reliability of the scroll-into-view method (#230)

The `scrollIntoView` method of the `WebComponent` class should not start to scroll until the page stops moving.

Author: clebert

@pageobject/web/src/WebComponent.ts

@@ -127,8 +127,29 @@ export abstract class WebComponent extends Component<WebNode, WebAdapter> {
   }
 
   public scrollIntoView(): Effect<void> {
-    return async () =>
-      (await this.findUniqueNode()).execute(element => {
+    const getRect = async () =>
+      (await this.findUniqueNode()).execute(element =>
+        element.getBoundingClientRect()
+      );
+
+    const isPageMoving = async (lastRect: ClientRect) => {
+      const currentRect = await getRect();
+
+      return (
+        currentRect.left !== lastRect.left || currentRect.top !== lastRect.top
+      );
+    };
+
+    return async () => {
+      let lastRect: ClientRect;
+
+      do {
+        lastRect = await getRect();
+
+        await new Promise<void>(resolve => setTimeout(resolve, 10));
+      } while (await isPageMoving(lastRect));
+
+      await (await this.findUniqueNode()).execute(element => {
         const {height, left, top, width} = element.getBoundingClientRect();
         const {innerHeight, innerWidth} = window;
 
@@ -137,5 +158,6 @@ export abstract class WebComponent extends Component<WebNode, WebAdapter> {
           top - innerHeight / 2 + height / 2
         );
       });
+    };
   }
 }

@pageobject/web/src/tests/WebComponent.test.ts

@@ -296,5 +296,67 @@ describe('WebComponent', () => {
       expect(scrollBy).toHaveBeenCalledTimes(1);
       expect(scrollBy).toHaveBeenLastCalledWith(-475, -275);
     });
+
+    it('should not start to scroll until the page stops moving vertically', async () => {
+      let top = 100;
+
+      element.getBoundingClientRect.mockImplementation(() => ({
+        height: 0,
+        left: 0,
+        top,
+        width: 0
+      }));
+
+      scrollBy.mockImplementation(() => {
+        if (top !== 0) {
+          throw new Error('page is moving');
+        }
+      });
+
+      const intervalId = setInterval(() => {
+        top -= 1;
+
+        if (top === 0) {
+          clearInterval(intervalId);
+        }
+      }, 1);
+
+      await component.scrollIntoView()();
+
+      expect(scrollBy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not start to scroll until the page stops moving horizontally', async () => {
+      let left = 100;
+
+      element.getBoundingClientRect.mockImplementation(() => ({
+        height: 0,
+        left,
+        top: 0,
+        width: 0
+      }));
+
+      scrollBy.mockImplementation(() => {
+        if (left !== 0) {
+          throw new Error('page is moving');
+        }
+      });
+
+      const intervalId = setInterval(() => {
+        left -= 1;
+
+        if (left === 0) {
+          clearInterval(intervalId);
+        }
+      }, 1);
+
+      await component.scrollIntoView()();
+
+      expect(scrollBy).toHaveBeenCalledTimes(1);
+
+      expect(element.getBoundingClientRect.mock.calls.length).toBeGreaterThan(
+        1
+      );
+    });
   });
 });