内容可编辑的 Testcafe 换行符答案

【问题标题】：Testcafe newline in contenteditable内容可编辑的 Testcafe 换行符
【发布时间】：2022-12-09 17:21:04
【问题描述】：

在 Testcafe 中，您不能使用 .pressKey('enter') 在 contenteditable 中触发新行。有没有可能解决这个问题？

我试图通过 clientFunction 触发键盘事件，但没有成功。

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>

测试咖啡厅：

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);

        
    // });


});

【问题讨论】：

标签： html automated-tests contenteditable keyboard-events testcafe

【解决方案1】：

无法使用 TestCafe API 向 contenteditable 元素添加新行。根据以下文章，'pressKey("enter")' 操作不适用于 contenteditable 元素： https://testcafe.io/documentation/402693/reference/test-api/testcontroller/presskey。

但是，我认为我们需要支持使用typeText函数键入多行文本的使用场景。

请使用以下模板在 TestCafe 存储库中创建一个单独的问题：https://github.com/DevExpress/testcafe/issues/new?assignees=&labels=TYPE%3A+bug&template=bug_report.yaml。

【讨论】：