用赛普拉斯测试摩纳哥编辑器

Question

以上是摩纳哥编辑器渲染的dom节点层次。呈现了一个textarea节点，但是不允许修改现有内容。

示例：

如果编辑器中的内容为“ Foo”，则这段代码...

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

...只会在编辑器之前添加blah，导致出现“ blahFoo”

如何在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') }) }) 功能的示例：

3.3.1

赛普拉斯版本：{{1}}

Answer 2

您可以使用clear()

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

赛普拉斯doc：https://docs.cypress.io/api/commands/clear.html