7

I am using selenium to automation test browser application, I need a javascript api to get the browser current cursor style, not care where it is. Is there some API get the information link document.readstate

Li Yang
  • 91
  • 1
  • 1
  • 3
  • 1
    Possible duplicate of [detect cursor type](http://stackoverflow.com/questions/5304668/detect-cursor-type) – Robin Dorbell Aug 04 '16 at 08:40
  • @RobinDorbell I think this question it is not really a duplicate because OP ask (not care where it is) when instead question http://stackoverflow.com/questions/5304668/detect-cursor-type specifically check cursor input for a input tag and it uses selectionStart and selectionEnd, for my understanding question of OP is more generic and not limited to an input tag detection. – GibboK Aug 04 '16 at 09:18

2 Answers2

12

Since it may not have been defined inline, you need the computed style:

Note: A cursor change by pseudo class is not detected

document.addEventListener('click', e => {
  const tgt = e.target;
  const inline = tgt.style.cursor || "Not defined"
  const computed = window.getComputedStyle(tgt)["cursor"]
  console.log("Inline: ", inline, "Computed: ", computed)
});
.help {
  cursor: help
}

.pseudo::before {
  cursor: crosshair;
  background: #fff;
  content: "X";
}
<span style="cursor:pointer">Inline Pointer</span>
<hr>
<span class="help">CSS help</span>
<hr/>
<span class="pseudo"><<< Changed by pseudo class not detected</span>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • Say someone raise another similar question and @mplungjan answer to that. – Yves Ng Jul 17 '21 at 20:10
  • oh he answered [here](https://stackoverflow.com/questions/66722951/detecting-mouse-cursor-type-change-over-element?noredirect=1&lq=1) – Yves Ng Jul 18 '21 at 01:51
5

The following script detect and print out the cursor style browser on any element on your page.

document.addEventListener('mouseover',function(e){
    var cursor = e.target.style.cursor;
    console.log(cursor);
},false);
span.crosshair {
    cursor: crosshair;
}

span.help {
    cursor: help;
}

span.wait {
    cursor: wait;
}
<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:grab">grab</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
<span style="cursor:not-allowed">not-allowed</span><br>
<span style="cursor:no-drop">no-drop</span><br>
GibboK
  • 71,848
  • 143
  • 435
  • 658
  • 2
    This doesn't work if the current cursor is modified via `::before` & `::after` pseudoelements. – Qwerty May 18 '20 at 17:52