Testing monaco-editor with Cypress

Question

Above is the hierachy of dom nodes rendered by Monaco Editor. There is a textarea node rendered, but that does not allow modification of existing content.

Example:

If the content in the editor is "Foo", then this piece of code...

cy.get('.react-monaco-editor-container textarea')
      .type('{selectall}')
      .type('blah');

...will only prepend blah into the editor, resulting in "blahFoo"

How do you select all and update content in monaco editor using cypress?

EDIT:

I have tried all suggestions given so far: .click(), .clear(), etc. It does not work. Please provide suggestions only if you have tried it and works.

Answer 1

{selectAll} sends document.execCommand('selectall') which will work for contenteditables, textareas, and inputs unless custom code is disabling its default behavior. This seems to be the case with the monaco-editor.

I was able to replace the entire selection using {ctrl}a:

/// <reference types="cypress" />

describe('monaco', ()=>{
  it('can type', ()=>{
    cy.visit('https://microsoft.github.io/monaco-editor/index.html')
    cy.get('#editor')
    .click()
    // change subject to currently focused element
    .focused()
    .type('{ctrl}a')
    .type('foobar') 
  })
})

Also, here's an example testing the ctrl+f feature:

describe('monaco', ()=>{
  it('can type', ()=>{
    cy.visit('https://microsoft.github.io/monaco-editor/index.html')
    cy.get('.monaco-editor textarea:first')
    .type('{ctrl}f')
    .focused()
    // find the word 'canvas'
    .type('canvas')
  })
})

Cypress version: 3.3.1

UPDATE 2020:

Cypress version: 5.0.0

To clear all text from the editor

cy.get( '.monaco-editor textarea:first' ).click().focused().type( '{ctrl}a' ).clear();

Answer 2

FYI, I have been able to edit inside a monaco-editor using special characters (leftArrow, backspace etc). Cypress 9.5.1

it('monaco cypress demo', () => {

        //see https://docs.cypress.io/api/commands/type#Usage for special character usage

        cy.visit('https://microsoft.github.io/monaco-editor/playground.html').wait(1000);

        //navigate to end of 'Hello World!'
        cy.get('textarea').type('{moveToEnd}');
        cy.get('textarea').type('{upArrow}{upArrow}{upArrow}{end}');

        var text = '';
        for (var i = 0; i < 8; i++) { text += '{leftArrow}'; }
        cy.get('textarea').type(text);

        //delete Hello World!
        text = '';
        for (var i = 0; i < 12; i++) { text += '{backspace}'; }
        cy.get('textarea').type(text);

        //type 'Cypress Demo!'
        cy.get('textarea').type('Cypress Demo!');

        //Run it!
        cy.get('.action').click();

        //Verify! (bit tricky due to iframe)
        //see https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/    

        const getIframeDocument = (index) => {
            return cy
                .get('iframe[class=run-iframe]')
                .its(index + '.contentDocument').should('exist')
        }

        const getIframeBody = (index) => {
            return getIframeDocument(index)
                .its('body').should('not.be.undefined')
                .then(cy.wrap)
        }

        getIframeBody(0).find('.view-line').eq(1).invoke('text').then((text) => {
            // map any nbsp (https://github.com/cypress-io/cypress/issues/9531#issuecomment-739754618)
            expect(text.replace(/\u00a0/g, ' ')).equal("    alert('Cypress Demo!');")
        });
    });