Require help in identifying element in testcafe

Question

I am new to automation testing and coding. I am using testcafe in one of my project to automate the functional testing.

In one of the webpage there is a field which only accept numeric values and gives error message if any alphanumeric values are entered.

As a part of my validation I need to capture this error message.

Issue which I am facing here is I am not able to determine which element it is in DOM.

For example gmail user name can be considered for this and error message that we get while we try to enter invalid user message.

This is how the DOM looks like for the field

<div class="flex-content space-100 space-large-reset ">
<label for="uid">Unique ID Number</label>
<input type="password" id="uid" maxlength="9" value="123js" class="abyss-textinput abyss-form-invalid">
<div class="abyss-error-message">Please enter a valid Unique ID Number.</div></div>

Value ="123js" is the incorrect value which i entered which generated error message mentioned in next line.

Thanks in advance.

Answer 1

Thanks for the help guys..

I was able to find the element using below mentioned condition

Selector ('.abyss-error-message').withText('Please enter a valid UID')