How to get xpath of the given string

Question

I am trying to write xpath for the given element.

<span editable-text="x.script" e-form="capture" class="ng-scope ng-binding editable">www.google.com</span>

I am trying something like

$x("//span[contains(concat(' ',@class,' '),' ng-scope ng-binding editable ')]")

which throws me error.

Answer 1

Since you are entertaining CSS Selectors, how about these? All of these should work

driver.findElement(By.cssSelector("span[editable-text='x.script']"));
driver.findElement(By.cssSelector("span[e-form='capture']"));
driver.findElement(By.cssSelector("span.ng-scope.ng-binding.editable"));

Answer 2

How about something like this

//span[contains(@class, 'ng-scope') and contains(@class, 'ng-binding') and contains(@class, 'editable')]

or using CSS selectors simply:

span.ng-scope.ng-binding.editable

Answer 3

Your initial XPath should work for getting the span element posted, given that you close the bracket for contains() function properly :

$x("//span[contains(concat(' ',@class,' '),' ng-scope ng-binding editable ')]")
                                                                           ^this was missing

However, the trick which combine contains() and concat() (as mentioned in this thread and some other places) meant to match individual CSS class. So the correct way to apply the same to match by 3 CSS classes would be as follow (formatted for readability) :

//span[contains(concat(' ',@class,' '),' ng-scope ')]
      [contains(concat(' ',@class,' '),' ng-binding ')]
      [contains(concat(' ',@class,' '),' editable ')]

otherwise, your XPath won't be able to find span element having the same set of CSS classes when the classes order is different. Anyway, matching CSS class is not a natural task for XPath selector. Using CSS selector as mentioned by @Amey, if possible, is the ultimate solution.