2

I already tried something like this from another SO answer How to type using cypress .type() inside the codemirror editor?

If it helps this is the site I am working on Cypress with https://testing-playground.com/

  // CodeMirror's editor doesn't let us clear it from the
    // textarea, but we can read the Window object and then
    // invoke `setValue` on the editor global
    cy.window().then(win => {
      win.editor.setValue("")
    })

The issue I am running into is when I try to implement this I am getting undefined for the editor. I tried digging into the Window object more and couldn't find anything resembling the Codemirror editor. Running .clear({force: true}) on any of the other Codemirror elements yields no results, just .type({force: true}) on the textfield adding the new content with the old.

2 Answers 2

6

The solution I ended up using looked something similar to code block in the question with a few changes.

  • I am not getting the window object from Cypress; CodeMirror editor wasn't there.

  • I used the idea Evan Plaice gave me related to the Editor instance being on the DOM and then searched the CodeMirror DOM hierarchy manually to find it.

The resulting code will clear a spefic editor, there are two so the [0] is necessary for that.

  cy.get('.CodeMirror')
      .first()
      .then((editor) => {
        editor[0].CodeMirror.setValue('');
      });
1

Very unintuitive but you can update the contents by swapping in a new CodeMirror document instance

editor.swapDoc(CodeMirror.Doc([contents],[language]));

That's how I handle content updates on wc-codemirror

5
  • 1
    win.editor keeps coming back undefined in the Cypress .then() I don't see it on the Window object anywhere when I console.log just the win I can't figure out why either... It should be existing somewhere, so I can nuke it manually lol
    – Jacob
    May 26, 2020 at 0:01
  • 1
    Depends on how it's created. I use fromTextArea then -- once it's created -- you can use getElementById or querySelector to grab an reference to the editor. CodeMirror options are mutated directly on the element. May 26, 2020 at 0:05
  • 1
    There is a CodeMirror global but it's used to store global functionality (ex editor creation, syntax highlighting). Editor instances are bound directly to DOM elements. May 26, 2020 at 0:08
  • 1
    Hey! Thanks a lot again, I was able to get a working solution and your responses really helped me get there!
    – Jacob
    May 26, 2020 at 3:33
  • 1
    HellToTheYeah.gif May 26, 2020 at 3:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.