Add initial support for shadow_root (#234)

Following capybara's support
teamcapybara/capybara#2546

Author: til

lib/capybara/cuprite/javascripts/index.js

@@ -52,13 +52,17 @@ class Cuprite {
     if (this.isVisible(node)) {
       if (node.nodeName == "TEXTAREA") {
         return node.textContent;
-      } else {
-        if (node instanceof SVGElement) {
-          return node.textContent;
-        } else {
-          return node.innerText;
-        }
       }
+      if (node instanceof SVGElement) {
+        return node.textContent;
+      }
+      if (node instanceof ShadowRoot) {
+        return Array.from(node.children)
+          .map(child => this.visibleText(child))
+          .filter(text => text)
+          .join(" ");
+      }
+      return node.innerText;
     }
   }
 
@@ -74,11 +78,15 @@ class Cuprite {
     }
 
     while (node) {
-      style = window.getComputedStyle(node);
-      if (style.display === "none" || style.visibility === "hidden" || parseFloat(style.opacity) === 0) {
-        return false;
+      if (node instanceof ShadowRoot) {
+        node = node.host;
+      } else {
+        style = window.getComputedStyle(node);
+        if (style.display === "none" || style.visibility === "hidden" || parseFloat(style.opacity) === 0) {
+          return false;
+        }
+        node = node.parentElement ?? (node.getRootNode() instanceof ShadowRoot && node.getRootNode());
       }
-      node = node.parentElement;
     }
 
     return true;
@@ -94,6 +102,10 @@ class Cuprite {
   }
 
   path(node) {
+    if (node.getRootNode && node.getRootNode() instanceof ShadowRoot) {
+      return "(: Shadow DOM element - no XPath :)";
+    };
+
     let nodes = [node];
     let parent = node.parentNode;
     while (parent !== document && parent !== null) {
@@ -306,7 +318,7 @@ class Cuprite {
     x -= frameOffset.left;
     y -= frameOffset.top;
 
-    let element = document.elementFromPoint(x, y);
+    let element = node.getRootNode().elementFromPoint(x, y);
 
     let el = element;
     while (el) {

lib/capybara/cuprite/node.rb

@@ -229,6 +229,13 @@ def obscured?
         command(:obscured?)
       end
 
+      def shadow_root
+        root = driver.evaluate_script <<~JS, self
+          arguments[0].shadowRoot
+        JS
+        root && self.class.new(driver, root.node)
+      end
+
       def inspect
         %(#<#{self.class} @node=#{@node.inspect}>)
       end

spec/features/session_spec.rb

@@ -446,6 +446,24 @@
       end
     end
 
+    describe "Node#shadow_root" do
+      it "produces error messages when failing" do
+        @session.visit("/with_shadow")
+        shadow_root = @session.find(:css, "#shadow_host").shadow_root
+        expect do
+          expect(shadow_root).to have_css("#shadow_content", text: "Not in the document")
+        end.to raise_error(/tag="#document-fragment"/)
+      end
+
+      it "extends visibility check across shadow host boundary" do
+        @session.visit("/with_shadow")
+        shadow_root = @session.find(:css, "#shadow_host").shadow_root
+        expect(shadow_root).to have_css("a")
+        @session.execute_script %(document.getElementById("shadow_host").style.display = "none")
+        expect(shadow_root).to_not have_css("a")
+      end
+    end
+
     it "has no trouble clicking elements when the size of a document changes" do
       @session.visit("/cuprite/long_page")
       @session.find(:css, "#penultimate").click

spec/spec_helper.rb

@@ -59,8 +59,8 @@ module TestSessions
       node #visible? details non-summary descendants should be non-visible
       node #visible? works when details is toggled open and closed
       node #path reports when element in shadow dom
-      node #shadow_root
       node #set should submit single text input forms if ended with
+      node #shadow_root should produce error messages when failing
       #fill_in should fill in a color field
       #fill_in should handle carriage returns with line feeds in a textarea correctly
       #fill_in should fill in a textarea in a reasonable time by default