'How to click on a button within a specific div based on button text?

In a Cypress test, I am trying to click a specific button nested inside a div, based on it's text.

Below is the HTML code I am testing:

<div class="mat-menu-content">
    <button>First button</button>
    <button>Second button</button>
</div>

I want to click the button with the Second button text.

I can't just use cy.contains('Second button') because Second Button text appears multiple places on the page.

Here's what I'm trying to write using Cypress:

Click the button inside mat-menu-content div that contains Second button text

Can someone please tell me how this can be done?

cypress

Solution 1:^[1]

You should first grab the element by class name and then search for contents, and finally invoke the click() method. Try something like this:

cy.get('.mat-menu-content').contains('Second button').click()

For more info, look here in the official doc

Solution 2:^[2]

.contains() is quite powerful and allows the use of a selector paired with text, cy.contains('selector', 'Your text').

For your scenario, you'll want to use the button selector paired with the text to get the button containing Second button.

cy.contains('button', 'Second button')

// or if there are multiple buttons with 'Second button' text on the page

cy.get('.mat-menu-content')
  .contains('button', 'Second button')

.contains() also allows for regex matching, which I prefer for finding with case insenstive.

cy.contains('button', /second button/i)

Solution 3:^[3]

One more variation, add .mat-menu-content ahead of the button selector

cy.contains('.mat-menu-content button', 'Second button')  // tighter criteria

Solution 4:^[4]

If you have multiple mat-menu-content on the webpage you can use eq to access a particular one and then use within() to scope your query within div.mat-menu-content

cy.get('mat-menu-content')
  .eq(0)
  .within(() => {
    //eq(0) points to the first occurance in the DOM
    cy.contains('button', 'Second button').click()
  })

Solution 5:^[5]

If you have multiple menus on the page, the item buttons are only displayed when the menu is open, and only one menu will be open at a time.

You can go ahead and just select the button with the text Second button after opening it's menu.

cy.contains('button', 'Contacts Menu').click()  // open the menu
cy.contains('button', 'Second button').click()  // select 2nd item

Solution 6:^[6]

As you want to do 'Click the button inside mat-menu-content div that contains Second button text' i suggest

cy.get('div.mat-menu-content button').contains('Second button').click()

Solution 7:^[7]

Here's a single get command that satisfies exactly what you want to do:

cy.get('div.mat-menu-content button:contains("Second button")'

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	jjhelguero
Solution 3	TesterDick
Solution 4	Alapan Das
Solution 5	kegne
Solution 6	Aravinth
Solution 7	Zaista

'How to click on a button within a specific div based on button text?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]