How can I clear a Codemirror editor field from Cypress

Question

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.

Answer 1

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('');
      });

Answer 2

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