Нажатие на пункт меню в угловом приложении js с помощью транспортира

Question

Левое меню приложения, которое я сейчас тестирую, длинное.И действия в приложении так зависят от этого меню навигации.Поэтому я попытался написать функцию, в которой входом будет пункт меню, а внутри функции будет щелкать этот элемент.

Меня смущает, как я могу установить переменную элемента так, чтобы я мог перебирать ее с именем пункта меню для навигации.

HTML-код приведен ниже

    <div class="left-sidebar-menu">
    <ul class="mainMenu nav navbar-nav side-nav scrollBoxContainer" tabindex="9999">
    <li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">

    <div routerlinkactive="activeMenu" tabindex="0"><i class="fa fa-home"></i> Home</div>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">

    <div routerlinkactive="activeMenu" tabindex="0"><i class="fa fa-users"></i> Family Dashboard</div>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">

    <div routerlinkactive="activeMenu" tabindex="0"><i class="fa fa-calendar"></i> Calendar</div>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">
    <span class="menu-group-name" style="background-color: rgb(125, 16, 125);">
       HR</span>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">

    <div routerlinkactive="activeMenu" tabindex="0"><i class="fa fa-user"></i> My HR</div>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">

    <div routerlinkactive="activeMenu" tabindex="0" class="activeMenu"><i class="fa fa-dollar"></i> Benefits</div>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">

    <div routerlinkactive="activeMenu" tabindex="0"><i class="fa fa-calendar-plus-o"></i> Events</div>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">

    <div routerlinkactive="activeMenu" tabindex="0"><i class="fa fa-newspaper-o"></i> Bulletin Board</div>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">

       <div routerlinkactive="activeMenu" tabindex="0"><i class="fa fa-book"></i> Literature</div>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">

       <div routerlinkactive="activeMenu" tabindex="0"><i class="fa fa-file-text-o"></i> Documents</div>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">
    <span class="menu-group-name" style="background-color: rgb(0, 114, 188);">
       Wellness</span>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">

       <div routerlinkactive="activeMenu" tabindex="0"><i class="fa fa-child"></i> Wellness Assessments</div>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">

       <div routerlinkactive="activeMenu" tabindex="0"><i class="fa fa-snowflake-o"></i> Wellness Programs</div>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">

       <div routerlinkactive="activeMenu" tabindex="0"><i class="fa fa-gift"></i> Wellness Challenges</div>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">

       <div routerlinkactive="activeMenu" tabindex="0"><i class="fa fa-trophy"></i> Rewards</div>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">

       <div routerlinkactive="activeMenu" tabindex="0"><i class="fa fa-television"></i> Digital Coaching</div>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">
    <span class="menu-group-name" style="background-color: rgb(27, 106, 12);">
       Health</span>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">

    <div routerlinkactive="activeMenu" tabindex="0"><img src="https://www.gogch.com/app/assets/img/gch_live_left_icon.png" class="benefit-menuicon"> Live</div>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">

       <div routerlinkactive="activeMenu" tabindex="0"><i class="fa fa-bar-chart"></i> Care Programs </div>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">

       <div routerlinkactive="activeMenu" tabindex="0"><i class="fa fa-heartbeat"></i> Vitals</div>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">

       <div routerlinkactive="activeMenu" tabindex="0"><i class="fa fa-user-md"></i> Health Profile</div>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">

    <div routerlinkactive="activeMenu" tabindex="0"><i class="fa fa-medkit"></i> Medications</div>

    </li><li class="mainMenu nav navbar-nav side-nav scrollBoxContainer">

    <div routerlinkactive="activeMenu" tabindex="0"><i class="fa fa-eyedropper"></i>  Immunizations</div>

    </li>
    </ul>

    </div>

Answer 1

Не уверен, что это было вашим смыслом, но вы можете сделать функцию, которая получает список элементов и фильтрует нужный элемент:

const menuItems = element.all(by.css('div[routerlinkactive="activeMenu"]');

const itemClick = (itemsList, itemString) => {
    itemsList.filter((item) => item.getText() === itemString).first().click();
};

itemClick(menuItems, "Home");