如何在Codemirror编辑器中使用cypress .type（）进行键入？ [英] How to type using cypress .type() inside the codemirror editor?

问题描述

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

I am writing some cypress test for the Codemirror Editor. I have use cypress to type in the input field.

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

I am trying to achieve the cy.type() in the CodeMirror Editor. The Data I have in codemirror is inside the 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 Data'）

The cypress spec code cy.get('pre.CodeMirror-line') .type('Cypress HTML Data')

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

I am not able to type some data using cypress.

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

I would appreciate if someone can help?

推荐答案

您未在规范代码中定位正确的元素。您正在执行 cy.get（'pre.CodeMirror-line'），但是使用< pre> 标记不是 cy.type（）允许的元素。

You're not targeting the correct element in your spec code. You're doing cy.get('pre.CodeMirror-line'), but a <pre> tag is not a cy.type()-able element.

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

You need to get the hidden CodeMirror <textarea> instead. This can be selected using .CodeMirror textarea. The following JS is a demo spec that works on 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 })
  })
})

这篇关于如何在Codemirror编辑器中使用cypress .type（）进行键入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！