Search code examples
javascriptcss-selectorscypresscontainsautomation-testing

Cypress Automation - Cannot find button based on text

I am learning Cypress and have been automating various websites for the last few weeks. However, I am having issues clicking a button based on it's class or text value. (Supposed to be easy, I know)

The button does not have an id and has a long class name:

message-component message-button no-children focusable sp_choice_type_11 last-focusable-el

The following image shows the full element:

enter image description here

I have tried the following code:

 cy.contains('Accept All').click() 

 cy.get('#message-component message-button no-children focusable sp_choice_type_11 last-focusable-el').contains('Accept All').click();
        
cy.get('button').contains('Accept All').click()

However, it just gives the same error and cannot find the button.

I have already checked the documentation for cypress and followed some advice off this post:

Find by text content

I also thought it may be that it loads the button after 4 seconds, so i upped the "defaultCommandTimeout" to 7000. However, still no luck.

Does anyone have any ideas?

Much appreciated!

*** EDIT ****

Image of the error

enter image description here

Screenshot showing popup in cypress:

enter image description here

Solution

  • The 'Accept All' button is inside an iframe. So you have to first go inside the iframe and then perform the click.

    1. Install the cypress-iframe plugin using the command npm install -D cypress-iframe

    2. Go to cypress/support/commands.js and write import 'cypress-iframe';

    3. In your test write:

    cy.iframe('[title="SP Consent Message"]').find('button[title="Accept All"]').click()