I am encountering an error in Cypress when utilizing the condition with "pointer-events: none". How should I proceed to resolve this issue?

My goal is to test pagination by clicking on the Next button until it becomes disabled. Despite the code I used below, the Next button continues to be clicked even after it has the disabled class, resulting in an error being thrown by Cypress.

static pagination(){

    var index = 0 
    cy.get('li [data-test="page-link"]:not(.active):not([aria-label="Next"]) :not([aria-label="Previous"]').as("pages")
        cy.get('@pages').its('length').then( len =>{
            if(index <= len){
                cy.get('[data-test="page-link"][aria-label="Next"]').then( next=>{
                    cy.wrap(next).invoke('hasClass', 'disabled').then( classDisable =>{
                        if(classDisable==false){
                            cy.wait(500)
                            cy.wrap(next).should('not.have.class', 'disabled')
                            cy.wrap(next).click()
                        }
                             this.pagination()
                             index++
                    })
                })
                
            }
        })
    }

Answer №1

Perhaps this is the solution you seek

const maxPages = 10  // to prevent infinite loop 
                     // in case Next remains enabled (possibly due to app error)

function clickNext(nextClicks = 0) {

  if (nextClicks > maxPages) {
    throw "Maximum page clicks exceeded"
  }

  // use Cypress.$ to check disabled state
  const nextIsDisbaled = Cypress.$('[data-test="page-link"][aria-label="Next"]')
    .hasClass('disabled')
  if (nextIsDisabled) return

  cy.get('[data-test="page-link"][aria-label="Next"]').click()
  cy.wait(500)  // wait for page change or new element
  clickNext(++nextClicks)
}

clickNext()  // initiate clicking

It should function even if Next button is initially disabled.

Answer №2

There is a potential opportunity to bypass the need for the conditional check entirely.

If you manage to locate the number in the adjacent box labeled "Next" - my assumption is that utilizing .prev() should retrieve it, although some adjustment may be necessary.

Afterwards, you can trigger the click() function pageCount-1 times.

cy.get('[data-test="page-link"][aria-label="Next"]')
  .prev()                                                // last page box
  .invoke('text')
  .then(lastPageText => {
    const pageCount = +lastPageText;
    Cypress._.times(pageCount -1, () => {
      cy.get('[data-test="page-link"][aria-label="Next"]').click()
    })
  })

Answer №3

To click on a disabled button, you must include {force: true}

cy.wrap(next).click({force: true})

Alternatively, if you wish to check if the button is enabled before clicking, you can do the following:

cy.get('[data-test="page-link"][aria-label="Next"]').then(($next) => {
  if ($next.is(':enabled')) {
    //next button is enabled
    cy.wrap(next).click()
  } else {
    // Do something when next button is disabled
  }
})

Answer №4

Consider enabling the force parameter for the upcoming click action.

cy.wrap(next).click({ force: true} )

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

Reactively created menu using JQuery

Looking to implement a dynamic JQuery menu using React (ES6). Utilizing the JQuery menu examples (https://jqueryui.com/menu/) as a guide, however, those examples only cover static menus. It doesn't clarify how to modify menu items like updating labels ...

Converting various forms of data into arrays using JavaScript

I have a series of forms set up like this: <div class="well"> <form> <span class="remove pull-right"><i class="fa fa-times pointer"></i></span> <div class="form-group" style="margin:0"> ...

Looking to categorize and sum the values within an array of objects using JavaScript?

I'm looking to optimize this response data within my Angular application. res=[ { "url": "/page1", "views": 2 }, { "url": "/page2", "views": 1 }, { "url": "/page1", "views": 10 }, { "url": "/page2", "views": 4 }, { "url": "/page3", "views": 1 }, ...

Utilize Vue to access and read a file stored in the current directory

I am attempting to retrieve data from a text file that is located in the same directory as my .vue file. Unfortunately, I am encountering an issue where the content of the text file is not being displayed in both Chrome and Firefox. Instead, I am seeing th ...

Preventing Unwanted Scroll with jQuery

I'm currently working on a project where I have several description blocks that are meant to fade in when the corresponding image is clicked. The fading effect works fine, but there's an issue with the page scrolling up each time a new image is c ...

Error: The React component throws a TypeError because it is unable to read the property 'map' from an undefined source

I encountered the following error TypeError: Cannot read property 'map' of undefined at ListItemFactory.ts:84:57 at The specific line where the error occurs is: return announcementitems=json.value.map((v,i)=>( To provide mor ...

Preserve original formatting in CKEditor: Maintain source code indentation

My CKEditor configuration looks like this: var wysiwyg = ck.replace(el[0], { allowedContent: true, protectedSource: [/\r|\n/g] }); I'm inserting HTML source into CKEditor as: <div style='font-weight: bold;'> <div ...

Attempting to send JSX as a prop value

IMPORTANT UPDATE: Good news - the code is actually functioning correctly! The issue was caused by a header element obstructing the content, leading to confusion. Apologies for any misunderstandings! I am attempting to pass a simple <p> JSX tag as a ...

Using the Set function to compare distinct elements within different arrays

Update: After reviewing the link shared by faintsignal, it appears to be the most suitable answer. It not only clarifies why this behavior is happening but also provides a solution to the issue at hand. I am currently working with an array and trying to d ...

Using the 'onended' audio event emitter in Angular 2 along with a local member of the Component

I'm looking for assistance on how to utilize audio.onended() in order to play the next song in a playlist. I can successfully add songs to the playlist and play them using the above method with an audioObject. However, when audio.onended triggers, I ...

Load Jquery Ajax every second interval

I discovered this script on the W3 school website. <script> $(document).ready(function(){ setInterval(function(){ $("#div1").load("demo_test.txt"); }, 30000); // Load demo_test.txt every 30 seconds }); </script> The purpose of ...

Effortlessly saving money with just one click

I have a search text box where the search result is displayed in a graph and then saved in a database. However, I am facing an issue where the data is being saved multiple times - first time saves properly, second time saves twice, third time three times, ...

Tips for stopping ajax requests from automatically following redirects in jQuery

When utilizing the jQuery ajax functions to connect with a web service, I encounter an issue where the server redirects the response to a page with a 200 status code instead of providing a proper status code indicating an error. Unfortunately, I am unable ...

How can I integrate NIB into a project created with WebStorm 8 using node.js, Express, Jade, and Stylus?

Starting off with node.js, Express, Jade, Styl and NIB in WebStorm 8 has been a bit of a challenge. Unfortunately, WebStorm does not natively support NIB, so I have been looking into how to manually add it. Here is the sample app.js generated by WebStorm: ...

The only numbers that can be typed using Typescript are odd numbers

I am looking for a way to create a type in Typescript that can check if a value is an odd number. I have searched for solutions, but all I find are hardcoded options like odds: 1 | 3 | 5 | 7 | 9. Is there a dynamic approach to achieve this using only Types ...

"Switching to a new request in jqgrid will automatically cancel the current

I am using a jqgrid on my website to display data in JSON format retrieved from the server. The grid includes some blank cells which users can double-click on to update the data. However, I have encountered a problem where if I click too quickly on multipl ...

Tips for controlling the size of a canvas element: setting minimum and maximum width and height properties

function convertImageResolution(img) { var canvas = document.createElement("canvas"); if (img.width * img.height < 921600) { // Less than 480p canvas.width = 1920; canvas.height = 1080; } else if (img.width * img.he ...

Monitor the status of an AJAX request for fetching JSON data in a Rails application

My JS code fetches JSON data from a controller method in a Rails app: $.ajax({ xhr: function() { var xhr = $.ajaxSettings.xhr(); xhr.onprogress = function(e) { if (e.lengthComputable) { console.log(e.loaded ...

Collaborate and reuse Typescript code across various Node projects

Imagine we have a project structured like this: webapps ProjectA SomeClass.ts Package.json ProjectB SomeClass.ts Package.json Common LoggingClass.ts Package.json The Common "LoggingClass" needs to import a module from NPM. Let's say that ...

Troubleshooting Problems with Cookie and Session Management

I'm encountering an issue while trying to set cookies and session values during login on the backend, which is built in node js. However, when react calls the API to verify these cookies or session values, they are returning as undefined... My middle ...