Testcafe中contenteditable元素无法触发换行的解决方案咨询

在Testcafe里调用.pressKey('enter')无法让contenteditable元素触发换行，手动模拟键盘事件也没效果，相关代码如下：

问题代码 #

HTML代码 #

<!DOCTYPE html>
<html>
<head>

</head>
<body>

  <h1>Template</h1>
  
  <div id="123" style="border: 1px solid red; height: 200px; width:200px;" contenteditable="true">This is a blank template for a web page.</div>

</body>
</html>

Testcafe代码 #

test('memo', async t => {
    await t
    .click(Selector('#123'))

    await t.eval(() =>{
         var el = document.getElementById('123')
         var evt = new KeyboardEvent('keydown', {altKey:false,
       bubbles: true,
       cancelBubble: false, 
       cancelable: true,
       charCode: 0,
       code: "Enter",
       composed: true,
       ctrlKey: false,
       currentTarget: null,
       defaultPrevented: true,
       detail: 0,
       eventPhase: 0,
       isComposing: false,
       isTrusted: true,
       key: "Enter",
       keyCode: 13,
       location: 0,
       metaKey: false,
       repeat: false,
       returnValue: false,
       shiftKey: false,
       type: "keydown",
       which: 13,
       view: window
       })

    el.dispatchEvent(evt);
    });
});

可行解决方案 #

之前模拟键盘事件无效的核心原因：浏览器仅认可原生触发的可信事件（isTrusted为true），手动创建的事件即使强行设置isTrusted: true也不会被浏览器识别，因此无法触发contenteditable的默认换行行为。

方案1：使用typeText输入换行符 #

利用Testcafe的typeText方法直接输入\n，前提是元素已被激活（光标在正确位置）：

import { Selector } from 'testcafe';

test('memo', async t => {
    await t
        .click(Selector('#123'))
        .typeText(Selector('#123'), '\n');
});

方案2：直接操作DOM插入换行 #

通过客户端函数直接在光标位置插入换行节点，这种方式更稳定，不受键盘事件模拟限制：

import { Selector } from 'testcafe';

test('memo', async t => {
    await t.click(Selector('#123'));

    await t.eval(() => {
        const editableEl = document.getElementById('123');
        const selection = window.getSelection();
        
        if (selection.rangeCount > 0) {
            const range = selection.getRangeAt(0);
            // 创建换行元素
            const lineBreak = document.createElement('br');
            // 在光标位置插入换行
            range.insertNode(lineBreak);
            // 将光标移至换行后，确保后续输入正常
            range.setStartAfter(lineBreak);
            range.setEndAfter(lineBreak);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    });
});

内容的提问来源于stack exchange，提问作者ozelmat