使用小技巧教你用Selenium获取鼠标指向的元素

有一个同学在Gne的群里面咨询如何通过Selenium获取当前鼠标指向的元素，在我讲了方法以后，他过了两天又来问：

那么，我今天就来写一篇文章，具体说说应该怎么操作。

这个方法的核心，是借助JavaScript的事件(event)来获取鼠标所在的元素。然后再把这个元素传递给Selenium。我们先来第一步，不考虑Selenium，只使用JavaScript，如何获取当前鼠标指向的元素呢?

我们首先需要知道在JavaScript中的一个事件句柄，叫做window.onmousemove。默认情况下，它的值是null：

我们可以把它的值修改成一个函数，这个函数接收一个event参数，这样当鼠标在网页上移动的时候，这个函数就会被调用。而event参数是一个对象，这个对象有两个属性.clientX和.clientY，分别表示鼠标相当于网页的横坐标和纵坐标：

function track_mouse(event){var x = event.clientX, y = event.clientYconsole.log('当前鼠标所在位置的坐标：x=' +  x + 'y=' + y)
}

运行效果如下图所示：

你执行命令以后，只要在页面上移动鼠标，你就会在控制台看到大量的坐标被打印出来。

接下来，既然你有了当前鼠标所在位置的坐标，那么你只需要根据坐标查询到这个元素是什么就可以了。在JavaScript中，有一个函数叫做document.elementFromPoint，就能实现这个效果：

function track_mouse(event){var x = event.clientX, y = event.clientYvar element = document.elementFromPoint(x, y)if (!element) {return // 当前位置没有元素} return element
}

那么，如何把这个参数返回给Selenium呢?其实也非常简单，我们设置一个全局变量window.hovered_element，然后把当前鼠标对应的元素赋值给它。然后在Selenium中，使用.execute_script获取window.hovered_element就可以了。

我们先来看看完整的JavaScript：

window.hovered_element = null
function track_mouse(event){var x = event.clientX, y = event.clientYvar element = document.elementFromPoint(x, y)if (!element) {window.hovered_element = nullreturn // 当前位置没有元素} window.hovered_element = element
}
window.onmousemove = track_mouse

然后我们再来看看Selenium中的Python代码：

import time
from selenium.webdriver import Chromedriver = Chrome('./chromedriver')
driver.get('https://www.kingname.info/')js = '''
window.hovered_element = null
function track_mouse(event){var x = event.clientX, y = event.clientYvar element = document.elementFromPoint(x, y)if (!element) {window.hovered_element = nullreturn // 当前位置没有元素} window.hovered_element = element
}
window.onmousemove = track_mouse
'''driver.execute_script(js)
while True:element = driver.execute_script('return window.hovered_element')if element:print(f'当前鼠标所在的标签为：{element.tag_name}, 其中的文本内容为：{element.text}')time.sleep(1)

运行效果如下图所示：

获取到了当前鼠标所在的元素的标签和标签里面的文字。

到这里，这个同学需要的功能已经完全实现了。

但可能有聪明的同学会发现，他这个需求是有问题的。我们能看到至少有三个问题：

因为window.onmousemove太灵敏了，它的采样时间是毫秒级别的，鼠标稍稍移动一点点就会生成一个事件。但是，一个元素的区域是很大的，在一个元素内部移动鼠标，其实根本没有必要更新window.hovered_element。
在Selenium里面，是通过while True每1秒查询一次window.hovered_element，虽然我们已经降低了频率，但大家从上面的图中可以看到，还是会获取到很多重复的数据。这是由于有一些元素非常大，我们鼠标如果在上面慢慢移动，时间会超过1秒，那么Selenium就会重复获取到数据。
由于window.onmousemove的采样时间间隔很小，所以我们可以近似把鼠标的移动看做是连续的移动。因此，这段代码会记录鼠标轨迹路径上面的每一个元素。但实际上，我们并不会对网页上所有的内容都感兴趣，我们只会对特定的内容感兴趣。因此，获取当前鼠标所在位置的元素，其实是一个伪需求，它根本没有什么实际上用处，因为噪声太大了，无用的数据太多了!
实际上，我觉得真正的需求应该是这样的：如果鼠标在网页上面某个元素停留时间超过5秒，那么获取这个元素。

但这样做太费时间了。每次都要等5秒，岂不是带薪摸鱼?那需求能不能改成获取当前鼠标点击的元素呢?如果你实践一下，你会发现，当你点击一个链接的时候，网页自动就跳转到另一个页面去了，并不能获取到你需要的数据。

使用小技巧教你用Selenium获取鼠标指向的元素相关推荐

怎么修改服务器上的分数,教资成绩查询服务器爆了？这里有个小技巧教你！
原标题:教资成绩查询服务器爆了?这里有个小技巧教你! 由于查询人数太多,服务器可能很卡,但我们可以采取另一种方法查到成绩,仔细看仔细学:我们不去查询成绩的页面,我们打开报名页面,点面试报名,可能会看到 ...
5个小技巧教你在家里如何给花儿拍“写真”
5个小技巧教你在家里如何给花儿拍"写真" 植物园和花展为热衷于花卉拍摄的摄影师们提供了大量拍摄机会,但为什么不自己买一些别致的花儿,直接在家里尝试拍摄带有更多现代感的照片呢? 专 ...
20个小技巧教你设计惊艳的三折页［…
即使是一个简单的三折页,你也能大有可为.20个小技巧教,数十个精彩案例与你分享.本文来自站酷(文章版权:DATS设计翻译组翻译,如需商业用途或转载请与 DATS设计翻译组联系,谢谢配合!)翻译:达尔 ...
js获取鼠标所在html元素的id和属性
js获取鼠标所在html元素的id和属性: Code: <div onclick="Get_srcElement()"> <div id="001&qu ...
每日小技巧——教你用一行Python代码去除照片背景
哈喽~大家好,我是恰恰!欢迎来到周一的每日小技巧,今天来教大家如何使用Python去除照片背景,说到去除照片背景的方法,可能不会Python的小伙伴首先想到的是美图秀秀,或者使用photoshop,也 ...
后端开发—10个小技巧教你保证线程安全
前言对于从事后端开发的同学来说,线程安全问题是我们每天都需要考虑的问题. 线程安全问题通俗的讲:主要是在多线程的环境下,不同线程同时读和写公共资源(临界资源),导致的数据异常问题. 比如:变量a=0 ...
抖音占内存怎么办？不会玩抖音的16个小技巧教你怎么使用拍视频、怎么截取音乐片段
0.上传本地视频.拍照视频尽管这个问题很简单,但是依然有很多抖友提出这个问题,一同这也是许多后面技巧的基础,这第0条小技巧,就献给那群依然在菜鸟区漫游的抖友们吧.咱们不只能够运用抖音技巧拍照视频然后 ...
5个实用小技巧教你写出让用户欲罢不能的标题
进入手机时代后,人们随时随地都可以获取海量内容,消费者的时间和注意力早已被撕扯成一块块碎片. 要想赢得他们的关注,文案就必须在这些细小的碎片中生长.一则亮眼的标题,在提升点击率进而提升转化率方面. 想 ...
太实用了！你的视频播放量低？5个小技巧教你快速提升播放量
最近一直有人在问大周,为什么自己发布的视频播放量只有一点点呢?几十几百甚至更低. 为了帮大家解决这些问题,大周给你们分享几点小技巧,让你们快速提高播放量没有成为大周粉丝的赶紧点个关注,以免想找我时候找 ...

使用小技巧教你用Selenium获取鼠标指向的元素

使用小技巧教你用Selenium获取鼠标指向的元素相关推荐

最新文章

热门文章