如何测试从 Cypress todo 应用编辑字段？

Question

我是 Cypress 的新手，我正在使用他们的 todo app 示例，我想测试我们可以编辑字段的事实（双击它，输入，验证）

// use the example from Cypress for the todo app

describe('example to-do app', () => {
  beforeEach(() => {
    cy.visit('https://example.cypress.io/todo')
  })

  it('can edit a todo items', () => {
    // add it
    cy.contains('Pay electric bill')
        .parent()
        .dblclick()
        .type(' v2')
        .type('Cypress.io{enter}')


    // control it
    cy.get('.todo-list li')
        .should('have.length', 2)
        .last()
        .should('have.text', 'Pay electric bill v2')
  })
})

我遇到的错误是该字段不可输入，但我不知道为什么不能输入，因为当我查看 dbclick() 字段时，该字段是可编辑的

我该如何解决这个问题？

Answer 1

出现错误是因为您的 .contains('Pay electric bill') 的 .parent() 元素是 div，而不是您想要的 input 元素。

<div class="view">
  <input class="toggle" type="checkbox">
  <label>Pay electric bill</label>
  <button class="destroy todo-button"></button>
</div>

而不是使用 .parent()、try using .sibling('input').

cy.contains('Pay electric bill')
        .siblings('input')
        .dblclick()
        .type(' v2')
        .type('Cypress.io{enter}')

如何测试从 Cypress todo 应用编辑字段？

How to test editing a field from Cypress todo app?

cypress