如何使用 Selenium Webdriver 訪問其 xpath 更改的 WebElement

Question

有一個名為 Dokkan Wiki 的網站，其中包含大量來自手機游戲的卡片，您可以單擊其中任何一張來查看其詳細信息，例如統計數據和藝術品圖像。 我想使用Selenium和ChromeDriver找到包含指向每張卡片藝術圖像的鏈接的<a>元素，並且我想為該網站上的每張卡片執行此操作。 但是，經過大量測試后，我注意到某些卡片在以下xpath -> //*[@id=\"mw-content-text\"]/div[3]/div[1]/div/div[1]/table[1]/tbody/tr/td/center/span/div/span/a"中有那個<a>元素//*[@id=\"mw-content-text\"]/div[3]/div[1]/div/div[1]/table[1]/tbody/tr/td/center/span/div/span/a"而其他一些卡，可能有它在不同的xpath像//*[@id=\"mw-content-text\"]/div[2]/div[1]/div/div/table[1]/tbody/tr/td/center/span/div/span/a"等等 我的問題是，有沒有辦法只使用一個全局xpath值或cssSelector來為網站上的每張卡找到<a>元素？ 我不知道如何處理這些路徑和選擇器從卡到卡的情況。 有什么建議么？

這是來自網站的相關 HTML 代碼，使用下面鏈接的示例卡：

 <div class="lefttablecard" style="float:left;"> <table style="margin: 0 auto; width: 100%; margin-left:0; margin-top: 12px; padding: 1px;background: #FFFFFF;border: 2px solid #cc0000;border-radius: 7px;-moz-border-radius: 7px;-webkit-border-radius: 7px; box-shadow:0 0 4px #cc0000;" border="2px solid black"> <tbody><tr> <td><center><span class="advanced-tooltip tooltips-init-complete"><div class="apng size250px" style="width:250px"><img src="https://vignette.wikia.nocookie.net/dbz-dokkanbattle/images/a/a0/Card_1015570_artwork_apng.png/revision/latest?cb=20190612094333&amp;format=original" alt="Card_1015570_artwork_apng.png" style="max-width:250px"><span><a href="/wiki/File:Card_1015570_artwork_apng.png" class="image image-thumbnail link-internal">

PS 這是該網站上的卡片 object 的示例： card 。 我試圖為每張卡片獲取的圖像是網站左中部分的圖像（大動畫矩形）。

Answer 1

我看了幾張卡片，看起來這個 CSS 選擇器對你有用。

div.lefttablecard table a

它將返回許多 A 標簽，但第一個是您想要的標簽，因此您可以使用

WebElement image = driver.findElement(By.cssSelector("div.lefttablecard table a"));

一般來說，我接近定位器的方式是找到我想要的元素，然后向上移動 DOM，直到找到唯一的東西，例如 ID、名稱、唯一的 class 名稱或其他一些唯一屬性。 然后我從那里開始並在瀏覽器開發工具中測試定位器，直到我得到一個可以工作的定位器。