0

I am trying to type into a RichText editor using CodeceptJs and Selenium but so far the only way I'm able to do this is by clicking the previous input field on the page and tabbing from it to the RichText editor and once there I then add my text simulating a keyboard interaction.However, I feel there may be a better way to do this and also to locate the editor to see if it's displayed on the screen.

I have tried grabbing both the textarea and the span tags that I see when inspecting the page, but none of them would work. I've also gone through the length of trying to use a javascript executor to remove the display none property on the hidden textarea that seems to accompany that field and I can type there but still not on the textarea inside the text editor. I've also checked to see if the editor would perhaps be inside a frame that I would need to switch to but it doesn't seem to be the case.

Any help much appreciated please.

async checkAllElementsAreDisplayed() {
    await I.seeElement(this.titleInput)
    await I.seeElement(this.summaryInput)

    await I.executeScript(function() {
        const doc = document.evaluate('//div[3]/div[1]/textarea', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
        doc.style.display='inline';
        doc.click()
    });

    await I.click(this.summaryInput)
    await I.pressKey("Tab");
    await I.pressKey("a");

    I.fillField(this.textArea, "my text" )
    await I.saveScreenshot('textarea.png', true)


    await I.seeElement(this.textArea)
    await I.seeElement(this.userInput)
    await I.seeElement(this.secretInput)
    await I.seeElement(this.saveButton)
}

PS: The RichText editor comes as a React component from import * as SimpleMDE from "easymde";

<div className="container container-narrow">
    <SimpleMDE
    className={""}
    value={this.state.textValue}
    onChange={this.handleChange}
/> </div>

enter image description here

enter image description here

enter image description here

Thank you very much.

Naktibalda
  • 13,705
  • 5
  • 35
  • 51
Francislainy Campos
  • 3,462
  • 4
  • 33
  • 81
  • Can you please update the question with code editor name or the URL for reference. You might get some help from this [URL](https://stackoverflow.com/questions/63718405/entering-python-code-in-textarea-using-sendkey-but-not-working-any-solutions/63740285#63740285) – Dilip Meghwal Oct 26 '20 at 13:29
  • Hi, thanks for your message. Sorry, do you mean the name for the component that originates the editor? It's a React component that comes from here ```import * as SimpleMDE from "easymde";``` – Francislainy Campos Oct 26 '20 at 15:38
  • In your HTML code it seems its codeMirror editor. Once you find the editor try to set the text using JavaScript Executor. – Dilip Meghwal Oct 27 '20 at 09:03
  • Yeah, unfortunately this is being harder than I'd expect. Tried several different things but it's still not working I'm afraid. – Francislainy Campos Oct 28 '20 at 15:56
  • ```await I.executeScript(function() { const doc = document.evaluate(this.tarea, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; doc.textContent='text' doc.click() });``` – Francislainy Campos Oct 28 '20 at 15:56
  • This gives me a null error – Francislainy Campos Oct 28 '20 at 15:57
  • ```await I.seeElement(this.editor) await I.wait(5) await I.fillField(this.tarea, "test")``` – Francislainy Campos Oct 28 '20 at 15:58
  • And this gives me an element not interactable – Francislainy Campos Oct 28 '20 at 15:58
  • Can you try to execute plain javascript statement `document.getElementsByClassName('CodeMirror-code')[0].textContent = "My Text"` – Dilip Meghwal Oct 29 '20 at 13:12
  • Thank you. I'm afraid ```await I.executeScript(function() { const doc = document.evaluate('//div[3]/div[1]/textarea', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; doc.style.display='inline'; doc.click() document.getElementsByClassName('CodeMirror-code')[0].textContent = "My Text" });``` won't type and if I put the document.getElements piece outside this part I get a document doesn't exist error. – Francislainy Campos Oct 29 '20 at 15:08

0 Answers0