使用小技巧教你用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.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(')
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秒，豈不是帶薪摸魚?那需求能不能改成獲取當前滑鼠點選的元素呢?如果你實踐一下，你會發現，當你點選一個連結的時候，網頁自動就跳轉到另一個頁面去了，並不能獲取到你需要的資料。

原文來自：