Input text in draft.js

Question

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?

Answer 1

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

Answer 2

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.