.should('not.have.css') assertion is passing even though the condition is false

Current behavior

I am trying to write a method which waits for the splash screen of my application to disappear before continuing.

The HTML in my app has a <div> element representing the splash screen which gains the attribute style='display:none;' when the app has loaded.

The <div> element has display: block;as default - I’m getting cypress to assert that this css has been removed but it seems to pass the assertion anyway for should('exist').and('not.have.css', 'display', 'block'):

The negative assert that begins with ‘expected undefined’ is happening because cypress is trying to access the next part of the test, elements that don’t exist, when I want it to wait until the splash screen is hidden

Furthermore there is a second .and() assertion which is never called here either.

Desired behavior

I would expect .and.('not.have.css', 'display', 'block') to keep retrying until the element does not have display: block;

Test code to reproduce

I can’t provide the HTML template of any code due to my organisation, but basically it is as follows: when the splash screen is displayed : <div id='pre-load-section'></div> // when app is loading (the ‘display’ style is set to ‘block’ as default) when the splash screen is not displayed <div id='pre-load-section' style='display:none;'> // when the app loads

My method in cypress:

export const SPLASH_PAGE_SELECTOR: string = 'div#pre-load-section';

export const ensureSplashPageNotDisplayed: () => void = () => {
  cy.get(SPLASH_PAGE_SELECTOR)
    .should('exist')
    .and('not.have.css', 'display', 'block')
    .and('have.css', 'display', 'none');
};

Versions

Cypress version: 6.3.0 Browser/version: Chrome 87 Operating System: macOS Big Sur 11.1

[jennifer-shehane]

Right now there doesn’t seem to be enough information to reproduce the problem on our end. We’ll have to close this issue until we can reproduce it. This does not mean that your issue is not happening - it just means that we do not have a path to move forward.

Please comment in this issue with a reproducible example and we will consider reopening the issue. Here are some tips for providing a Short, Self Contained, Correct, Example and our own Troubleshooting Cypress guide.

[mdodds93]

@bahmutov I have tried to create a new repo and set up a similar environment but cypress worked exactly as I would like it to (can’t believe I’m complaining about that).

Unfortunately, I would not be authorised by my organisation to share any of the app code with you on github