Facing cypress error as"cy.click() failed because it requires a DOM element. The subject received was: > undefined" after .click( ) on button

Question

Facing cypress error as cy.click() failed because it requires a DOM element. The subject received was: > undefined" after .click( ) on button

it('with select tag test',function(){
    cy.visit('https://www.htse.net/')
    //pop up message window disappear 
    cy.wait(2000)
    cy.get('.splashPopUp.show > .modal-dialog > .modal-content > .close > span',{timeout: 30000})
    //cy.get(" div[class='splashPopUp modal fade show'] span[aria-hidden='true']")
    //cy.get("div[class='splashPopUp modal fade show'] button[aria-label='Close']")
    
    cy.wait(2000)
   .click()
    //.should('be.visible')
  // cy.click({ force: true })
   /*cy.on('window:alert',(str)=>{
       expect(strt).to,equal('Aloha!')
   })*/
    cy.contains('ALOHA e Komo Mai')
    cy.click({ force: true })
})

   


  

Answer 1

.click() is a child command , you need to click on something so it should be preceded by a command that returns an element, like .get(), .find(), etc.

Ref click command

Incorrect Usage

cy.click('.btn') // Errors, cannot be chained off 'cy'
cy.window().click() // Errors, 'window' does not yield DOM element

Looks like you want to click the 'X' top-right of modal,

cy.contains('div.modal-dialog', 'Where is all the inventory')
  .find('button.close')
  .click()               // don't use multiple!

You can even just click on the gray background

cy.get('div.splashPopUp')
  .click()

Answer 2

Thanks for guiding me, I applied your suggestions, pop up window disappeared from the home page but facing below mentioned error. Kindly give me some time for its solution also

CypressError

Timed out retrying after 4100ms: cy.click() failed because this element is not visible:

<button type="button" class="close" data-dismiss="modal" aria-label="Close">...</button>

This element <button.close> is not visible because its parent <div#exampleModal.splashPopUp.modal.fade> has CSS property: display: none

Fix this problem, or use {force: true} to disable error checking.Learn more

7 | cy.get('div.modal-dialog') 8 | .find('button.close')

9 | .click({ multiple: true }) | ^