Check element corners and middle for clickability

twalpole · barancev · commit f3dc828ef04e · 2016-01-26T19:08:17.000+03:00
Signed-off-by: Alexei Barantsev &lt;barancev@gmail.com&gt;
diff --git a/common/src/web/click_tests/overlapping_elements.html b/common/src/web/click_tests/overlapping_elements.html
@@ -5,17 +5,27 @@
   <style>
 #under {
   position: absolute;
-  top: 20;
-  left: 20;
+  top: 20px;
+  left: 20px;
   width: 100px;
   height: 100px;
   background-color: white;
 }
 
+#partially_under {
+  position: absolute;
+  top: 20px;
+  left: 10px;
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+  opacity: 0.5;
+}
+
 #over {
   position: absolute;
-  top: 20;
-  left: 20;
+  top: 20px;
+  left: 20px;
   width: 100px;
   height: 100px;
   background-color: red;
@@ -30,6 +40,7 @@
 </head>
 <body id="body">
   <div id="under"><p id="contents">Hello</p></div>
+  <div id="partially_under"><p id="other_contents">Hello</p></div>
   <div id="over"></div>
   <div id="log">
     <p>Log:<p>
diff --git a/javascript/firefox-driver/js/utils.js b/javascript/firefox-driver/js/utils.js
@@ -683,23 +683,65 @@ Utils.getClickablePoint = function(element) {
   element = element.wrappedJSObject ? element.wrappedJSObject : element;
   var rect = bot.dom.getClientRect(element);
 
-  if (element.getClientRects().length > 1) {
-    for (var i = 0; i < element.getClientRects().length; i++) {
-      var candidate = element.getClientRects()[i];
-      if (candidate.width != 0 && candidate.height != 0) {
-        return {
-          x: (candidate.left - rect.left + Math.floor(candidate.width / 2)),
-          y: (candidate.top - rect.top + Math.floor(candidate.height / 2))
-        };
+  var rects = goog.array.filter(element.getClientRects(), function(r) {
+    return r.width !=0 && r.height != 0;
+  });
+
+  if (rects.length > 0) {
+    for (var i = 0; i < rects.length; i++) {
+      var candidate = rects[i];
+      if (clickable_point = findClickablePoint(candidate)){
+        return clickable_point;
       }
     }
+    rect = rects[0];
   }
 
-  // Fallback to the main rect
-  return {
-    x: (rect.width ? Math.floor(rect.width / 2) : 0),
-    y: (rect.height ? Math.floor(rect.height / 2) : 0)
-  };
+  // Fallback to the main rect - expected to return a point so if no clickable point return middle
+  return findClickablePoint(rect) || { x: Math.floor(rect.width/2), y: Math.floor(rect.height/2) };
+
+  function findClickablePoint(rect){
+    var offsets = [
+      { x: Math.floor(rect.width/2), y: Math.floor(rect.height/2) },
+      { x: 0, y: 0 },
+      { x: rect.width, y: 0 },
+      { x: 0,  y: rect.height },
+      { x: rect.width, y: rect.height}
+    ]
+
+    return goog.array.find(offsets, function(offset){
+      return isClickableAt( { x: rect.left + offset.x, y: rect.top + offset.y } );
+    })
+  }
+
+  function isClickableAt(coord) {
+    // get the outermost ancestor of the element. This will be either the document
+    // or a shadow root.
+    var owner = element;
+    while (owner.parentNode) {
+      owner = owner.parentNode;
+    }
+
+    var elementAtPoint = owner.elementFromPoint(coord.x, coord.y);
+
+    // element may be huge, so coordinates are outside the viewport
+    if (elementAtPoint === null) {
+      return true;
+    }
+
+    if (element == elementAtPoint) {
+      return true;
+    }
+
+    // allow clicks to element descendants
+    var parentElemIter = elementAtPoint.parentNode;
+    while (parentElemIter) {
+      if (parentElemIter == element) {
+        return true;
+      }
+      parentElemIter = parentElemIter.parentNode;
+    }
+  }
 };
 
 
diff --git a/rb/spec/integration/selenium/webdriver/element_spec.rb b/rb/spec/integration/selenium/webdriver/element_spec.rb
@@ -40,6 +40,13 @@
     end
   end
 
+  compliant_on :browser => [:firefox] do
+    it "should not raise if element is only partially covered" do
+      driver.navigate.to url_for("click_tests/overlapping_elements.html")
+      expect { driver.find_element(:id, "other_contents").click }.not_to raise_error
+    end
+  end
+
   # Marionette BUG - AutomatedTester: "known bug with execute script"
   not_compliant_on :browser => :marionette do
     it "should submit" do
