How to test editing a field from Cypress todo app?

Question

I'm new to Cypress and I'm using their todo app example, I want to test the fact that we can edit a field ( double click on it, type, validate)

// 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')
  })
})

The error I have is that the field isn't typeable but I don't know why it isn't because when I take a look after the dbclick() the field is editable

How can I solve this issue ?

Answer 1

The error is coming because the .parent() element of your .contains('Pay electric bill') is a div, and not the input element you want.

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

Instead of using .parent(), try using .sibling('input').

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