InvalidSelectorException when trying to find elements by xlink:href attribute

Question

I'm trying to find elements like this:

<use xlink:href="site.org/path/action#edit"></use>

by a given attribute using this selector:

  public static By ElementsSelector { get; set; } = By.CssSelector(@"use[xlink:href='site.org/path/action#edit']");

and I find elements by:

 Driver.FindElements(EditProfilePage.ElementsSelector)[0].Click();

but I get an exception:

OpenQA.Selenium.InvalidSelectorException: 'invalid selector: An invalid or illegal selector was specified
  (Session info: chrome=78.0.3904.87)'

Question: How can I find elements with a given xlink:href attribute?

Update the question with the relevant HTML – undetected Selenium Dec 11 '19 at 15:40 — undetected Selenium, Dec 11 '19 at 15:40

Sooraj · Answer 1 · 2019-12-11T15:54:20.797

0

Try without @ in css selector:

public static By ElementsSelector { get; set; } = By.CssSelector("use[xlink:href='site.org/path/action#edit']");

edited Dec 11 '19 at 15:54

answered Dec 11 '19 at 15:47

Sooraj

565
3
8

Did you just remove `@` or am I missing something? – Yoda Dec 11 '19 at 15:49
Yes, I removed it, I dont think it is required – Sooraj Dec 11 '19 at 15:50
@yoda, It should be `EditProfilePage.ElementsSelector` instead of `EditProfilePage.EditIconsSelector` right. Is it a typo? – Sooraj Dec 11 '19 at 15:52

score 0 · Answer 2 · answered Dec 11 '19 at 16:10

`<use>`

The <use> element takes nodes from within the SVG document, and duplicates them somewhere else.

xlink:href

The xlink:href attribute defines a reference to a resource as a reference IRI. The exact meaning of that link depends on the context of each element using it.

An example:

<svg viewBox="0 0 160 40" xmlns="http://www.w3.org/2000/svg">
  <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">MDN Web Docs</text></a>
</svg>

Note: SVG 2 removed the need for the xlink namespace, so instead of xlink:href you should use href.

This usecase

As the <use> 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 <use> elements:
```
//*[name()="svg"]/*[name()="use"]
```

Additional Consideration: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible. Be aware that this feature may cease to work at any time.

References

You can find a couple of relevant detailed discussions in:

InvalidSelectorException when trying to find elements by xlink:href attribute

2 Answers2

<use>

xlink:href

This usecase

References

`<use>`