Chrome擴展程序：以編程方式檢查元素和「複製xpath」或「複製css路徑」

Question

我想知道是否有可能以編程方式訪問元素，比如說我懸停在當前元素上，並執行相當於右鍵單擊它，去「檢查元素」，在元素選項卡中選擇它，右鍵單擊「copy xpath」或「copy css path」。

此外，我想知道是否有可能獲得相似元素的xpath或css路徑。說出本網站側面的所有鏈接，如何使chrome獲得代表類似問題下的鏈接組的xpath或css路徑表達式？

我的目的是編寫一個擴展，使我可以輕鬆地在頁面上抓取元素的xpath或css路徑，該路徑足夠準確，可以自動化Web應用程序進行測試。

Answer 1

一種可能性是使用

document.querySelectorAll(":hover"); 

將在由父母決定的順序返回元素的NodeList =>子=> ... =>最後一個孩子。因此，NodeList中的最後一個元素將是最「特定的」，並且它（大部分時間）可以通過向NodeList返回來構建指向該特定元素的css路徑。

對於第二個問題，你正在轉向極其困難的領域！一般來說，如果您試圖從未知的HTML頁面中提取信息，那麼在事先不知道頁面結構的情況下自動/以編程方式執行操作是不可行的。

如果您希望您的擴展程序僅從某些（少量）網站中提取路徑，那麼很棒......您可以（手動）查看網站是否具有良好結構化標記並將這些路徑硬編碼到您的代碼中。否則，對於任何一般的網站，尋找類似的路徑應作爲一個練習留給用戶（可能使用上面提到的hover方法:)）