Selenium Locator for Angular JS Text Area is not working

Question

Please suggest me the locator to identify the text area in a web application.

 <div contenteditable="true" id="taTextElement9662867992554610" ta-bind="ta-bind" ng-model="html" placeholder="Enter Role Requirements" class="ng-isolate-scope ng-pristine ng-valid ta-bind placeholder-text"><p><br></p></div>

I tried with //div[@ng-isolate-scope ng-pristine ng-valid ta-bind'] .

Answer 1

I'd rely on the id attribute (assuming the 9662867992554610 part is dynamic):

//div[starts-with(@id, "taTextElement")]

Or, in case you are using protractor , you can choose to use by.model() locator:

element(by.model('html'))

Answer 2

The ID looks randomly generated, if thats the case - you can't rely on it. Event if it's unique - it's "engeneering sense", is not unique enough. I would not rely on it in any case.

As suggested above, you can use:

//div[starts-with(@id, "taTextElement")]

But i don't think it's a good solution either. The best solution IMO is ask the web-developers to create special attribute for those kind of elements, for example:

 <div data-hook="my-special-text"</div>

This data-hook attribute will serve as a contract between you and the developer, he will know that once he change it - automation tests can be affected. Moreover, he can (should) use this attribute in his client tests too (Protractor).