How to find an element by using 'translate'? I have a common class name. So , i can't use class name to find elements

Question

I have below HTML stracture. Here Class is used in some other places also. Please give me some solution of it.

<div ng-show="addEditBillingCodeForm.form.code.$error.required &amp;&amp; addEditBillingCodeFormSubmitted" class="error-msg ng-scope" translate="MESSAGE_TOOLS_BILLING_CODE_REQ">Specify billing code</div>**strong text** 

Answer 1

This solution requires jquery:

$("div[translate='MESSAGE_TOOLS_BILLING_CODE_REQ']")

This likely won't work in practice as I imagine MESSAGE_TOOLS_BILLING_CODE_REQ prints to yes/no (see documentation on translate paramter). The following lines would work in that case but this will not be very specific and you will likely have similar selection issues to currently.

$("div[translate='no']")
$("div[translate='yes']")

Or more specific, using the classes present as well:

$("div.error-msg.ng-scope[translate='no']")
$("div.error-msg.ng-scope[translate='yes']")

It would be best to find something unique in the surrounding HTML structure. The easiest way would be to add a unique class to just the instances you want to edit, but otherwise the parents, etc are often heplful.

Answer 2

Use this if you are just trying to locate the element:

element(by.cssContainingText('div.error-msg.ng-scope','Specify billing code'))