cypress - This element is not visible

Question

i want to trigger a button after 150 seconds so i written a logic like this.

   ///<reference types="cypress"/>
describe("home test",function (){
    it('home',function (){
        cy.visit('http://localhost/SNL.Services.Application.Common.Service/v1/client?ccaTopNav=1&auth=inherit#news/home');
        cy.get('.header-button > .btn-default',{timeout:180000}).click({force: true});

        cy.intercept('POST', 'https://platform.midevcld.spglobal.com/apisvcs/logging-service/v1/AI/LogClientTelemetry?clientdate=1650881902895', {
            statusCode: 204
          }).as('lastXhr')

          cy.wait('@lastXhr')
          cy.contains('.header-button', 'REMIND ME LATER')
        
    })
})

my actual scenario: when i opened the localhost its takes time(65s) to open the popup so that i added a functionality to click the button after 150 seconds. in the (65 seconds) meantime it making some api call that is the delay for the 55s.

but after 55 th second it takes 5-10s to open the popup. that's where my Remind me button is located. but when the 55seconds completed its showing the few html elements(after that take 10 sec to show popup) in that it immedietly checking the selector so that my button click is not working as expected.

can anyone guide me how to make the click event on my scenario.

Answer 1

Try changing the order, intercept should always go at the top.

cy.intercept('POST', 'https://platform.midevcld.spglobal.com/apisvcs/logging-service/v1/AI/LogClientTelemetry?clientdate=1650881902895', 
  {statusCode: 204}
).as('lastXhr')

cy.visit('http://localhost/SNL.Services.Application.Common.Service/v1/client?ccaTopNav=1&auth=inherit#news/home');
cy.get('.header-button > .btn-default',{timeout:180000}).click({force: true});

cy.wait('@lastXhr')
cy.contains('.header-button', 'REMIND ME LATER')