detect if element to be acted on is actually on top/viewable (#251)

ryanong · web-flow · commit aa5b70c82341 · 2023-11-10T13:43:40.000+05:00
diff --git a/lib/capybara/cuprite/javascripts/index.js b/lib/capybara/cuprite/javascripts/index.js
@@ -84,7 +84,6 @@ class Cuprite {
     return true;
   }
 
-
   isDisabled(node) {
     let xpath = "parent::optgroup[@disabled] | \
                  ancestor::select[@disabled] | \
@@ -344,10 +343,24 @@ class Cuprite {
 
   _isInViewport(node) {
     let rect = node.getBoundingClientRect();
-    return rect.top >= 0 &&
-           rect.left >= 0 &&
-           rect.bottom <= window.innerHeight &&
-           rect.right <= window.innerWidth;
+
+    let inViewport =  rect.top >= 0 &&
+                      rect.left >= 0 &&
+                      rect.bottom <= window.innerHeight &&
+                      rect.right <= window.innerWidth;
+
+    if (inViewport) {
+      // check if obscured by another element
+      let x = rect.width/2;
+      let y = rect.height/2 ;
+
+      let px = rect.left + x,
+          py = rect.top + y,
+          e = document.elementFromPoint(px, py);
+      return node == e;
+    }
+
+    return false;
   }
 
   select(node, value) {
diff --git a/spec/features/driver_spec.rb b/spec/features/driver_spec.rb
@@ -514,6 +514,12 @@ def create_screenshot(file, *args)
         expect(@driver.body).to include("x: 100, y: 150")
       end
 
+      it "supports clicking overlayed elements" do
+        @session.visit("/cuprite/click_overlay")
+        @session.click_link "hidden link"
+        expect(@driver.body).to include("hidden-link")
+      end
+
       it "supports executing multiple lines of javascript" do
         @driver.execute_script <<-JS
           var a = 1
diff --git a/spec/support/views/click_overlay.erb b/spec/support/views/click_overlay.erb
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style type="text/css">
+    body {
+      width: 800px;
+      margin: 0;
+    }
+    #hidden-link {
+      position: relative;
+      top: 740px;
+    }
+    #wrapper {
+      height: 1200px;
+    }
+    #footer {
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      background-color: red;
+      color: white;
+      text-align: center;
+      height: 100px;
+    }
+  </style>
+  <script type="text/javascript">
+  window.onload = function() {
+    var log = document.querySelector("#log")
+    var boxes = document.querySelectorAll("#hidden-link")
+    for (var i = 0; i < boxes.length; i++) {
+      var el = boxes[i]
+      el.onclick = function() {
+        log.textContent = this.id
+      }
+    }
+  }
+  </script>
+</head>
+<body>
+  <div id="log"></div>
+  <div id="wrapper">
+    <a id="hidden-link" href="#">hidden link</a>
+  </div>
+  <div id="footer"></div>
+</body>
+</html>
