How to programmatically hover the item and click button in js

Question

Here is the demo link
Note: This demo is static in reality there will be dynamic list and button functionality.

On hover of item two buttons are showing.

Problem:
I want to programmatically hover each of the items and click on button using JS. This is a third party website UI demo and I want to handle it using my Chrome's console tab, if that's possible.

CSS:

.row .actions {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 44px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 8px 15px 8px 2px;
}

HTML:

<ul id="list">
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
</ul>

JQuery:

$("#list li").hover(
    function() {
        $(this).append('<button id="but1" onclick="button1()">Button1</button>' +
            '<button id="but2" onclick="button2()">Button2</button>');
    },
    function() {
        $('#but1').remove();
        $('#but2').remove();
    });
    
    function button1(){ console.log("button1") }
    
     function button2(){ console.log("button2") }

this might answer your question https://stackoverflow.com/questions/2228376/trigger-onmouseover-event-programmatically-in-javascript — Damzaky, Sep 23 '22 at 06:17
@JaromandaX it's worth saying that also in chrome, when you select an element through the dom inspector, you can use it in console as `$0` — Diego D, Sep 23 '22 at 06:25
@diegod did not know that - just realised, not going to help anyway - you can't "programatically" hover an element to get those buttons to show - so, I think the OP is out of luck — Jaromanda X, Sep 23 '22 at 06:26
you are partly right.. I mean there's not specifically the "hover" event so you can't dispatch it. The css counterpart `:hover`, as far as I read around, requires you to dispatch the mouseenter event to the element. It isn't that far from a solution after all. The `$0` strategy is something I found out not very long ago and was a big surprise to see. It's sad to say that js-wise I still think chrome is another planet. I force myself using firefox as much as I can but sometimes it's really a pain (for me) — Diego D, Sep 23 '22 at 06:33
If the site embeds jQuery, you should be able to use it on the console as well. `$('whatever-selects-the-element').trigger('mouseover')` should do the trick. — CBroe, Sep 23 '22 at 06:41
@CBroe after mouseover, whatever button it shows i want to click on it using js. Is it possible? — Parth Savadiya, Sep 23 '22 at 06:45
Sure, just select it within the context of the element you just "hovered." — CBroe, Sep 23 '22 at 06:47

score 1 · Accepted Answer · answered Sep 23 '22 at 07:22

I think this is what you are looking for:

$("#list li").hover(
  function() {
    $(this).append('<button id="but1" onclick="button1()">Button1</button>' +
      '<button id="but2" onclick="button2()">Button2</button>');
  },
  function() {
    $('#but1').remove();
    $('#but2').remove();
  });

function button1(item) {
  console.log("button1")
}

function button2(item) {
  console.log("button2")
}

async function autoHoverAndClick() {
  for await (item of Array.from($("#list li"))) {
    await new Promise((res) => {
      item.dispatchEvent(new Event('mouseover'));
      $('#but1').click();
      $('#but2').click();
      console.log("------------------")
      setTimeout(() => {
        item.dispatchEvent(new Event('mouseout'));
        res()
      }, 1500)
    })
  }

}

(async() => await autoHoverAndClick())()

.row .actions {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  height: 44px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 8px 15px 8px 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

How to programmatically hover the item and click button in js

1 Answers1