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");

使用量角器在angular js应用程序中单击菜单项

1 个答案: