Блог

Я пишу некоторый cypress тест для редактора Codemirror. Я использую cypress для ввода в поле ввода.

Я пытаюсь достичь cy.type() в редакторе CodeMirror. Данные, которые у меня есть в codemirror, находятся внутри диапазона.

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

Код спецификации cypress
cy.get(‘pre.CodeMirror-line’)
.type(‘Данные Cypress HTML’)

Я не могу ввести некоторые данные с помощью cypress.

Я был бы признателен, если кто-нибудь может помочь?

Вы не ориентируетесь на правильный элемент в своем коде спецификации. Вы делаете 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 })
  })
})