CODEWITHSUNDEEP
javascriptreactjsrobotframeworkdraftjs
JohnPix
JohnPix

Reputation: 1843

Input text in draft.js

I'm doing automation test and I need to input text in a text field, but the problem is there is no 'input' to do this.

This one won't work: 

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

Does any one know how to input text in draft.js?

Upvotes: 7

Views: 2281

Answers (3)

JOHAN SMITH
JOHAN SMITH

Reputation: 11

 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>

I used this to insert span tags into a div tag. I'm only a beginner so it might not be optimal I used this while experimenting with JS on a simple calculator, because I wanted to see if it could work without using an input tag. please let me know if this helps as it will also help me to see if my understanding is good

Upvotes: 1

Lajos Arpad
Lajos Arpad

Reputation: 76573

Let's first understand the code you have written:

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

This code attempts to:

  • get the first element
  • which has a class containing 'DraftEditorPlaceholder' and
  • which has an ancestor having a class containing AddCitation_ which
  • has an ancestor having a class containing modal-dialog

So, you will first need to ensure that the element you try to edit is inside an element having a class containing modal-dialog. In your screenshot we cannot see such an ancestor element, the root having a class of modal-content. If the selector you have written does not find an element, then an error will be thrown when you try to assign a value to any of its attributes, like value in this case. You have an element having a class of styles_AddCitation__3_D5j, which is the child of the element of the class of modal-content. You have an element having a class of public-DraftEditorPlaceholder-root, which, assuming that you have a class containing the modal-dialog text being its ancestor, then the selector will find it. However, this is the sibling of the element which you seem to expect to find with your query. So, you will need to sort out where you intend to put your text into.

Now, assuming that you have sorted your selector out and there is a span in the element you are talking about, you will need to write span at the end of your selector, with a space before it. Also, in this case you will need to set innerText instead of value to your desired value. If the target element is an input, then setting a value should suffice.

Another possible problem is that your Javascript code might run before the structure is actually generated, hence not being able to set attributes of elements which do not exist yet. So you will also need to make sure that your structure is in place indeed when this Javascript code runs.

Upvotes: 1

Rahul Rana
Rahul Rana

Reputation: 455

You can use document.execCommand("insertHTML", "html string here", false) As you can see draft js uses contenteditable property of div to write text So if you want to automate tests with draftjs insert any sample html string with command so you have a sample text in draft editor now you can perform tests Read this https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

Upvotes: 1

Related Questions