0

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

DeltaRage
  • 119
  • 1
  • 3
  • 16

1 Answers1

1

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()
Alapan Das
  • 17,144
  • 3
  • 29
  • 52
  • Unfortunately, I still get the error – DeltaRage Oct 23 '21 at 10:20
  • Timed out retrying after 7000ms: Expected to find content: 'Accept All' within the selector: 'button' but never did. – DeltaRage Oct 23 '21 at 10:20
  • Please add the error screenshot for this. – Alapan Das Oct 23 '21 at 10:21
  • Edited answer with the image :) – DeltaRage Oct 23 '21 at 10:22
  • And you are sure that the pop-up with the ''Accept All' button is displayed inside cypress? If yes how about you try using `cy.get('button[title="Accept All"]').should('be.visible').click({force: true})`? – Alapan Das Oct 23 '21 at 10:25
  • Yes, I have added another screenshot into the edit. It shows, but the only thing I can think of is that the code is running before the button appears, but I have set the retry to 7 seconds. It shows in 1-2 at the most – DeltaRage Oct 23 '21 at 10:29
  • You can add more timeout as well if you think time out is the issue. `cy.get('button[title="Accept All"], {timeout: 10000}').should('be.visible').click({force: true})`. this is a timeout for 10 seconds. You can add more and check. – Alapan Das Oct 23 '21 at 10:29
  • That throws a syntax error: Syntax error, unrecognized expression: button[title="Accept All"], {timeout: 10000} – DeltaRage Oct 23 '21 at 10:33
  • Sorry my bad the syntax was wrong. here is the correct one `cy.get('button[title="Accept All"]', {timeout: 10000}).should('be.visible').click({force: true})`. – Alapan Das Oct 23 '21 at 10:33
  • It still does not work :( `Timed out retrying after 15000ms: Expected to find element: button[title="Accept All"], but never found it.` It is the autotrader website, maybe they are blocking something? www.autotrader.co.uk – DeltaRage Oct 23 '21 at 10:36
  • Ok, let me try locally. – Alapan Das Oct 23 '21 at 10:37
  • I have updated the answer. This should work. – Alapan Das Oct 23 '21 at 10:55
  • Thanks, this worked. How did you notice it was in an iframe? Im new to this so curious – DeltaRage Oct 23 '21 at 14:50
  • I inspected the element, and I saw that there is an iframe and inside that the `Accept All` button is there - https://imgur.com/7tzvrTD – Alapan Das Oct 23 '21 at 19:21