3

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.

Alex Skorkin
  • 4,264
  • 3
  • 25
  • 47
user3389310
  • 151
  • 6

3 Answers3

2

Firstly, I'll confess I'm no authority on testcafe, just learning myself.

That being said I've assertions which work as follows:

await t.expect(Selector('h2').withText('Some text').exists).ok();

In you case if there's no id/class you can use to narrow the search it could be fairly inefficient (there are likely a lot of divs/spans in your app). Could you provide some info about the dom used to display the errors ?

Iain_b
  • 1,043
  • 5
  • 13
2

As a @Iain_b said, you can use a Selector and the ok() assertion to check presence of the error message. You can use Adjacent sibling combinator to select the error's <div> tag. However the element can be inserted into the DOM tree after validation is failed, or be there since page loading and just become visible after validation is failed.

So for the first case you should use something like:

await t.expect(Selector('#uid + .abyss-error-message').withText('Please enter a valid Unique ID Number').exists).notOk();

await t.typeText('#uid', '@$dfgh');

await t.expect(Selector('#uid + .abyss-error-message').withText('Please enter a valid Unique ID Number').exists).notOk();

and for the second:

await t.expect(Selector('#uid + .abyss-error-message').withText('Please enter a valid Unique ID Number').visible).notOk();

await t.typeText('#uid', '@$dfgh');

await t.expect(Selector('#uid + .abyss-error-message').withText('Please enter a valid Unique ID Number').visible).notOk();
Alex Skorkin
  • 4,264
  • 3
  • 25
  • 47
Andrey Belym
  • 2,893
  • 8
  • 19
  • Thanks for responding. I tried doing both way but getting "ReferenceError: Selector is not defined" – user3389310 Sep 04 '18 at 10:37
  • I again looked into my code.. it was giving Selector is not defined error message because I have not imported selector. I have added import { Selector, t } from 'testcafe'; code and again executed the code. It is still not able to identify the error message. – user3389310 Sep 04 '18 at 12:24
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')
user3389310
  • 151
  • 6