Необходимо проверить, какой UL установлен для теста Cypress

Question

Я новичок в Cypress, у меня есть тестовое приложение React, которое я также изучаю, которое, в зависимости от того, вошел ли пользователь в систему или нет, отображает соответствующий набор параметров главного меню, что я могу не могу понять, как проверить, какой UL отображается?

Код ниже для всего меню components

navbar. js

import React from 'react';
import LoggedInLinks from './linksLoggedIn';
import LoggedOutLinks from './linksNotLoggedIn';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

const Navbar = (props) => {
  const { auth, profile } = props;
  const links = auth.uid ? <LoggedInLinks profile={ profile } /> : <LoggedOutLinks />;

  return (
    <nav className="nav-wrapper grey darken-3">
      <div className="container">
        <Link id="logo" to='/' className="brand-logo">TM's ToDos</Link>
        { links }
      </div>
    </nav>
  )
}

const mapStateToProps = (state) => {
  return {
    auth: state.firebase.auth,
    profile: state.firebase.profile
  }
}

export default connect(mapStateToProps)(Navbar);

linksLoggedIn. js

import React from 'react';
import { NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
import { logOut } from '../../store/actions/authActions'

const LoggedInLinks = (props) => {
  const user = props.profile.firstName  + ' ' + props.profile.lastName;
  const hasInitials = props.profile.isEmpty ? null : 
        <li id="initials" className="btn btn-floating pink lighten-1" style={ { marginTop: 0.8 + 'em'} } title={ user } >
          { props.profile.initials }
        </li>;

  return (
    <div>
      <ul id="loggedInLinks" className="right">
        <li>
          <NavLink to='/addTodo'>Add a new item</NavLink>
        </li>
        <li>
          <a id="logoutLink" onClick={ props.logOut } href="/Login">Logout</a>
        </li>
        { hasInitials }
      </ul>
    </div>
  )
}

const mapDispatchToProps = (dispatch) => {
  return {
    logOut: () => dispatch(logOut())
  }
}

export default connect(null, mapDispatchToProps)(LoggedInLinks);

linksNotLoggedIn. js

import React from 'react'
import { NavLink } from 'react-router-dom'

const LoggedOutLinks = () => {
  return (
    <div>
      <ul id="loggedOutLinks" className="right">
        <li>
          <NavLink id="navRegLink" to='/register'>Register</NavLink>
        </li>
        <li>
          <NavLink id="navLoginLink" to='/login'>Login</NavLink>
        </li>
      </ul>
    </div>
  )
}

export default LoggedOutLinks;

Как вы Я вижу, что у каждого UL есть свой собственный идентификатор, поэтому в моем тесте мне нужно определить, какие меню отображаются для моих тестов «Вход» в качестве теста, который у меня есть в данный момент, после того как я вошел в систему, остальные тесты не пройдут как Мне нужно выйти из системы для всех остальных.

Тест

describe('Reg now link click', function () {
    it('Reg link click', function () {
        // cy.clearLocalStorage() 
        // cy.clearCookies()  
        cy.visit('/')
        //var abc = document.getElementById("logoutLink").style.display;
        // var abc = window.getComputedStyle(document.getElementById("logoutLink"), null).getPropertyValue('display')
        // console.log('1', abc)
        // if (cy.contains('ul', 'Logout')) {
        //     cy.get('#logoutLink').click()
        // } else {}

        // cy.get("body").then($body => {
        //     if ($body.find("#Logout").length > 0) {
        //         //evaluates as true if button exists at all
        //         cy.get("#Logout").then($header => {
        //             if ($header.is(':visible')) {
        //                 console.log('1')
        //                 //you get here only if button EXISTS and is VISIBLE
        //             } else {
        //                 console.log('2')
        //                 //you get here only if button EXISTS but is INVISIBLE
        //             }
        //         });
        //     } else {
        //         console.log('3')
        //         //you get here if the button DOESN'T EXIST
        //         //assert.isOk('everything', 'everything is OK');
        //     }
        // });


        cy.get('#navLoginLink').click()
        cy.get('#regNowLink').click()
        cy.url().should('include', '/register')
    })
})

describe('Successful login', function () {

    it('Successful login', function () {
        // cy.clearLocalStorage() 
        // cy.clearCookies()  
        cy.visit('/')
        cy.get('#navLoginLink').click()
        cy.get('#email').type('user2@test.com')
        cy.get('#password').type('Password10')
        cy.get('#loginButton').click()
        cy.get('.dashboard').should('be.visible')
    })
})

describe('Unsuccessful login', function () {
    it('Unsuccessful login', function () {
        // cy.clearLocalStorage() 
        // cy.clearCookies()  
        cy.visit('/')

        // if (cy.contains('ul', 'Logout')) {
        //     cy.get('#logoutLink').click()
        // } else { }

        // cy.get("body").then($body => {
        //     if ($body.find("#Logout").length > 0) {
        //         //evaluates as true if button exists at all
        //         cy.get("#Logout").then($header => {
        //             if ($header.is(':visible')) {
        //                 console.log('3.1')
        //                 //you get here only if button EXISTS and is VISIBLE
        //             } else {
        //                 console.log('3.2')
        //                 //you get here only if button EXISTS but is INVISIBLE
        //             }
        //         });
        //     } else {
        //         console.log('3.3')
        //         //you get here if the button DOESN'T EXIST
        //         //assert.isOk('everything', 'everything is OK');
        //     }
        // });

        cy.get('#navLoginLink').click()
        cy.get('#email').type('user2@test.com')
        cy.get('#password').type('Password123')
        cy.get('#loginButton').click()
        cy.wait(2000)
        cy.get('#errorMsg').should('be.visible')
    })
})

Закомментированный код - это то, что я пробовал, но не могу работать как style строка возвращается как null