detect if element to be acted on is actually on top/viewable

rubycdp · Nov 8, 2023 · 96d3248 · 96d3248
1 parent 3940696
commit 96d3248
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 4 deletions.
diff --git a/lib/capybara/cuprite/javascripts/index.js b/lib/capybara/cuprite/javascripts/index.js
@@ -344,10 +344,18 @@ 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) {
+      let topElement = window.elementFromPoint(x,y);
+      return topElement == node;
+    }
+
+    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>