Cypress can't find button in pop up modal

Question

I have a test that requries me to login but I need to be able to dismiss the cookies prompt first. I have an ID for the button and it is always visisble yet Cypress can never find it, why?

 cy.visit('/signin')
 cy.get('button[id="save"]').click() // Dismiss cookies prompt

Here is the button HTML:

<button _ngcontent-kbm-c55="" mat-button="" id="save" class="mat-focus-indicator solo-button mat-button mat-button-base mat-raised-button" tabindex="0" style="color: white; background-color: rgb(128, 70, 241);"><span class="mat-button-wrapper"><div _ngcontent-kbm-c55="" class="action-wrapper" style="font-size: 14px;"><span _ngcontent-kbm-c55="">Accept all cookies</span></div></span><span matripple="" class="mat-ripple mat-button-ripple"></span><span class="mat-button-focus-overlay"></span></button>

Error:

Timed out retrying after 10000ms: Expected to find element: button[id="save"], but never found it.

Answer 1

Assuming there are no shadow DOM's or Iframes you can use contains with the inner text of the button and click your button:

cy.contains('Accept all cookies').click()

A more better approach would be to use a combination of selector and innertext.

cy.contains('span', 'Accept all cookies').click()

In case of an iframe:

1. Install the cypress-iframe plugin

2. Add import 'cypress-iframe'; in your cypress/support/commands.js

3. You can add in the test:

cy.iframe('#frame-id').contains('Accept all cookies').click()