如何使用Selenium Webdriver访问其xpath更改的WebElement

Question

有一个名为Dokkan Wiki的网站，其中包含大量来自手机游戏的卡片，您可以单击其中任何一个以查看它们的详细信息，例如统计数据和艺术品图像。我想使用Selenium&ChromeDriver找到包含指向每张卡片的艺术品图像链接的<a>元素，我想为该网站上的每张卡片执行此操作。但是，在进行了大量测试之后，我注意到某些卡在以下xpath中具有该<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">

附言下面是该网站上的卡片对象示例：card 。我试图为每张卡片获取的图像是网站左中部分的图像(大动画矩形)。

Answer 1

我看了几张卡片，看起来这个 CSS 选择器对你有用。

div.lefttablecard table a

它将返回许多 A 标签，但第一个是您想要的标签，因此您可以使用

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

通常，我处理定位器的方式是找到我想要的元素，然后向上移动 DOM，直到找到唯一的东西，例如 ID、名称、唯一类名或其他一些唯一属性。然后，我从那里开始，在浏览器开发工具中测试定位器，直到获得有效的定位器。