How to test hover actions on react components (in selenium/nightwatchjs)?

Asked Jun 06 '16 at 18:52

Active Dec 19 '16 at 13:03

Viewed 1,311 times

I have very simple react component and this component returns div:

return(< div className="item"
onClick={ this._onClick }
onMouseEnter={ this._onMouseEnter }
onMouseLeave={ this._onMouseLeave } >...< /div>);

(sorry for weird < and > formatting)

And I use selenium for testing (nightwatchjs framework), so when I write in my test

client.click(".item");

it works perfectly, I see that _onClick() method is called, but when I try to hover over the element and I write

client.moveToElement(".item");

client.moveToElement(".item", 1 ,1);

It doesn't work :( , _onMouseEnter() method isn't called.

So - how do you test any hover actions on react components?

asked Jun 06 '16 at 18:52

marcinpl87

Have you tried to add a delay before moving to the element to ensure that it's not a timing issue? – Florent B. Jun 06 '16 at 19:08
yes, I tried pause() before and after moveToElement() – marcinpl87 Jun 06 '16 at 19:13
Can you provide a reproducible example? – Florent B. Jun 06 '16 at 19:35
Could you use `client.mouseButtonUp(0);` and see if its working. – Naman Jun 06 '16 at 19:41
1

@nullpointer Thanks for a tip. In my case calling `client.mouseButtonDown(0)` before `client.moveToElement` helped. – daniula Apr 04 '17 at 21:24
@marcinpl87 did you figure out a solution for this issue? – Tri Nguyen May 19 '17 at 14:18
@daniula Me, too... seems like focusing on the element was necessary before the hover would work. – gap Mar 16 '21 at 17:56

0 Answers0