如何从赛普拉斯清除 Codemirror 编辑器字段答案

【问题标题】：How can I clear a Codemirror editor field from Cypress如何从赛普拉斯清除 Codemirror 编辑器字段
【发布时间】：2020-05-25 23:29:27
【问题描述】：

我已经从另一个 SO 回答 How to type using cypress .type() inside the codemirror editor? 尝试过类似的事情

如果有帮助，这是我正在使用 https://testing-playground.com/ 在 Cypress 上工作的网站

  // CodeMirror's editor doesn't let us clear it from the
    // textarea, but we can read the Window object and then
    // invoke `setValue` on the editor global
    cy.window().then(win => {
      win.editor.setValue("")
    })

我遇到的问题是，当我尝试实现此功能时，我得到了编辑器的undefined。我尝试深入研究 Window 对象，但找不到任何类似于 Codemirror 编辑器的东西。在任何其他 Codemirror 元素上运行 .clear({force: true}) 不会产生任何结果，只是在文本字段上使用 .type({force: true}) 添加旧内容。

【问题讨论】：

标签： javascript cypress e2e-testing codemirror

【解决方案1】：

我最终使用的解决方案看起来类似于问题中的代码块，但有一些更改。

我没有从 Cypress 获取窗口对象； CodeMirror 编辑器不存在。
我使用了 Evan Plaice 给我的与 DOM 上的 Editor 实例相关的想法，然后手动搜索 CodeMirror DOM 层次结构以找到它。

生成的代码将清除一个特定的编辑器，有两个所以[0] 是必要的。

  cy.get('.CodeMirror')
      .first()
      .then((editor) => {
        editor[0].CodeMirror.setValue('');
      });

【讨论】：

【解决方案2】：

非常不直观，但您可以通过交换新的 CodeMirror 文档实例来更新内容

editor.swapDoc(CodeMirror.Doc([contents],[language]));

这就是我在 wc-codemirror 上处理内容更新的方式

【讨论】：

win.editor 在 Cypress 中不断返回 undefined .then() 当我控制台.log 只是 win 时，我在 Window 对象上看不到它我想不通为什么...
取决于它的创建方式。我使用fromTextArea 然后——一旦它被创建——你可以使用getElementById 或querySelector 来获取对editor 的引用。 CodeMirror 选项直接在元素上发生变化。
有一个全局的 CodeMirror，但它用于存储全局功能（例如编辑器创建、语法突出显示）。编辑器实例直接绑定到 DOM 元素。
嘿！再次非常感谢，我得到了一个可行的解决方案，您的回复确实帮助我实现了目标！
HellToTheYeah.gif