Trouble in Cypress Automation: Unable to locate button using text-based search

Recently, I have been diving into learning Cypress and have spent the last few weeks automating different websites. However, I have encountered a challenge when trying to click a button based on its class or text value, which seems like it should be a simple task.

The button I am trying to interact with does not have an id and has a lengthy class name:

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

Refer to the image below for a visual of the complete element:

https://i.sstatic.net/sUrU8.jpg

Here are the different code snippets I have attempted:

 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()

Unfortunately, none of the above approaches worked, and the button remains elusive.

I have referenced the Cypress documentation and even sought advice from a post on Stack Overflow:

Find by text content

I also considered the possibility that the button loads after a delay of four seconds, so I increased the 

   "defaultCommandTimeout"
to 7000. However, this adjustment did not bring about any success.

If anyone has any suggestions or ideas, they would be greatly appreciated!

*** EDIT ****

Error message screenshot:

https://i.sstatic.net/O3Rcn.png

Cypress popup screenshot:

https://i.sstatic.net/3wOob.jpg

javascriptcss-selectorscypresscontainsautomation-testing

Answer №1

To access the 'Accept All' button, you need to navigate inside an iframe. This means you must first enter the iframe before clicking on the button.

  1. Begin by installing the cypress-iframe plugin using the following command: npm install -D cypress-iframe

  2. Next, navigate to cypress/support/commands.js and add the following line: import 'cypress-iframe';

  3. Finally, in your test script, include the following code:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jquery token selection dropdown box

I am not encountering any errors with this particular issue, however upon reviewing the plugin it appears that it should only toggle "admin admin" in the dropdown list. I am currently utilizing the most recent version of jquery. Upon further investigation ...

javascriptjqueryjsonpluginsjquery-tokeninput

Error encountered while executing jest tests due to an unexpected import token

Despite trying numerous solutions and suggestions on Stack Overflow, I am still unable to resolve the issue at hand. I recently discovered jest and attempted to use it by following a tutorial on testing React components with jest from DZone. However, when ...

javascriptreactjsjestjsbabel-jest

Clicking on buttons in the header does not lead to the intended section when scrolling

I have just completed a website project for a Udemy course, following all the instructions provided. However, I am facing an issue with the functionality of two buttons on my site. I want these buttons to scroll to specific sections when clicked. The "I&ap ...

javascriptjqueryhtmlcssscroll

How can we eliminate identical elements from an array in JavaScript and increment the count of other objects?

I currently have 1 object retrieved from local storage, but it seems to contain some duplicates. What is the easiest way to remove these duplicates? The array object I am working with is called "mainchart". function check() { for (let i = 0; i < main ...

javascriptarrays

``What are the steps to identify and retrieve variables from an Angular HTML template by utilizing Abstract Syntax Trees

I am currently working on a project in Angular that utilizes HTML and Typescript. My goal is to extract all the variables from the HTML templates of each component. For example, let's say I have an HTML component like this: <div *ngIf="value ...

javascriptangularabstract-syntax-tree

Exploring IP geolocation integration within Rails 3

I am looking to add a dynamic feature to my homepage that will display the location object closest to the reader's physical location. Currently, I have a Location model with longitude and latitude fields. My goal is to retrieve the location model obj ...

javascriptajaxruby-on-rails-3htmlgeolocation

locate missing Gutenberg block on map

/** * Custom Block: display-mobile-advertising * * This block registers a basic block with Gutenberg that renders and saves content without any interactivity. */ // Import CSS. import { TextareaControl } from '@wordpress/components'; import ...

javascriptphpreactjswordpresswordpress-gutenberg

Prevent sticky div from overlapping with footer

I currently have a social link menu that is fixed to the left side of my page, structured like this: <footer id="colophon"></footer> <div> <nav> <ul id="social"> <li>Link1</li> ...

javascripthtmlcss

Enhancing Child Elements with CSS - Evaluating Rating Systems

Is there a way to change the opacity of certain images inside my div when hovering over them? Specifically, I want the 4th image and the first three to have an opacity value of 1. I've looked into using nth-child but am unsure how to implement it for ...

javascriptjqueryhtmlcss

What is the best way to calculate the number of div elements with a specific class that are contained within parent div elements with another specific class?

Is there a way to count the number of elements with the class '.child' in each container and then add a sentence containing that count inside each container? <div class='container'> <div class='child'></di ...

javascriptjqueryhtml

Ways to verify the occurrence of a successful event following the execution of a save() operation on a model

Below is the snippet of code I am using to store extra properties in a model (specifically, the answer model) selectMedia: => # Post media to server @options.answer.id = @options.answer.get('_id') @options.answer.url = "/v1/answers/#{@o ...

javascriptajaxbackbone.jscoffeescript

Vuetify: Utilizing Time Range Inputs for Start and End Time

I am encountering some difficulty in identifying what I may have missed. I am dealing with 2 inputs: time, startTime, and endTime startTime <v-col cols="12" sm="6" md="2"> <v-menu ref="menu" ...

javascriptvue.jsinputvue-componentvuetify.js

Issue with button events not being triggered while working with dynamically created classes

I am facing an issue with three plus (+) buttons that are next to three separate tables built using DataTables. The problem arises because all the plus buttons were created in one location with DataTables, resulting in them being assigned the same classes ...

javascriptjqueryeventsdatatables

The Alert Component fails to display when the same Error is triggered for the second time

In the midst of developing a Website using Nuxt.js (Vue.js), I've encountered an issue with my custom Alert Component. I designed a contact form on the site to trigger a specialized notification when users input incorrect data or omit required fields ...

javascripthtmlcssvue.jsnuxt.js

Opt for Observable over Promise in your applications

I have implemented this function in one of my servlets: private setValues() { this.config.socket.on('config.weather', (values:any) => { console.log(values); } However, I would like to refactor it to something like this: private se ...

javascripttypescript

Activate the extended view of a Material-UI Accordion

When using Accordions to display editable entities, we often want to keep modified entities in the expanded state. Currently, we have had to duplicate functionality by lifting up the expanded state into the accordion wrapper to prevent any controlled <- ...

javascriptreactjsmaterial-uiaccordion

Tips for wrapping a function call that may occasionally involve asynchronous behavior to ensure it runs synchronously

I am dealing with a function that functions as follows: _setDataChunk: function (action) { var self = this; /* some code */ var data = self._getDataChunk(action); populateWidget(data); } Sometimes GetDataChunk cont ...

javascriptjqueryajaxasynchronous

Eliminate resistance on HTML components

Have you ever noticed that when you click on an HTML element, such as images, you can drag a "shadow version" of them around on the screen? For example, take the Stack Overflow logo. If you click and drag it, you'll see a dark version of the logo mov ...

javascripthtmlcss

The "Next" button fails to function after a replay has been completed

I created a small quiz app to practice my JS skills. Everything seems to be working fine, except for one issue - when I click on replay, the quiz box shows up but the 'Next' button stops functioning. There are no console errors and I'm strug ...

javascriptbootstrap-4

What is the best way to send an array of numbers by utilizing e.target.value and React useState Hooks?

Trying to update the numbers array by passing it into submitNumbers() and using an onChange event. Issue arises when trying to use useState() to handle the array. When attempting to log these constants while the code is running, they are returning as not ...

javascripthtmlreactjs