Top header gets hide in when running test in Cypress. Why is that happening. Kindly see the screenshots attached.

[bilal-bin-zafar]

[jennifer-shehane]

When opening an issue, please fill out the issue template provided - it requires necessary information we need to help you, like desired behavior, a reproducible example and the version of Cypress you are using.

This issue will be closed as per our contributing guidelines. Please comment in this issue with the required information from our issue template and we will reopen the issue.

[bilal-bin-zafar]

Current behavior:

Top header as in screenshots gets hide.

Desired behavior:

Top header should be visible in cypress

Test code to reproduce

it('Airbnb', function () {
  cy.visit('https://www.airbnb.com/');
  cy.get('._1spzot3').type('italy').click({ force: true })
  cy.wait(2000)
  cy.get('#Koan-query__option-0 > ._1825a1k > ._91tt0g').click({ force: true })
  cy.get('body > div:nth-child(7) > div > div > div > div._16grqhk > div._siy8gh > div > div._3hmsj > div > div > div > div > form > div > div._1wqpgwk > div:nth-child(3)').click({ force: true })
  cy.get('body > div:nth-child(7) > div > div > div > div._16grqhk > div._siy8gh > div > div._3hmsj > div > div > div > div > form > div > div._1wqpgwk > div:nth-child(3) > div > div > div > div > div > div > div._14676s3 > div._1foj6yps > div > div:nth-child(2) > div > table > tbody > tr:nth-child(4) > td:nth-child(4)').click({ force: true })
  cy.get('body > div:nth-child(7) > div > div > div > div._16grqhk > div._siy8gh > div > div._3hmsj > div > div > div > div > form > div > div._1wqpgwk > div:nth-child(3) > div > div._1w7uj89a > div > div > div > div > div._14676s3 > div._1foj6yps > div > div:nth-child(2) > div > table > tbody > tr:nth-child(5) > td:nth-child(6)').click({ force: true });
  cy.wait(5000)//.end();
  cy.get('._4poulv').click({ force: true })
  cy.get('#stepper-adults > button:nth-child(3)').click({ force: true })
  cy.get('#stepper-adults > button:nth-child(3)').click({ force: true }) // Selecting 2 adults
  cy.get('#stepper-children > button:nth-child(3)').click({ force: true }) // selecting 1 child
  cy.get('._m9v25n').click({ force: true }) // searching related result
  cy.wait(5000)
  //  cy.get('_14i3z6h').contains("Stays in Italy")
  // cy.log();
  cy.get('#menuItemButton-dynamicMoreFilters > ._1wc4ltr').click({ force: true })

  cy.get(':nth-child(6) > ._9fvlwj0').scrollIntoView()
  cy.wait(5000)
})

Versions

Chrome web latest with Cypress latest version.

[bilal-bin-zafar]

@jennifer-shehane Kindly reopen this issue. Thanks

[jennifer-shehane]

I'm unable to reproduce this from the code provided. Likely because the selectors are now out of date with airbrbs site. I would suggest targeting elements with a more unique identifier instead of a deeply nested identifier in general, as they tend to be very brittle - subject to any change on the website.

Please provide a reproducible example and we can reopen.