Follow-ups to #328: popover visibility

CHANGELOG.md

@@ -1,4 +1,4 @@
-## [Unreleased](https://github.com/rubycdp/ferrum/compare/v0.18...main) ##
+## [Unreleased](https://github.com/rubycdp/cuprite/compare/v0.18...main) ##
 
 ### Added
 
@@ -8,6 +8,7 @@
 - `Driver#reset!` kept the page it had cached when the browser failed to reset, so every later example raised
   `Session with given id not found` or `Browser is dead or given window is closed` instead of starting on a fresh
   page [#274], [rubycdp/ferrum#641]
+- `Node#visible?` reported an open popover or modal dialog as hidden when an ancestor had `opacity: 0` [#328]
 
 ### Removed
 

lib/capybara/cuprite/javascripts/index.js

@@ -92,7 +92,7 @@ class Cuprite {
         // an ancestor's opacity no longer applies to it once shown.
         if (ancestorOpacityApplies) {
           try {
-            if (node.matches(":modal") || node.matches(":popover-open")) {
+            if (node.matches(":modal, :popover-open")) {
               ancestorOpacityApplies = false;
             }
           } catch (e) {}

spec/features/session_spec.rb

@@ -420,6 +420,16 @@
         expect(popover.visible?).to be true
       end
 
+      it "considers a child of a shown popover to be visible past opacity: 0" do
+        button = @session.find(:css, "#button_in_popover", visible: false)
+        expect(button.visible?).to be false
+
+        @session.execute_script("document.getElementById('popover_in_transparent').showPopover()")
+
+        expect(button.visible?).to be true
+        button.click
+      end
+
       it "considers a shown modal dialog to be visible past opacity: 0" do
         dialog = @session.find(:css, "#dialog_in_transparent", visible: false)
         expect(dialog.visible?).to be false

spec/support/views/visible.erb

@@ -16,7 +16,10 @@
       <span style="visibility: hidden">Hidden</span>
     </div>
     <section style="opacity: 0.0">
-      <div popover id="popover_in_transparent">Popover In Transparent</div>
+      <div popover id="popover_in_transparent">
+        Popover In Transparent
+        <button id="button_in_popover">Popover Item</button>
+      </div>
       <dialog id="dialog_in_transparent">Dialog In Transparent</dialog>
     </section>
     <section style="display: none">