improve "near" relative locator behaviour (#11290)

alpatron · diemol · web-flow · commit d10f8c225876 · 2023-06-02T21:05:52.000+02:00
* improve "near" relative locator behaviour Changes the behaviour of the "near" relative locator to use the distance between the two rectangles' boundaries for determining closeness. The relative_locators.html file is changed so that the center cell and cell number two's centers are far away but their boundaries are near each other. Fixes #11272 * Fix default distance in relative locator * Add Python tests * [java] Adding test in Java and setting default to 50px * [py] Fixing linter --------- Co-authored-by: Diego Molina <diemol@users.noreply.github.com> Co-authored-by: Diego Molina <diemol@gmail.com>
diff --git a/common/src/web/relative_locators.html b/common/src/web/relative_locators.html
@@ -10,6 +10,17 @@
     td {
       border: solid;
     }
+    .small-rectangle {
+      border: 1px solid black;
+      width: 100px;
+      height: 50px;
+      margin: 5px 25px;
+    }
+    .big-rectangle {
+      border: 1px solid black;
+      width: 150px;
+      height: 400px;                
+    }
   </style>
 </head>
 <body>
@@ -37,5 +48,19 @@ <h1>Relative Locator Tests</h1>
   </tr>
 </table>
 
+<div class="small-rectangle" id="rect1">
+  Rectangle 1
+</div>
+<div class="big-rectangle" id="rect2">
+  Rectangle 2, which is near Rectangle 1
+</div>
+
+<div class="small-rectangle" style="margin:60px 25px" id="rect3">
+  Rectangle 3
+</div>
+<div class="big-rectangle" id="rect4">
+  Rectangle 4, which is not near Rectangle 2 because it is more than 50 px away
+</div>
+
 </body>
 </html>
diff --git a/java/src/org/openqa/selenium/support/locators/RelativeLocator.java b/java/src/org/openqa/selenium/support/locators/RelativeLocator.java
@@ -69,7 +69,7 @@ public class RelativeLocator {
 
   private static final Json JSON = new Json();
 
-  private static final int CLOSE_IN_PIXELS = 100;
+  private static final int CLOSE_IN_PIXELS = 50;
 
   /** Start of a relative locator, finding elements by tag name. */
   public static RelativeBy with(By by) {
diff --git a/java/test/org/openqa/selenium/support/locators/RelativeLocatorTest.java b/java/test/org/openqa/selenium/support/locators/RelativeLocatorTest.java
@@ -18,6 +18,7 @@
 package org.openqa.selenium.support.locators;
 
 import static org.assertj.core.api.Assertions.assertThat;
+import static org.assertj.core.api.Assertions.assertThatExceptionOfType;
 import static org.openqa.selenium.By.cssSelector;
 import static org.openqa.selenium.By.tagName;
 import static org.openqa.selenium.By.xpath;
@@ -27,6 +28,7 @@
 import java.util.stream.Collectors;
 import org.junit.jupiter.api.Test;
 import org.openqa.selenium.By;
+import org.openqa.selenium.NoSuchElementException;
 import org.openqa.selenium.WebElement;
 import org.openqa.selenium.environment.webserver.Page;
 import org.openqa.selenium.testing.JupiterTestBase;
@@ -209,4 +211,26 @@ void ensureNoRepeatedElements() {
             cells.stream().map(e -> e.getAttribute("id")).collect(Collectors.joining(", ")))
         .isEqualTo(List.of(b, a));
   }
+
+  @Test
+  void nearLocatorShouldFindNearElements() {
+    driver.get(appServer.whereIs("relative_locators.html"));
+
+    WebElement rect1 = driver.findElement(By.id("rect1"));
+
+    WebElement rect2 = driver.findElement(with(By.id("rect2")).near(rect1));
+
+    assertThat(rect2.getAttribute("id")).isEqualTo("rect2");
+  }
+
+  @Test
+  void nearLocatorShouldNotFindFarElements() {
+    driver.get(appServer.whereIs("relative_locators.html"));
+
+    WebElement rect3 = driver.findElement(By.id("rect3"));
+
+    assertThatExceptionOfType(NoSuchElementException.class)
+        .isThrownBy(() -> driver.findElement(with(By.id("rect4")).near(rect3)))
+        .withMessageContaining("Cannot locate an element using");
+  }
 }
diff --git a/javascript/atoms/locators/relative.js b/javascript/atoms/locators/relative.js
@@ -22,6 +22,7 @@ goog.require('bot.dom');
 goog.require('bot.locators');
 goog.require('goog.array');
 goog.require('goog.dom');
+goog.require('goog.math.Rect');
 
 
 /**
@@ -149,7 +150,7 @@ bot.locators.relative.near_ = function (selector, opt_distance) {
   }
 
   if (!distance) {
-    distance = 100;
+    distance = 50;
   }
 
   /**
@@ -166,49 +167,9 @@ bot.locators.relative.near_ = function (selector, opt_distance) {
     var rect1 = bot.dom.getClientRect(element);
     var rect2 = bot.dom.getClientRect(compareTo);
 
-    // Ascii art time!
-    //
-    //    +---+
-    //    | 1 |
-    //    +---+     +---+
-    //              | 2 |
-    //              +---+
-    //
-    // As you can see, the right hand side of 1 is "left of" the left-most
-    // edge of 2. The top edge of 2 is at the same level as the bottom
-    // edge of 1. This means that 1 is "above" 2, and 2 is "below" one.
+    var rect1_bigger = new goog.math.Rect(rect1.left-distance,rect1.top-distance,rect1.width+distance*2,rect1.height+distance*2);
 
-    // Distance from left edge to right edge
-    var leftDistance = Math.abs(rect1.left - (rect2.left + rect2.width));
-
-    // Distance from right edge to left edge
-    var rightDistance = Math.abs((rect1.left + rect1.width) - rect2.left);
-
-    // Distance from top to bottom
-    var topDistance = Math.abs(rect1.top - (rect2.top + rect2.height));
-
-    // Distance from bottom to top
-    var bottomDistance = Math.abs((rect1.top + rect1.height) - rect2.top);
-
-    var horizontallyClose = leftDistance <= distance || rightDistance <= distance;
-    var verticallyClose = topDistance <= distance || bottomDistance <= distance;
-
-    if (horizontallyClose && verticallyClose) {
-      return true;
-    }
-
-    // Distance from centre points
-    var x1 = rect1.left + (rect1.width / 2);
-    var y1 = rect1.top + (rect1.height / 2);
-
-    var x2 = rect2.left + (rect2.width / 2);
-    var y2 = rect2.top + (rect2.height / 2);
-
-    var xDistance = Math.abs(x1 - x2);
-    var yDistance = Math.abs(y1 - y2);
-
-    var dist = Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));
-    return dist <= distance;
+    return rect1_bigger.intersects(rect2);
   };
 
   return func;
diff --git a/py/test/selenium/webdriver/support/relative_by_tests.py b/py/test/selenium/webdriver/support/relative_by_tests.py
@@ -87,3 +87,22 @@ def test_no_such_element_is_raised_rather_than_index_error(driver, pages):
         anchor = driver.find_element(By.ID, "second")
         driver.find_element(locate_with(By.ID, "nonexistentid").above(anchor))
     assert exc.value.msg == "Cannot locate relative element with: {'id': 'nonexistentid'}"
+
+
+def test_near_locator_should_find_near_elements(driver, pages):
+    pages.load("relative_locators.html")
+    rect1 = driver.find_element(By.ID, "rect1")
+
+    el = driver.find_element(locate_with(By.ID, "rect2").near(rect1))
+
+    assert el.get_attribute("id") == "rect2"
+
+
+def test_near_locator_should_not_find_far_elements(driver, pages):
+    pages.load("relative_locators.html")
+    rect3 = driver.find_element(By.ID, "rect3")
+
+    with pytest.raises(NoSuchElementException) as exc:
+        driver.find_element(locate_with(By.ID, "rect4").near(rect3))
+
+    assert exc.value.msg == "Cannot locate relative element with: {'id': 'rect4'}"
