Issue with pasting large text bodies using t.typeText Method

[sam-yh]

What is your Scenario?

We use the .typeText with the paste option to fill a textarea with XML source codes. These can be up to 5k lines.
This used to work fine. Unclear if the change in behavior described below is from changes in Testcafe or from changes in NodeJs or Chrome.

What is the Current behavior?

The .typeText Method is very slow and can fail during this. The browser also becomes unresponsive, e.g. you cannot open the DevTools during it.
If the text body that is pasted is larger than ~ 3k of lines, the method can fail to complete and instead Testcafe will start another instance of the test.

What is the Expected behavior?

Pasting is instantaneous or close to it. The amount of text / lines pasted is near to irrelevant.

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

https://devexpress.github.io/testcafe/example/

What is your TestCafe test code?

import { readFileSync } from 'fs'

fixture`Repro TypeText Issue`
  .page`${'https://devexpress.github.io/testcafe/example/'}`

test('Repro: typeText pasting issue', async (t) => {
  // Load source code from file
  const test = await readFileSync(`path/to/file`, {
    encoding: 'utf8'
  })
  // paste into textarea
  await t
    .maximizeWindow()
    .typeText('input#developer-name', 'test')
    .click('input#tried-test-cafe')
    .typeText('textarea#comments', test, { paste: true })
})

Your complete configuration file

module.exports = {
    assertionTimeout: 1000,
    selectorTimeout: 5000,
    pageLoadTimeout: 5000,
    pageRequestTimeout: 60000,
    ajaxRequestTimeout: 60000,
    testExecutionTimeout: 400000,
    disablePageCaching: true,
    skipJsErrors: true,
    hostname: 'localhost',
    disableMultipleWindows: true
}

Your complete test report

Depending on the size of the source code (2k, 3k, or 5k of lines) the test will either be too slow (waiting minutes for the pasting) or just fail / starting new instances of itself.

Screenshots

No response

Steps to Reproduce

1. Download the attached examples of XML source code (or provide your own text file of multiple thousand of lines)
2. Run the code snippet with the different length of source code

TestCafe version

3.7.0

Node.js version

20.17.0

Command-line arguments

Browser name(s) and version(s)

Chrome 131.0.6778.69

Platform(s) and version(s)

Ubuntu 22.04.3

Other

Example source codes with 2k, 3k and 5k of lines:
Testcase10.txt
Testcase9.txt
Testcase8.txt

[PavelMor25]

Hello @sam-yh,

I reproduced the described behavior and investigated it further. The issue occurs because we use native browser automation protocols such as the Chrome DevTools Protocol (CDP) in Native Automation mode. Unfortunately, this issue arises on the CDP side, which is beyond our control.

As a workaround, I suggest running these tests in Proxy mode. To do this, you need to disable native automation mode.

Another approach is to copy the content of the file to the clipboard and then paste it into the textarea using the pressKey method:

test('Repro: typeText pasting issue', async (t) => {
  // Load source code from file
const test = await readFileSync(`gh-8340/Testcase9.txt`, {
  encoding: 'utf8'
})
 
// ... copy file content to clipboard
 
  await t
    .maximizeWindow()
    .typeText('input#developer-name', 'test')
    .click('input#tried-test-cafe')
    .click('textarea#comments')
    .pressKey('ctrl+v')
 
})

I will close this ticket as this behavior is beyond our control. We hope for your understanding. If you have any further questions, feel free to contact us.

[sam-yh]

Thank you for the response and the workaround!

edit:

In case anyone finds issue and finds this useful: The workaround with copy to clipboard and paste via pressKey works fine for me.
You can integrate a copy to clipboard via ClientFunction:

const copyToClipboard = ClientFunction((text) => {
  return navigator.clipboard.writeText(text)
})

and paste with the already mentioned .pressKey('ctrl+v') (use .pressKey('ctrl+a') before if you need to select&replace existing content).