How to interact with hidden elements

// Store data in ./fixtures/todos.json
[
  { "id": 1, "name": "Eat", isComplete: true },
  { "id": 2, "name": "Sleep", isComplete: false },
  { "id": 3, "name": "Dream", isComplete: false }
]

// Add you custom command in here: support/commands.js
Cypress.Commands.add('seedAndVisit', (seedData = 'fixture:todos') => {
  cy.server()
  cy.route('GET', '/api/todos', seedData)
    .as('loadToComplete')
  cy.visit('/')
  cy.wait('@loadToComplete')
})

// Define your test here
describe('list item behaviour', () => {
  it('deletes an item', () => {
    cy.server()
    cy.route({
       method: 'DELETE',
       url: '/api/todos/*',
       response: {}
    }).as('delete')

    cy.seedAndVisit()

    // Make the delete icon visible so that you can then click it
    cy.get('.list-item').first().find('.delete').invoke('show').click()

    cy.wait('@delete')
    cy.get('.list-item').should('have.length', 2)
  })
})