Consider sticky header size when scrolling element into view

vividus-framework · Feb 13, 2024 · 25e4558 · 25e4558
1 parent 13bf7a5
commit 25e4558
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 11 deletions.
diff --git a/docs/modules/plugins/partials/plugin-web-app-steps.adoc b/docs/modules/plugins/partials/plugin-web-app-steps.adoc
@@ -133,7 +133,9 @@ When I scroll context to BOTTOM edge
 
 ==== Scroll element into view
 
-Scrolls an element into the view.
+Scrolls an element into the view with centred positioning.
+
+NOTE: If the element to scroll is located inside an https://developer.mozilla.org/en-US/docs/Web/CSS/overflow[overflow] container then native https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView[scrollIntoView] JS is used.
 
 [source,gherkin]
 ----

diff --git a/vividus-plugin-web-app/src/main/java/org/vividus/steps/ui/web/ScrollSteps.java b/vividus-plugin-web-app/src/main/java/org/vividus/steps/ui/web/ScrollSteps.java
@@ -1,5 +1,5 @@
 /*
- * Copyright 2019-2023 the original author or authors.
+ * Copyright 2019-2024 the original author or authors.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -62,17 +62,21 @@ public void scrollContextIn(ScrollDirection scrollDirection)
     }
 
     /**
-     * Scroll the element into view by calling API:
-     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView">Scroll into view</a>
-     * @param locator to locate an element
+     * Finds an element and scrolls it into view with centred positioning.
+     * <br>
+     * Please note that if the element to scroll is located inside an
+     * <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow">overflow</a> container then native JS
+     * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView">scrollIntoView</a> is used.
+     *
+     * @param locator The locator of the element to scroll into view
      */
     @When("I scroll element located by `$locator` into view")
     public void scrollIntoView(Locator locator)
     {
-        List<WebElement> toScroll = baseValidations.assertIfElementsExist("Element to scroll into view", locator);
-        if (!toScroll.isEmpty())
+        List<WebElement> scrollTargets = baseValidations.assertIfElementsExist("Element to scroll into view", locator);
+        if (!scrollTargets.isEmpty())
         {
-            javascriptActions.scrollIntoView(toScroll.get(0), true);
+            javascriptActions.scrollElementIntoViewportCenter(scrollTargets.get(0));
         }
     }
 

diff --git a/...b-app/src/main/resources/org/vividus/ui/web/action/scroll-element-into-viewport-center.js b/...b-app/src/main/resources/org/vividus/ui/web/action/scroll-element-into-viewport-center.js
@@ -5,6 +5,11 @@ let currentWindow = window;
 const stickyHeaderSize = arguments[1] / 100
 
 try {
+    if (isElementInsideOverflowContainer(elementToScroll)) {
+        elementToScroll.scrollIntoView(true);
+        exit(true);
+    }
+
     // Check, if we have an access to top level document
     window.top.document;
     while (currentWindow !== window.top) {
@@ -30,4 +35,16 @@ function clearTimeoutAndWait(event) {
     wait();
 }
 
+function isElementInsideOverflowContainer(element) {
+    let container = element.parentElement;
+    while (container) {
+        const style = window.getComputedStyle(container);
+        if (style.overflow !== 'visible' && (style.overflowX !== 'visible' || style.overflowY !== 'visible')) {
+            return true;
+        }
+        container = container.parentElement;
+    }
+    return false;
+}
+
 wait();
diff --git a/vividus-plugin-web-app/src/test/java/org/vividus/steps/ui/web/ScrollStepsTests.java b/vividus-plugin-web-app/src/test/java/org/vividus/steps/ui/web/ScrollStepsTests.java
@@ -1,5 +1,5 @@
 /*
- * Copyright 2019-2023 the original author or authors.
+ * Copyright 2019-2024 the original author or authors.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -126,14 +126,14 @@ void shouldThorowExceptionForScrollContextInRightDirectionWhenContextIsPage()
     }
 
     @Test
-    void shouldScrollElementIntoViewAlignedToATop()
+    void shouldScrollElementIntoView()
     {
         var webElement = mock(WebElement.class);
         var locator = mock(Locator.class);
         when(baseValidations.assertIfElementsExist(ELEMENT_TO_SCROLL_INTO_VIEW, locator)).thenReturn(
                 List.of(webElement));
         scrollSteps.scrollIntoView(locator);
-        verify(javascriptActions).scrollIntoView(webElement, true);
+        verify(javascriptActions).scrollElementIntoViewportCenter(webElement);
     }
 
     @Test