How to locate an tag within a webpage usin

Question

I want to locate the image tag in a webpage. The application contains a VIEW ICON. While inspecting the view icon, it is coded as image tag. I am not sure how to locate that particular tag.

Below is the image tag I want to locate:

<svg width="1em" height="1em" class="user-dropdown-icon" viewBox="0 0 14 8">
<image data-name="Vector Smart Object copy 3" width="14" height="8" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAAx0lEQVQYlY2Pv2oCAQyHP//s9waZfIF7j+PG3nbDFQfB7ufaxV3c3BxcFaRduzj5GL/Z5Tr0j1AoKZGeoGggEJLvI0mnqqoDsDCzCXeEpCkw7AJroJb0fEsLpnanl6bpKzAAxk3TfCdJsrsiueDiCnjsmtkPUAIbYCrp6YLkPT/RmdIdP5WQC2ALzCSNWpLXs5gVwdI/AWZ2lOTyCzCX9B6jOfAGPDhz4v82tuRPIAP8z2Wk15mZfbXZMzHkDyAH9pF59P4D+AX710oK5f6gzQAAAABJRU5ErkJggg=="></image>
</svg>

I tried with the below xpath:

xpath="(//*[@class='user-view-icon'])[11]")

But it did not work out

I want to locate the view icon

Answer 1

Can you please execute the code below and let me know what you get. System.out.println(driver.findElements(By.tagName(“image”)).size());

if you still get null pointer exception , there is something wrong with your driver object . This code should return 0 if no image tag found on page , else the number of image tags on that page

Depending on the number of image tags , you can decide on the index of image tag you want to click , and then execute click on that element

Answer 2

Try this:

Selenium - Java

/*get element by tag name*/
WebElement image = driver.findElement(By.tagName("image")); 

If there are more than one image on the page , use

/*get all elements by tag name*/
List<WebElement> images = driver.findElements(By.tagName("image")); 

from the list above determine which one do you want to use(tip : use a foreach loop to iterate)

Answer 3

You image doesn't have the "user-view-icon" CSS class assigned and XPath doesn't work.

you could do:

WebElement image = driver.findElement(By.cssSelector("svg.user-dropdown-icon > image"));

Answer 4

<image>

The <image> SVG element includes images inside SVG documents. It can display raster image files or other SVG files.

The only image formats SVG software must support are JPEG, PNG and other SVG files. Animated GIF behavior is undefined.

SVG files displayed with <image> are treated as an image: external resources aren't loaded, :visited styles aren't applied, and they cannot be interactive. To include dynamic SVG elements, try <use> with an external URL. To include SVG files and run scripts inside them, try <object> inside of <foreignObject>.

Note: The HTML spec defines as a synonym for while parsing HTML. This specific element and its behavior only apply inside SVG documents or inline SVG.

---

This usecase

As the <image> element is a SVG element so to locate such elements you have to explicitly specify the SVG namespace when accessing the elements using xpath as follows:

• For <svg> elements:

  //*[name()="svg"]
  

• For <g> elements:

  //*[name()="svg"]/*[name()="g"]
  

• For <image> elements:

  //*[name()="svg"]/*[name()="image"]
  

---

References

You can find a couple of relevant detailed discussions in:

• How to access to 'rect' type element through Selenium-Python
• How to click on SVG elements using XPath and Selenium WebDriver through Java
• Unable to locate SVG elements through xpath on Kendo UI chart