Uncaught object error thrown using typeText on an input with an existing value

[anthonyferroHU]

What is your Scenario?

Using Testcafe to test a Vue app, the typeText method throws an obscure error when typing text into a field that is already auto-populated with text (in this case, a reply button is clicked which shows a text field with a username mention pre-populated, and attempting to add more text causes this error - screenshots below). The issue happens on Chrome and Firefox but not Safari. The error fields mention frames, but there is no iFrame related to these components or on the page where this test is failing. Similar issues I've found are either from many years/TC versions ago, or are about interacting with iFrames.

What is the Current behavior?

On chrome and firefox, when the div[role=textbox] below does not have the nested span tag, no errors occur. Once it does, typeText and pressKey both throw the error.

What is the Expected behavior?

typeText should add additional text to the field instead of throwing an error, as it does when the field is empty

What is the public URL of the test page? (attach your complete example)

Unable to find a good example of this on a public website yet

What is your TestCafe test code?

text field from the Vue source code:

<template>
  <div
    ref="contentEditable"
    role="textbox"
    contenteditable="true"
    aria-multiline="true"
    @input="contentEditableEventHandler"
    @blur="onBlur"
  />
</template>

Selector definition in Testcafe:

this.replyForm = Selector('form.content-reply-form');
this.replyInput = this.replyForm.find('div.mention-box__input');

Helper function which fails on the typeText line:

async setReply(replyText) {
    await t.expect(this.replyInput.visible).ok();
    // await t.click(this.replyInput);
    // console.log(await this.replyInput.innerText);
    // await t.pressKey('right');
    await t.typeText(this.replyInput, replyText, { paste: true });
  }

Your complete configuration file

{
"src": "*-spec.js",
"concurrency": 1,
"debugOnFail": false,
"assertionTimeout": 10000,
"skipJsErrors": true,
"disableMultipleWindows": true,
"screenshots": {
"path": "./testscreenshots",
"takeOnFails": true,
"thumbnails": false
},
"quarantineMode": {
"successThreshold": 1,
"attemptLimit": 3
}
}

Your complete test report

1) Uncaught object

   "{"callsite":{"filename":"/Users/anthony.ferro/Developer/nexus-e2e/pages/moderation/flagDetailPage.js","lineNum":254,"callsiteFrameIdx":5,"stackFrames":[{},{},{},{},{},{},{},{},{},{}],"isV8Frames":true}}"
      was thrown. Throw Error instead.

      Browser: Chrome 125.0.0.0 / Ventura 13

Screenshots

Chrome^ When the div[role=textbox] here does not have the nested span tag, no errors occur. Once it does, typeText and pressKey both throw the above error.

Safari^ where there is no issue

Firefox^ where the issue still happens

Failure state w/ error, the runner will flash green a bunch of times, then turns red when it fails.

Steps to Reproduce

Use typeText on a div[role="textbox"] that has an existing value in the input. In this case, text with a link.

TestCafe version

3.6 (this worked on versions earlier than 3)

Node.js version

20.14.0 & 18.14.0

Command-line arguments

testcafe chrome -c 1 testPath-spec.js --skip-uncaught-errors --skip-js-errors --disable-native-automation

Browser name(s) and version(s)

Chrome 125, Firefox 122

Platform(s) and version(s)

mocOS Ventura 13

Other

Tried running the test with and without native automation enabled for Chrome, with no difference. The issue also happens in Firefox, which suggests it has nothing to do with the new chrome/native automation changes in Testcafe. The issue does not happen in Safari despite the DOM being similar.

Tried adding await t.expect(this.replyInput.visible).ok(); before typeText - made no difference. Also confirmed in the TC debugger that my selector for this field is valid + no others found that it could be confused with.

Tried explicitly clicking the input although it appears to be focused already - this doesn't throw the error, but instead proceeds without entering any text, making the test fail.

Tried adding await t.pressKey('right'); before typeText - the same error is thrown on the pressKey line instead.

Tried console.log(await this.replyInput.innerText); before typeText - this correctly outputs the existing text in the input (the username mention text).

Tried upgrading Node from v18.14.0 to v20.14.0 - issue still occurs.

Tried typeText with and without { paste: true } for all these scenarios - made no difference.

Tried moving the helper function code into a try/catch - still caught the same error message.

Tried using .dispatchEvent (from this similar issue) to input the text various ways (tried keydown, keydown + keyup, keypress events with key, key + code, and key options). This doesn't throw the error, but instead proceeds without entering any text, making the test fail.
ex)

async setReply(replyText) {
    await t.dispatchEvent(this.replyInput, 'focus');
    for(const letter of replyText) {
      await t.dispatchEvent(this.replyInput, 'keydown', { key: letter, code: `Key${letter.toUpperCase()}` });
    }
  }

[github-actions]

Thank you for submitting a bug report. We would love to help you investigate the issue. Please share a simple code example that reliably reproduces the bug. For more information, read the following article: How To Create a Minimal Working Example When You Submit an Issue. We look forward to your response.

[github-actions]

This issue was automatically closed because there was no response to our request for more information from the original author. Currently, we don't have enough information to take action. Please reach out to us if you find the necessary information and are able to share it. We are also eager to know if you resolved the issue on your own and can share your findings with everyone.