Protractor - How to sendKeys to contenteditable div?

Question

I need to test this contenteditable <div> element. sendKeys is not working.

<quill-editor format="html" class="ng-untouched ng-pristine ng-valid ng-star-inserted">
  <div quill-editor-element="" class="ql-container ql-snow">
    <div class="ql-editor ql-blank" data-gramm="false" contenteditable="true" data-placeholder="Insert text here ...">
      <p style="padding: 0px; margin: 0px;"><br></p>
    </div>
    <div class="ql-clipboard" contenteditable="true" tabindex="-1">
    </div>
  </div>
</quill-editor>

I tried the below code but I'm getting below error;

element not interactable"

element(by.css('.ql-editor')).click();
element(by.css('.ql-editor')).sendKeys('Test');

What can I use to enter text in this field?

Answer 1

You can try following

1. Check if after clicking the element it's ID changes or not
2. Wait for few seconds and then try to send the keys.