Inline, zero-dimension element: erroneous visibility determination #6183
Comments
|
I have confirmed this is a bug in 3.8.2. The
<html>
<body>
<p>
<span onmouseover="window.hover.style.display='block'" onmouseout="window.hover.style.display='none'">
<label style="display: block">Hover me!</label>
</span>
</p>
<p id="hover" style="display: none">
Hovering!
</p>
</body>
</html>
it("should work", () => {
cy.visit("index.html")
cy.get("span").trigger("mouseover")
}) |
cypress-bot
bot
added
the
stage: ready for work
jennifer-shehane
added
type: bug
topic: visibility 👁
stage: ready for work
|
This is still reproducible in Cypress 4.9.0. |
|
The simplest solution is to add But the problem is that it becomes harder to determine the visibility when Below is the case. <html>
<body>
<p>
<span id="target" onmouseover="window.hover.style.display='block'" onmouseout="window.hover.style.display='none'" style="display:block;width:0">
<label>Hover me!</label>
</span>
</p>
<p id="hover" style="display: none">
Hovering!
</p>
</body>
</html> |
cypress-bot
bot
added
stage: work in progress
stage: needs review
|
I am not fully convinced that we should actually fix this issue. See the following recommendation from W3: https://www.w3.org/TR/2009/CR-CSS2-20090908/visuren.html#anonymous-block-level
This description makes it appear as if the block box should not be considered to be part of the inline box. Therefore, the inline element is correctly being reported as not visible. In addition, since the span takes up no space in the DOM, it's impossible that a user can actually interact with it. What you're really looking to emulate here is the user hovering over the label, and then the
|
|
Oof, yah, I get the technicalities of this not technically being able to take action, but the actionability portion of this is not very intuitive to someone just trying to test their app. I think the original example is really counterintuitive to workaround as is (without this fix). You set the event handler literally on that span DOM element - then trigger that on that DOM element. It's hard to expect the user to drive down to whatever DOM elements are nested inside when they know they want the mouseover to trigger on that span in the end. All they know is - "I physically mouse over this in my app and the onmouseover is triggered". The visibility check is also a bit weird since what exactly about this span is visible? So, I kind of get that maybe not passing....... |
|
@jennifer-shehane I feel like it makes most sense that Cypress acts just as a user would act in the browser. The user cannot hover over the span in the DOM, even though the HTML makes it appear that a user would be able to. If the user can't interact, Cypress shouldn't be able to either even if its regarding a technicality in the DOM structure. Note, this is all regarding how Chromium renders. I do think that we should implement this fix. Firefox actually will wrap the span around the label in this case, which causes the spec in this issue to work just fine. For sake of reducing flake between browsers and such, I think we should implement the fix for consistency reasons. |
cypress-bot
bot
added
stage: pending release
and removed
stage: needs review
|
The code for this is done in cypress-io/cypress#8130, but has yet to be released. |
|
Released in This comment thread has been locked. If you are still experiencing this issue after upgrading to |
Current behavior:
This example illustrates an element with
offsetWidthandoffsetHeightof zero, but is still interactable in actuality.For reference, Firefox does not report these values to be zero, which might be of interest in regards to expanding browser support (ie. maybe not good to rely on it as it's not consistent across).
Desired behavior:
For the element not to be reported as invisible.
Test code to reproduce
https://github.com/badeball/cypress-reproducible-issues/tree/master/zero-dimension-hover
Versions
Cypress v3.8.2, Arch Linux, Chrome 79.
The text was updated successfully, but these errors were encountered: