Как мне просмотреть все варианты в раскрывающемся списке Cypress? - PullRequest
Новая
       101

Как мне просмотреть все варианты в раскрывающемся списке Cypress?

0 голосов
/ 06 августа 2020

Я хочу пролистать страны в раскрывающемся списке, а затем узнать количество пользователей в каждой. Когда я нажимаю на страну в раскрывающемся списке, отображается количество пользователей. Я думаю, что смогу oop пройти, а затем получить их, но не знаю, как это сделать. Могу ли я использовать для l oop и использовать индекс для перехода по элементам или создать массив с названиями стран и использовать их для перехода? 

<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>

1 Ответ

1 голос
/ 10 августа 2020

Пожалуйста, попробуйте следующий способ получить коллекцию элементов и перебрать обернутые jQuery элементы. Пожалуйста, обратитесь к Cypress Iterate по массиву элементов DOM для получения дополнительных сведений. Я не уверен, можете ли вы найти уникальный класс или идентификатор над предоставленной вами DOM, если он существует, измените соответственно селектор '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()
  })
...