Hover action fails for the element that became hidden on mouseover

[mkubrycz]

Are you requesting a feature or reporting a bug?

it's a bug

What is the current behavior?

In situation when I have an element with hover effect showing another element on top of it there are two different behaviours:

1. In case when I'm running with lower test speed than 1:

• hover action works but after actually hovering the element testcafe waits anyway the whole timeout for the hovered element to appear just to pass when timeout finishes
• last assertion isn't passing because "under" element appears to be visible when actually it's not

2. In case when I'm running at full speed (but not always):

• hover action is performed (mouse shows over the element) but after that I get the error that this element is not visible

What is the expected behavior?

this test should pass, and hover action shouldn't check for hovered element visibility after it's already hovered over because something could show up over it. Another thing is that hovered element sometimes is found visible when it's actually not, it shouldn't happen.

How would you reproduce the current behavior (if this is a bug)?

run code below

Provide the test code and the tested page URL (if applicable)

Tested page URL:

Test code

import { Selector } from 'testcafe';

fixture('hover')
.page('https://jsfiddle.net/s0mnL71L/');

const under = Selector('.under');
const over = Selector('.over');
const frame = Selector('[name="result"]');

test('succeed to hover', async (t) => {
  await t
    .expect(frame.visible).eql(true)
    .switchToIframe(frame)
    .expect(over.visible).eql(false)
    .expect(under.visible).eql(true)
    .hover(under)
    .expect(over.visible).eql(true)
    .expect(under.visible).eql(false);
});

Specify your

• operating system: macOS 10.12.6
• testcafe version: 0.17.0
• node.js version: 8.2.1

[AlexanderMoskovkin]

Hi @mkubrycz,

The visible option works in the following way:

• it's false in the following cases:
  -- display style is none;
  -- visibility style is hidden;
  -- element has a width or height that is equal zero.
• it's true in other cases.

For now there is no API to check whether an element overlapped by another element or not. We have a separated issue for that and discuss possible ways to resolve it: #1186 (comment)
It would be nice if you add your opinion there.

hover action works but after actually hovering the element testcafe waits anyway the whole timeout for the hovered element to appear just to pass when timeout finishes

I'll describe how does TestCafe work here. If an action target element is under some other element TestCafe waits for a timeout if it's became visible (it can't be some kind of animation or a big loading panel for example). If the element is not visible after a timeout TestCafe clicks on the point of the page where the element is located. We don't throw an error because of the following reason. For some cases it's ok when the target element is overlapped (for example it can be a floating transparent element that is located under the mouse cursor or it can be some placeholder). The current TestCafe behavior allows to handle these cases. If the target element is overlapped unexpectedly and you try to click on it the next action/assertion should be failed since the click doesn't perform expected behavior. For example, there is a button that shows a popup. In the test you click on the button and check that the popup is shown (or perform some action with the popup). If the button is overlapped the next step after button click will be failed.
If you'd like to click on an overlapped element you can set a timeout for it to 0.

With all this I've modified a test a it works stable and properly on my side:

import { Selector } from 'testcafe';

fixture('hover')
.page('https://jsfiddle.net/s0mnL71L/');

const under = Selector('.under', { timeout: 0 });
const over = Selector('.over');
const frame = Selector('[name="result"]');

let i = 10;

while(i--)
test('succeed to hover', async (t) => {
  await t
    .expect(frame.visible).eql(true)
    .switchToIframe(frame)
    .expect(over.visible).eql(false)
    .expect(under.visible).eql(true)
    .hover(under)
    .expect(over.visible).eql(true)
    .expect(under.visible).eql(true);
});

[mkubrycz]

Thank you @AlexanderMoskovkin for reply.
Since I've posted this issue I was still investigating, and it came to my attention that there's different behavior causing this. I thought the problem was that something is on top of my target element but it really was that my element from underneath is being hidden when the one on top is showing and this actually causes hover action to fail.

I've updated the fiddle: https://jsfiddle.net/s0mnL71L/1/

please run the same test code on this one
my problem is that testcafe is hovering over this element but since it disappears at the same moment it's failing to find it after performing an actual hover action.

[AlexanderMoskovkin]

@mkubrycz , I understand the problem now. It works properly in 0.16.2 but was broken in 0.17.0. I'll try to fix it in the 0.17.1

[lock]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.