Add some tests for shadow DOM element interaction

History.md

@@ -9,7 +9,7 @@ Release date: unreleased
 
 * [Beta] CSP nonces inserted into animation disabler additions - Issue #2542
 * Support `<base>` element in rack-test driver - ISsue #2544
-* [Beta] `Element#shadow_root` support. Requires selenium-webdriver 4.1+. Only currently supported with Chrome when using the selenium driver. Note: only CSS can be used to find elements inside the shadow dom so you won't be able to use most Capybara helper methods (`fill_in`, `click_link`, `find_field`, etc) since those locators are built using XPath.  Stick to `find(:css, ...)` and direct interaction methods.
+* [Beta] `Element#shadow_root` support. Requires selenium-webdriver 4.1+. Only currently supported with Chrome when using the selenium driver. Note: only CSS can be used to find elements from the shadow root. Therefore you won't be able to use most Capybara helper methods (`fill_in`, `click_link`, `find_field`, etc) directly from the shadow root since those locators are built using XPath. If you first locate a descendant from the shadow root using CSS then you should be able to use all the Capybara methods from there.
 
 ### Fixed
 

lib/capybara/spec/session/node_spec.rb

@@ -1197,6 +1197,25 @@ Capybara::SpecHelper.spec 'node' do
       nested_shadow_root = shadow_root.find(:css, '#nested_shadow_host').shadow_root
       expect(nested_shadow_root).to have_css('#nested_shadow_content', text: 'nested text')
     end
+
+    it 'should click on elements' do
+      @session.visit('/with_shadow')
+      shadow_root = @session.find(:css, '#shadow_host').shadow_root
+      checkbox = shadow_root.find(:css, 'input[type="checkbox"]')
+      expect(checkbox).not_to be_checked
+      checkbox.click
+      expect(checkbox).to be_checked
+    end
+
+    it 'should use convenience methods once moved to a descendant of the shadow root' do
+      @session.visit('/with_shadow')
+      shadow_root = @session.find(:css, '#shadow_host').shadow_root
+      descendant = shadow_root.find(:css, '#controls_wrapper')
+      expect do
+        descendant.check('shadow_checkbox')
+      end.not_to raise_error
+      expect(descendant).to have_checked_field('shadow_checkbox')
+    end
   end
 
   describe '#reload', requires: [:js] do

lib/capybara/spec/views/with_shadow.erb

@@ -15,9 +15,11 @@
               <span class="wrapper" id="shadow_content"><span class="info">some text</span></span>
               <div id="nested_shadow_host"></div>
               <a href="scroll.html">scroll.html</a>
-              <input type="text" />
-              <input type="checkbox" />
-              <input type="file" />
+	  		  <div id="controls_wrapper">
+                <input type="text" />
+                <input type="checkbox" id="shadow_checkbox" />
+                <input type="file" />
+	 		  </div>
             `;
 
       let nestedShadowRoot = shadowRoot.getElementById('nested_shadow_host').attachShadow({mode: 'open'});