Cypress - How to select the sub menu from the menu with no class or id?-CodePudding

Below is the html that I am working on:
`

<li xpath="1">
                <a href="#" onclick="clearNewTabInvoiceDetails()" >Fruits<span ></span></a>
                <ul >
                 <li>
                <a href="/apple/Index" onclick="clearNewTabInvoiceDetails()" >
                    Apples
                </a>
            </li>
            <li>
                <a href="/mango/Index" onclick="clearNewTabInvoiceDetails()" >
                    Mangoes
                </a>
            </li>
            <li>
                <a href="/banana/Index" onclick="clearNewTabInvoiceDetails()" >
                    Pineapples
                </a>
            </li>
            </li>

<li xpath="1">
                <a href="#" onclick="clearNewTabInvoiceDetails()" >Drinks<span ></span></a>
                <ul >
                 <li>
                <a href="/coke/Index" onclick="clearNewTabInvoiceDetails()" >
                    Coke
                </a>
            </li>
            <li>
                <a href="/fanta/Index" onclick="clearNewTabInvoiceDetails()" >
                    Fanta
                </a>
            </li>
          </ul>

There are two menus with the same sub menu class which is . I want to select only one sub menu from ul which is id="main-nav. I want only the sub menus of fruits. I tried #main-nav li::nth-child(1) but, it's not working. There are two () I want to mark all the sub-menus of the first Image of sub menu

Please click here for more detail

CodePudding user response：

You can use the adjacent sibling selector in CSS to select an element of class sub-menu immediately preceded by an element with class fruit:

.fruit .sub-menu {
  color: red;
}

<li xpath="1">
  <a href="#" onclick="clearNewTabInvoiceDetails()" >Fruits<span ></span></a>
  <ul >
    <li>
      <a href="/apple/Index" onclick="clearNewTabInvoiceDetails()" >
                    Apples
                </a>
    </li>
    <li>
      <a href="/mango/Index" onclick="clearNewTabInvoiceDetails()" >
                    Mangoes
                </a>
    </li>
    <li>
      <a href="/banana/Index" onclick="clearNewTabInvoiceDetails()" >
                    Pineapples
                </a>
    </li>
  </ul>

  <li xpath="1">
    <a href="#" onclick="clearNewTabInvoiceDetails()" >Drinks<span ></span></a>
    <ul >
      <li>
        <a href="/coke/Index" onclick="clearNewTabInvoiceDetails()" >
                    Coke
                </a>
      </li>
      <li>
        <a href="/fanta/Index" onclick="clearNewTabInvoiceDetails()" >
                    Fanta
                </a>
      </li>
    </ul>