用 Cypress 测试摩纳哥编辑器

Question

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

例子：

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

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

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

您如何使用赛普拉斯在摩纳哥编辑器中选择所有内容并更新内容？

编辑：

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