Cypress browser tab renders css differently than non-Cypress controlled tab

[reposman33]

Hello,

I have a login page. It displays a username/ pw form and an empty navbar on top. When I succesfully authenticate by entering username / pw the navigation buttons and a Log out button are rendered in the navbar.

When I manually log in it's like this:

| |

Notice that after succesfully signing in, the buttons in the navbar are visible. I wrote a Cypress test doing just that. It fills in the username / pw, clicks the "Log in" button. Then it checks if the buttons are visible. But the navbar stays empty and the test fails.

The error message Cypress shows (after the built in 40000 ms delay):

Timed out retrying after 4000ms: expected '<button.button.is-danger.has-text-weight-bold>' to be 'visible'

This element <button.button.is-danger.has-text-weight-bold> is not visible because its parent <div.navbar-menu> has >CSS property: display: none

<button.button.is-danger.has-text-weight-bold> refers to the Log out button. It is the first in the list of buttons to test the visibility in the Cypress test. When I remove that button from the test and re-run the test, the next button triggers this error message.

I expect the navigation buttons and the Log out button to appear, as happens when I manually log in.

This is my html of the navbar

	<div class="navbar-menu" *ngIf="isAuthenticated">
		<div class="navbar-start">
			<div class="space mr-6"></div>

			<div class="navbar-item">
				<button
					class="button is-light is-outlined"
					routerLink="photos"
					data-cy="Toon Photos"
				>
					Toon Photos
				</button>
			</div>
			<div class="navbar-item">
				<button
					class="button is-light is-outlined ml-4"
					routerLink="albums"
					data-cy="Toon Albums"
				>
					Toon Albums
				</button>
			</div>
			<div class="navbar-item">
				<button
					class="button is-light is-outlined mx-4"
					routerLink="users"
					data-cy="Toon Users"
				>
					Toon Users
				</button>
			</div>
			<div class="navbar-item">
				<button
					class="button is-light is-outlined mr-4"
					routerLink="posts"
					data-cy="Toon Posts"
				>
					Toon Posts
				</button>
			</div>
		</div>
		<div class="navbar-end">
			<div class="navbar-item">
				<button
					class="button is-danger has-text-weight-bold"
					(click)="signOut()"
					data-cy="Log out"
				>
					Log out
				</button>
			</div>
		</div>
	</div>
</div>

this is the Cypress test:

describe('test login', () => {
	it('Log in Angular App', () => {
		cy.visit('http://localhost:4200')
		cy.login('[email protected]', '******')
		cy.get("[data-cy='Log out']").should('be.visible')
		cy.get("[data-cy='Toon Photos']").should('be.visible')
		cy.get("[data-cy='Toon Albums']").should('be.visible')
		cy.get("[data-cy='Toon Users']").should('be.visible')
		cy.get("[data-cy='Toon Posts']").should('be.visible')
	})
})

When I inspect the html using developer tools I see the property display: none on the div.navbar-menu element containing the buttons. This property is also present when I manually log in in a browser window but its children (div.menu-start and div.menu-end) have a property display: flex, overruling the parent's display: none and effectively showing the navigation and logout buttons.

Below the relevant html in the browser tab controlled by Cypress after the test is run:

Notice the css property display:none and the greyed-out children containing the buttons, meaning their css display property is not set.

Below the html rendered in Cypress controlled tab:

:

The navbar is empty.

Below the same html snippet after I manually logged in:

Notice the css property display:none but the children containing the buttons are not greyed-out, meaning their css display property is not none.

html rendered:

notice the buttons in the navigation bar

How can I have Cypress see these DOM elements and have the test succeed?

Cypress v8.3.0
Using the Bulma css framework v 0.9.3
Built with Angular 12.1.4
Firefox 91 used by Cypress and me