如何在 codemirror 编辑器中使用 cypress .type() 键入？答案

【问题标题】：How to type using cypress .type() inside the codemirror editor?如何在 codemirror 编辑器中使用 cypress .type() 键入？
【发布时间】：2019-03-26 17:20:09
【问题描述】：

我正在为 Codemirror 编辑器编写一些 cypress 测试。我使用cypress 输入输入字段。

我正在尝试在 CodeMirror 编辑器中实现 cy.type()。我在 codemirror 中的数据在 span 内。

<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &lt; h1 &gt; Welcome to your web project canvas! &lt; /h1&gt;</span></pre>

赛普拉斯规范代码 cy.get('pre.CodeMirror-line') .type('Cypress HTML 数据')

我无法使用 cypress 输入一些数据。

如果有人可以提供帮助，我将不胜感激？

【问题讨论】：

标签： codemirror cypress firepad

【解决方案1】：

您没有在规范代码中定位正确的元素。你在做cy.get('pre.CodeMirror-line')，但<pre> 标签不是cy.type()-able 元素。

您需要获取隐藏的 CodeMirror <textarea>。这可以使用.CodeMirror textarea 进行选择。以下 JS 是适用于 codemirror.net 的演示规范：

describe('Codemirror', () => {
  it('can be tested using textarea', () => {
    cy.visit('https://codemirror.net/')
    // 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("")
    })
    cy.get('.CodeMirror textarea')
    // we use `force: true` below because the textarea is hidden
    // and by default Cypress won't interact with hidden elements
      .type('test test test test', { force: true })
  })
})

【讨论】：

那是完美的聪明小伙子！
嘿@Zach Bloomquist 你如何清除编辑器？我试过 cy.get('.CodeMirror textarea') .clear()
@RahulThawal 你必须访问全局 editor 对象，然后访问它的 setValue。我已经用一个适用于 codemirror.net 的示例更新了答案。
谢谢！太棒了！
或者您可以执行以下操作：cy.get('.CodeMirror-code').type(<your text>)