Как получить доступ к WebElement, xpath которого изменяется с помощью Selenium Webdriver

Question

Есть веб-сайт под названием Dokkan Wiki, на котором есть тонны карточек из мобильной игры, и вы можете нажать на любую из них, чтобы увидеть их данные, такие как статистика и изображения. Я хочу найти элемент <a>, который содержит ссылку на изображение каждой карты, используя 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", в то время как некоторые другие карты могут иметь его на другом xpath, как //*[@id=\"mw-content-text\"]/div[2]/div[1]/div/div/table[1]/tbody/tr/td/center/span/div/span/a" и т. д. У меня вопрос, есть ли способ найти элемент <a> для каждой карты на сайте, используя только одно глобальное значение xpath или cssSelector? Я не знаю, как справиться с этим случаем, когда эти пути и селекторы меняются от карты к карте. Любые предложения?

Вот соответствующий 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 Вот пример объекта карты на этом веб-сайте: карта . Изображение, которое я пытаюсь получить для каждой карты, - это изображение в средней левой части веб-сайта (прямоугольное изображение с большой анимацией).

Answer 1

Я посмотрел на пару карт, и похоже, что этот селектор CSS будет работать для вас.

div.lefttablecard table a

Он вернет количество тегов A, но первый - тот, который вы хотите, чтобы вы моглииспользуйте

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

Обычно я подхожу к локаторам, чтобы найти нужный элемент, а затем перемещаюсь вверх по DOM, пока не найду что-то уникальное, например, идентификатор, имя, уникальное имя класса или другоедругой уникальный атрибут. Затем я начинаю там и проверяю локаторы в инструментах разработчика браузера, пока не получу локатор, который работает.