使用 Cypress 测试 monaco-editor

Question

上面是 Monaco Editor 渲染的 dom 节点的层次结构。渲染了一个textarea 节点，但不允许修改现有内容。

例子：

如果编辑器中的内容是“Foo”，那么这段代码……

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

...只会在编辑器中添加 blah，导致 "blahFoo"

如何使用 cypress 在 monaco 编辑器中全选并更新内容？

编辑：

到目前为止，我已经尝试了所有建议：.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')
    .type('foobar') 
  })
})

另外，这是一个测试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')
  })
})

赛普拉斯版本：3.3.1

2020 年更新：

赛普拉斯版本：5.0.0

从编辑器中清除所有文本

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