CODEWITHSUNDEEP
javaselenium-webdriverxpathselenium-chromedriver
Stelios Papamichail
Stelios Papamichail

Reputation: 1268

How do i access a WebElement whose xpath changes using Selenium Webdriver

There is a website called Dokkan Wiki which has tons of cards from a mobile game and you can click one any one of them to see their details such as stats & artwork images. I want to find the <a> element that contains the link to each card's artwork image using Selenium & ChromeDriver and i want to do this for each card on that website. However, after doing a lot of testing i noticed that some of the cards, have that <a> element in the following xpath -> //*[@id=\"mw-content-text\"]/div[3]/div[1]/div/div[1]/table[1]/tbody/tr/td/center/span/div/span/a" while some other cards, may have it on a different xpath like //*[@id=\"mw-content-text\"]/div[2]/div[1]/div/div/table[1]/tbody/tr/td/center/span/div/span/a" etc. My question is, is there a way to find the <a> element for each card on the website using just one global xpath value or cssSelector? I don't quiet know how to handle this case where these paths and selectors change from card to card. Any suggestions?

Here's the relevant HTML code from the website using an example card linked below:

<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">

P.S. Here's an example of a card object on that website : card . The image i'm trying to get for each card is the one on the mid-left part of the website (big-animated rectangular one).

Upvotes: 0

Views: 394

Answers (1)

JeffC
JeffC

Reputation: 25531

I looked at a couple cards and it looks like this CSS selector will work for you.

div.lefttablecard table a

It will return a number of A tags but the first one is the one you want so you can use

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

Generally the way I approach locators is to find the element that I want and then move up the DOM until I find something unique, e.g. an ID, a name, a unique class name, or some other unique attribute. I then start there and test the locators in the browser dev tools until I get a locator that works.

Upvotes: 2

Related Questions