How to simulate mouseenter event in Selenium or Javascript?

Question

I've been working on a web UI automation task with Selenium, Javascript and SeLion. I would like to take a screenshot of some equivalent scenario as Google homepage below:

In which the "Search by voice" should be present when mouse moves in that microphone icon (neither Click or Hover). I have search bunch of solutions, unfortunately non of them works as expected.

I'm basically dealing with something like this:

<div id="div_id">
  <button type="button" class="button_class" disabled="" data-marko=" . 
    {"onclick":"handleClick s0-2-0-27-0 
    false&quot;,"onkeydown":"handleKeydown s0-2-0-27-0 false"}" 
    title="This message shows by mouseenter event" aria-label="This 
    message shows by mouseenter event">
      <span class="span_class"></span>
  </button>
</div>

When mouse enters that button, "This message shows by mouseenter event" will be present. The page is likely written by Marko-js. Couldn't really handle it with plain Javascript, I tried.

Any idea?

Thanks in advance!

Can you provide a working exaple in JsFiddle or other platforms ? — Mosè Raguzzini, Sep 14 '18 at 12:15

score 0 · Answer 1 · answered Sep 14 '18 at 10:45

In which the "Search by voice" should be present when mouse moves in that microphone icon (neither Click or Hover)

if u read this link : https://www.w3.org/TR/DOM-Level-3-Events/#trusted-events , it says that only user agent events can trigger "search by voice" . its cant be done by scripts

score 0 · Answer 2 · answered Sep 14 '18 at 10:47

I provided you a simple working example, give me a feedback if it is suitable for your needs.

function simulateMouseEnter() {
  var event = new MouseEvent('mouseenter', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  var myTarget = document.getElementById('target_div'); 
  var canceled = !myTarget.dispatchEvent(event);
  if (canceled) {
    // A handler called preventDefault.
    alert("canceled");
  } else {
    // None of the handlers called preventDefault.
    alert("not canceled");
  }
}

function mouseEnterBehaviour() {
    myElement = document.getElementById("target_div");
     // attach mouseenter event listener to element
    myElement.addEventListener("mouseenter", function(event) {
        // change the color of the font
        event.target.style.color = "red";
    });  
    // call the simulation
    setTimeout(simulateMouseEnter,3000);
}

mouseEnterBehaviour();

<div id="target_div">target div</div>

Note: this should work with the most of the browser events

Thanks for your effort. This code works perfectly but not in my scenario. I've added some details in my question, please take a look. Thanks — Almett, Sep 14 '18 at 11:36

How to simulate mouseenter event in Selenium or Javascript?

2 Answers2