如何单击赛普拉斯下拉菜单中的所有选项？答案

【问题标题】：How do I click through all the options in the dropdown in Cypress?如何单击赛普拉斯下拉菜单中的所有选项？
【发布时间】：2020-08-06 14:57:46
【问题描述】：

我想点击下拉列表中的国家/地区，然后获取每个国家/地区的用户数量。当我点击下拉列表中的国家时，它会显示用户数量。我想我可以循环然后得到它们，但不知道该怎么做。我可以使用 for 循环并使用索引来点击元素或创建一个包含国家名称的数组并使用它们来点击吗？

<div class="dropdown-menu open" style="max-height: 222px; overflow: hidden;">
  <ul class="dropdown-menu inner" role="menu" aria-label="Dropdown" style="max-height: 222px; overflow-y: auto;">
    <li data-original-index="0" class="">
      <a tabindex="0" class="" style="" data-tokens="null">
        <span class="text">All countries </span>
        <span class="glyphicon glyphicon-ok check-mark"></span></a></li>
    <li data-original-index="1" class="">
      <a tabindex="0" class="" style="" data-tokens="null">
        <span class="text">Belgium</span>
        <span class="glyphicon glyphicon-ok check-mark"></span></a></li>
    <li data-original-index="2">
      <a tabindex="0" class="" style="" data-tokens="null">
        <span class="text">Sweden</span>
        <span class="glyphicon glyphicon-ok check-mark"></span></a></li>
    <li data-original-index="3">
      <a tabindex="0" class="" style="" data-tokens="null">
        <span class="text">Hungary</span>
        <span class="glyphicon glyphicon-ok check-mark"></span></a></li>
    <li data-original-index="4">
      <a tabindex="0" class="" style="" data-tokens="null">
        <span class="text">Germany</span>
        <span class="glyphicon glyphicon-ok check-mark"></span></a></li>
    </ul></div>

【问题讨论】：

标签： automation cypress

【解决方案1】：

请尝试以下方式获取元素集合并遍历包装的 jQuery 元素。详情请参考Cypress Iterate over an array of DOM elements。我不确定您是否可以在您提供的 DOM 上方找到唯一的类或 id，如果存在，请相应地更改 'div.dropdown-menu.open > ul > li> a > span.text' css 选择器。

在css选择器中添加类名时，如果类名中包含空格“ex:class name”，则将“空格”替换为“.” （例如：类名）。这看起来像 ('div.class.name > div.dropdown-menu.open > ul > li> a > span.text')

cy
  .get('div.dropdown-menu.open > ul > li> a > span.text')  //This will create countries element collection
  .each(($el, index, $list) => {
    //<<Add here the drop down expand element click action>>
    // $el is a wrapped jQuery element, wrap this element so we can use cypress commands on it
    cy.wrap($el).click()
  })

【讨论】：