Тестирование монако-редактора с Cypress

Question

Выше приведена иерархия узлов dom, представленная редактором Monaco.Существует визуализированный узел textarea, но он не позволяет модифицировать существующее содержимое .

Пример:

Если содержимое в редакторе "Foo", то этот фрагмент кода ...

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

... будет только предварять бла вредактор, в результате чего "blahFoo"

Как вы выбираете все и обновляете содержимое в редакторе Monaco с помощью Cypress?

РЕДАКТИРОВАТЬ:

У меня естьперепробовал все приведенные предложения: .click (), .clear () и т. д. не работает.Пожалуйста, предоставляйте предложения только в том случае, если вы попробовали и работаете.

Answer 1

{selectAll} отправляет document.execCommand('selectall'), который будет работать для contenteditables, textareas и inputs, если пользовательский код не отключает его поведение по умолчанию.Это похоже на случай с monaco-editor.

. Мне удалось заменить весь выбор, используя {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')
    // {force:true} is required until https://github.com/cypress-io/cypress/issues/3001 is released
    .type('foobar', { force: true }) 
  })
})

Кроме того, вот пример тестирования ctrl+fособенность:

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: 3.3.1

Answer 2

Вы можете использовать clear()

cy.get('.react-monaco-editor-container textarea')
      .clear()
      .type('blah');

Cypress Doc: https://docs.cypress.io/api/commands/clear.html