we are using testcafe tool for FE automation. On our page we have multiple vue components each having different text boxes( ex: contact info section, address info section).
All the text boxes have similar kind of selectors with only id as change. ex: id ='mobilenum' for phone num field. id='postalcode' for postal code field.
we are able to enter data into phone number but not on postal code. all the selectors are correct and we are able to enter data from console, but not from the code. we are getting below error
expected ' ' deeply equal to '1212gd'.
which means text is not getting entered into the textbox. We are able to enter data into first vue component of the page, the remaining textboxes which are related to other components are remained empty. When we disable 1st component of the page at code level, then we are able to enter data into 2nd component(which is newly became 1st component of the page). We are unable to understand why this issue is occurring. as it is code related to my project, i cant share the code.
i am trying to add some dummy code similar to actual
Selector for mobile num looks like below
document.querySelector('#Number').shadowRoot.querySelector('input')
and postalcode is
document.querySelector('#postal').shadowRoot.querySelector('input')
and at developement code level these are getting displayed on a page but belongs to different vue components Script:
await t.typeText(reg.phoneNumber, testdata.phoneNumber);
await t.expect(reg.phoneNumber.value).eql(testdata.phoneNumber)
await t.typeText(reg.postalCode, testdata.postalCode);
await t.expect(reg.postalCode.value).eql(testdata.postalCode);
Script is getting failed at postal code assertion, because it is unable to enter data
