Question

我正在尝试使用TestCafe测试使用contenteditable div作为用户输入的聊天机器人。实际上已经成功地通过Chrome和Firefox按下了enter并通过了测试，但是还没有使Safari能够按下enter。我意识到contenteditable不支持pressKey("enter")，但是我想知道为什么它同时适用于Chrome和Firefox而不适用于Safari，以及我是否可以使其适用于Safari？

test("Able to send a message on enter keypress", async t => {
  await t
    .typeText(chatbot.userReply, "hi")
    .pressKey("enter")
    .expect(chatbot.transcriptMessages.find("li").withText("hi").count).eql(1)
})

Answer 1

如果不研究表明问题的可行样本，很难说为什么这在Safari中不起作用。据您的描述所知，您的contenteditable元素具有keypress事件处理程序，该事件处理程序在enter印刷机上发送一条消息。我已经准备了一个示例项目来演示这种方法，并且所有这些都可以在Safari和Chrome上正常运行：

测试页：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="editor" contenteditable="true" style="width: 300px; height: 300px; border: 1px solid black;">test</div>
<script>
    document.getElementById('editor').addEventListener('keypress', function() { alert('test') })
</script>
</body>
</html>

测试代码：

fixture `test`
    .page `../pages/index.html`;

test(`test`, async t => {
    await t.click('#editor');
    await t.pressKey('enter');
});

Answer 2

在此页的评论中，您提到它位于iframe中，因此您需要执行以下操作：

await t.switchToIframe(iframeSelector);

切换回去时，您可以执行以下操作：

await t.switchToMainWindow();

在Safari中可编辑的内容上按Enter键

2 个答案: