Improve UI when el not actionable by distinctly displaying stale elements vs hidden elements

[brian-mann]

The visibility algorithm correctly identifies detached elements as "hidden".

But when determining and providing the reason its hidden, we get an error message about the effective width and height being 0.

Since detached elements do not actually displace any content, this is technically correct, but miscommunicates the reason why.

We should provide a better error message in this circumstance and also add a new UI icon for detached elements (as opposed to just hidden).

Here's an example.

In this situation I've caused the element to be removed after the cy.get() but during the .click()

This test should correctly fail but the error message sends me down the wrong path.

Here's a suggestion where instead of displaying the invisibility icon, we add a new icon and tooltip to indicate that this element has become detached.

[brian-mann]

Another idea here is to either add a mutation observer, or just override removeChild so we could detect the very instant a DOM element is detached so we could immediately fail a chain of commands, since there is no way to recover.

[tnrich]

@brian-mann is there a way to tell a chain of commands to re-run? Such that if the element is removed after a .get() but before a .click() we could have cypress re-run both the .get() and the .click() ?

Thanks!

[jennifer-shehane]

This has already been delivered - we correctly error that the element has been detached from the DOM instead of showing the 0x0 error.