一日一技：Selenium如何获取鼠标指向的元素？

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

公司主营业务：网站设计制作、网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出容县免费做网站回馈大家。

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

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

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

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

运行效果如下图所示：

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

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

function track_mouse(event){
 var x = event.clientX, y = event.clientY
 var 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.clientY
 var element = document.elementFromPoint(x, y)
  if (!element) {
      window.hovered_element = null
  return // 当前位置没有元素
 } 
  window.hovered_element = element
}
window.onmousemove = track_mouse

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

import time
from selenium.webdriver import Chrome

driver = Chrome('./chromedriver')
driver.get('https://www.kingname.info/')

js = '''
window.hovered_element = null
function track_mouse(event){
 var x = event.clientX, y = event.clientY
 var element = document.elementFromPoint(x, y)
  if (!element) {
      window.hovered_element = null
  return // 当前位置没有元素
 } 
  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如何获取鼠标指向的元素？
文章URL：http://www.csdahua.cn/qtweb/news41/291941.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网