Protractor - How to locate element by custom (non HTML) attributes?

Question

I am using Selenium WebDriver and Protractor to run e2e tests on my angular project. Let's say I have an element like:

<div my-directive my-unique-id="abc123"></div>

How can locate the above element. I tried with element(by.css('div[my-unique-id="abc123"]'));, but it gives a NoSuchElementError.

If I try with HTML attributes like, for example, I want to locate:

<a title="myTitle" href="">Click me</a>

I was able to locate the element correctly using element(by.css('a[title="myTitle"]'))

How do I locate the element with custom attributes, if it does not have any standard HTML attributes?

Answer 1

Try to use xpath:

element(by.xpath('//div[@my-unique-id="abc123"]'))

or only by attribute

element(by.xpath('//div[@my-unique-id]'))

Answer 2

try using:

element(by.css('[my-unique-id="abc123"]'))

it's easier and more readable than xpath for simple cases.

more about xpath syntax and when it is usefull: http://www.w3schools.com/xml/xml_xpath.asp