How to get element of show button

I want to Show and hide widget in my application using cypress but i didn't find element because there so many show and hide button here is the popup Screen shot which want to automate

I tried different ways but didn't working. i tried it with below code but didn't work

it('Click on Show button', () => {
cy.wait(5000)

cy.get('.form-row').find('input[value="Show"]').click()

})

I tried different ways i get it from class, id and attribute did not find any solution i am expecting to click on show button successfully

The easiest way to choose the right row .form-row is by the text Balance Change Alert using .contains().

cy.contains('.form-row', 'Balance Change Alert')  // whole row is selected
  .find('input[value="Show"]')                    // drill down to button
  .click()

Once you have the row, all it's elements are within it so you could use .within() if you have several steps:

cy.contains('.form-row', 'Balance Change Alert')
  .within(() => {     // all queries in here are limited to the required row
    
    cy.get('input[value="Hide"]').should('have.css', 'k-state-active')
    cy.get('input[value="Show"]').click()
    cy.get('input[value="Show"]').should('have.css', 'k-state-active')
  })

You can also add .contains() after .get() to act like a filter

cy.get('.form-row')
  .contains('Balance Change Alert')  
  .should('have.length', 1)            // only one row is returned
  .find('input[value="Show"]')
  .click()

Other options starting at the <label> are .closest() and .parents()

cy.contains('Balance Change Alert')   // selects the label
  .closest('.form-row')
  .should('have.length', 1)            // only one row is returned
  .find('input[value="Show"]')
  .click()

cy.contains('Balance Change Alert')   // selects the label
  .parents('.form-row')
  .should('have.length', 1)            // only one row is returned
  .find('input[value="Show"]')
  .click()

It would be helpful to know what you mean by "didn't work", what error message do you get exactly. From the piece of code you added, my suspicion is that it fails with this error: "cy.click() can only be called on a single element." Because this:

> cy.get('.form-row').find('input[value="Show"]')

will return you all the Show buttons. If you want to click only one of them, you have to narrow it down. The easiest way would be using eq() to specify which one do you want to click on. On your screenshot you have the second row highlighted, so for clicking on the Show button in the second row, us eq(1) (as indexing starts with 0), like this:

it('Click on Show button', () => { 
  cy.wait(5000)
  cy.get('.form-row').eq(1).find('input[value="Show"]').click()
})

You can use cy.parents() with a CSS selector to find the parent that contains both the text and the show/hide buttons. Note: cy.parents() yields a list, so we'll still need to do cy.eq()

cy.contains('Balance Change Alert')
  .parents('.form-row')
  .eq(0) // assumes we only find one parent that meets this criteria
  .find('input[value="Show"]')
  .click();

You can modify the cy.contains() to find the corresponding row, assuming that all other rows have similar HTML structure.