Question

我正在进行自动化测试，我需要在文本字段中输入文本，但是问题是没有“输入”可以做到这一点。

此功能无效：

<div class="right-icons" (mouseover)="over($event)">
    <mat-icon (mouseover)="over($event)" 
    class="icon-pointer" 
    (click)="onCloseButtonClick()">close</mat-icon>
</div>


   over(e) {
     console.log('test_hover');
     }

有人知道如何在draft.js中输入文本吗？

Answer 1

您可以使用document.execCommand（“ insertHTML”，“此处是html字符串”，false）如您所见，js草稿使用div的contenteditable属性编写文本因此，如果要使用draftjs自动化测试，请使用命令插入任何示例html字符串因此，您在草稿编辑器中有一个示例文本，现在您可以执行测试读这个 https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

Answer 2

首先让我们了解您编写的代码：

document.querySelector([class*=modal-dialog] [class*=AddCitation_] [class*='DraftEditorPlaceholder']).value='Hello World'

此代码尝试执行以下操作：

获取第一个元素
具有包含“ DraftEditorPlaceholder”和
祖先的类包含AddCitation_其中
有一个祖先，其类包含模态对话

因此，您首先需要确保您尝试编辑的元素位于具有包含modal-dialog类的元素内。在您的屏幕快照中，我们看不到这样的祖先元素，其根具有一类模态内容。如果您编写的选择器找不到元素，那么当您尝试为其值分配任何属性时都会抛出错误，例如value。您有一个具有styles_AddCitation__3_D5j类的元素，该元素是modal-content类的元素的子级。您有一个具有public-DraftEditorPlaceholder-root类的元素，假设您有一个包含模态对话文本作为其祖先的类，则选择器将找到它。但是，这是您似乎希望在查询中找到的元素的同级对象。因此，您将需要整理要放置文本的位置。

现在，假设您已经对选择器进行了排序，并且要讨论的元素中有一个跨度，那么您将需要在选择器的末尾写一个跨度，在其前面有一个空格。同样，在这种情况下，您需要将innerText而不是value设置为所需值。如果目标元素是输入，则设置一个值就足够了。

另一个可能的问题是，您的Javascript代码可能在实际生成结构之前运行，因此无法设置尚不存在的元素的属性。因此，当此Javascript代码运行时，您还需要确保您的结构确实正确。

Answer 3

 const screen = document.getElementById("screen");//get span ID
screen.innerHTML += `<span class="screen" >${
      this.textContent
    }</span>`);//add text content


<body>
    <h1>CALCULATOR</h1>
    <!-- <div class="container"> -->
    <div class="container">
      <div class="column2" id="screen">
        <!-- <span class="screen"></span> -->
      </div>

我用它来将span标签插入div标签。我只是一个初学者，所以可能不是最佳选择我在一个简单的计算器上尝试JS时使用了此功能，因为我想看看它是否可以在不使用输入标签的情况下工作。请告诉我这是否有帮助，因为这也会帮助我了解我的理解是否很好

在draft.js中输入文本

3 个答案: