How can you replicate a mouseover event using Selenium or JavaScript?

Question

How can you replicate a mouseover event using Selenium or JavaScript?

I have recently been working on a task involving web UI automation using Selenium, Javascript and SeLion. My goal is to capture a screenshot of a scenario similar to the Google homepage, specifically focusing on the "Search by voice" feature when hovering over the microphone icon. Despite my efforts in researching for solutions, none have yielded the desired outcome.

The structure I am dealing with looks 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>

Upon hovering over the button, "

This message shows by mouseenter event

" should appear. The page seems to be built using Marko-js, which has posed challenges for me in achieving this function using plain Javascript.

If anyone has any insight or ideas to offer, it would be greatly appreciated!

Thank you in advance!

javascript selenium ui-automation marko

Answer 1

Answer №1

How can "Search by voice" feature be activated when the mouse hovers over the microphone icon instead of requiring a click or hover?

Upon reviewing this resource: https://www.w3.org/TR/DOM-Level-3-Events/#trusted-events, it is stated that only user agent events have the capability to trigger the "search by voice" function, and cannot be achieved through scripts.

Answer 2

How can "Search by voice" feature be activated when the mouse hovers over the microphone icon instead of requiring a click or hover?

Upon reviewing this resource: https://www.w3.org/TR/DOM-Level-3-Events/#trusted-events, it is stated that only user agent events have the capability to trigger the "search by voice" function, and cannot be achieved through scripts.

Answer 3

Answer №2

Here is a practical example I have provided for you to test. Please let me know if it meets your requirements.

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 code snippet should be compatible with various browser events.

Answer 4

Here is a practical example I have provided for you to test. Please let me know if it meets your requirements.

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 code snippet should be compatible with various browser events.

How can you replicate a mouseover event using Selenium or JavaScript?

Answer №1

Answer №2

Similar questions

Is there a way to enable text selection on a jQuery draggable div?

Instructions for utilizing a non-string reference without triggering flow errors

I am unable to determine if I have already selected a List Item

ReactJS: The function .useSelector() is not defined

TinyMCE generates HTML code with embedded tags

Troubleshooting MongoDB aggregate lookup failure when using multiple parameters

What is the best way to locate a particular JSON key value pair through JavaScript?

Ways to customize the appearance of a react-chartist component

What is the best way to retrieve the ID of the list item that has been clicked during a button event?

An issue occurred while attempting to execute a function in AngularJS

The placeholder text in the matInput field is not being displayed

How can I toggle the visibility of a div based on whether a variable is defined or not?

Display data fetched from concurrent Ajax calls in a React Component

angular-chart custom tooltip positioning issue

What is the process for including a scope in an Angular.js HTTP controller?

Enhance each category changing with jQuery page transitions

Angular 2 Error: Unresolved Promise rejection - Unable to assign value to reference or variable

Tips for positioning text on the left and right sides of a div in HTML styling

Scroll horizontally through the number field in Chrome

Maintain the tab order for elements even when they are hidden