cypress - 用 Cypress 测试 Monaco Editor

Question

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

例子:

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

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

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

你好吗全选并更新 使用柏树的 Monaco Editor 中的内容？

编辑:

我已经尝试了到目前为止给出的所有建议:.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')
  })
})

Cypress 版本:3.3.12020 年更新:
Cypress 版本:5.0.0从编辑器中清除所有文本

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