如何在Codemirror编辑器中使用cypress .type()进行键入?

时间:2019-03-26 17:20:10

标签: codemirror cypress firepad

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

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

<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 Data')

我无法使用赛普拉斯输入某些数据。

如果有人可以帮助我,我将不胜感激。

1 个答案:

答案 0 :(得分:2)

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

您需要获取隐藏的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 })
  })
})