How to get name of the button element in Cypress

Question

I need to create a condition that if on a page is a button with the text value "Unblock", it's going to get clicked via Cypress in advance. The clicking part and "if" condition I can manage, I need to know how to get javascript to detect which button has that text value "Unblock", thanks!

 cy.get(".scroller").eq(1).find("button").then(($scroller) => { let test = $scroller //how to get the text value of the button? console.log(test) }) cy.wait(20000) cy.contains("Unblock").click() cy.wait(3000) cy.contains("Close").click() cy.contains("Back to main page").click()

Answer 1

1.You can use invoke('text') to get the button name:

cy.get('.scroller')
  .eq(1)
  .find('button')
  .invoke('text')
  .then((text) => {
    cy.log(text) //Logs button text
  })

2. Or You can also use the Jquery text() as well to get the button name:

cy.get('.scroller')
  .eq(1)
  .find('button')
  .then(($scroller) => {
    cy.log($scroller.text()) //Logs button text
  })

So in your case you can apply the if-else like this:

cy.get('.scroller')
  .eq(1)
  .find('button')
  .then(($scroller) => {
    if ($scroller.text().trim() == 'Unblock') {
      //Do Something
    } else {
      //Do Something
    }
  })

Answer 2

You can use cy.contains() , since it only returns the one button with the required text.

cy.contains("button", "Unblock")
  .then(($scrollerButton) => {
    console.log($scrollerButton.text())
  })