如何从树选择中选择并获取所有元素并将它们放入列表中？

Question

我想从树选择中选择所有选项并将它们放入列表中，但当我检查元素时我只能看到选定的选项。其他元素我找不到，那么我怎样才能将它们放入列表中呢？

我要检查的列表在图片中，元素页面也在图片中。 源代码如下：

<div fragment="4924b46139" class="col-md-2">
   <label class="form-label">Grup</label>
   <div class="vue-treeselect vue-treeselect--single vue-treeselect--searchable vue-treeselect--has-value vue-treeselect--open-below" itemprop="groupName" isdefaultexpanded="true">
   <!---->       
      <div class="vue-treeselect__control">
        <div class="vue-treeselect__value-container">
           <div class="vue-treeselect__single-value">Tüm Gruplar</div>
           <div class="vue-treeselect__placeholder vue-treeselect-helper-zoom-effect-off vue-treeselect-helper-hide">Select Group
      </div>
   <div class="vue-treeselect__input-container"><input type="text" autocomplete="off" tabindex="0" class="vue-treeselect__input">
        </div>
           </div>
        <div class="vue-treeselect__x-container" title="Clear value">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.333 348.333" class="vue-treeselect__x">
            <path d="M336.559 68.611L231.016 174.165l105.543 105.549c15.699 15.705 15.699 41.145 0 56.85-7.844 7.844-18.128 11.769-28.407 11.769-10.296 0-20.581-3.919-28.419-11.769L174.167 231.003 68.609 336.563c-7.843 7.844-18.128 11.769-28.416 11.769-10.285 0-20.563-3.919-28.413-11.769-15.699-15.698-15.699-41.139 0-56.85l105.54-105.549L11.774 68.611c-15.699-15.699-15.699-41.145 0-56.844 15.696-15.687 41.127-15.687 56.829 0l105.563 105.554L279.721 11.767c15.705-15.687 41.139-15.687 56.832 0 15.705 15.699 15.705 41.145.006 56.844z">
            </path>
            </svg>
        </div>
        <div class="vue-treeselect__control-arrow-container">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 292.362 292.362" class="vue-treeselect__control-arrow">
                <path d="M286.935 69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952 0-9.233 1.807-12.85 5.424C1.807 72.998 0 77.279 0 82.228c0 4.948 1.807 9.229 5.424 12.847l127.907 127.907c3.621 3.617 7.902 5.428 12.85 5.428s9.233-1.811 12.847-5.428L286.935 95.074c3.613-3.617 5.427-7.898 5.427-12.847 0-4.948-1.814-9.229-5.427-12.85z">
                </path>
            </svg>
        </div>
    </div>
        <div class="vue-treeselect__menu-container" style="z-index: 999;"><!---->
        </div>
    </div>
</div>

图片中我添加的检查页面，突出显示的是我在下拉菜单中选择的页面。

当我展开选项菜单时，一个额外的 div 部分也会出现在那里，当我从那里选择一个选项时，div 部分也会随之消失。

我尝试了下面的代码，是的，我可以找到树选择和箭头，但我仍然找不到除了所选元素之外的其他元素：

const groups = dropdownMenuSelector[1].options[languageStrings]
        cy.get('.vue-treeselect.vue-treeselect--single')
            .find('div.vue-treeselect__control-arrow-container')
            .click()
            .wait(1000)
            .find('.vue-treeselect__value-container>div.vue-treeselect__single-value')
            .as('options')
            .then(options => [...options].map(option => option.innerText))
            .then(texts => groups.push(texts.toString()));
        cy.log(groups)

Answer 1

在命令运行之前不要尝试访问

groups

。

相反，通过将

cy.log(groups)

包装在

cy.then()

回调中来推迟它。

这允许您的测试在通过

groups

命令链修改后看到

cy.get('.vue-treeselect')

变量。

const groups = ...

cy.get('.vue-treeselect.vue-treeselect--single')ion => option.innerText))
  ...
  .then(texts => groups.push(texts.toString()))

// Use the modified groups variable after the above has run
cy.then(() => {
  cy.log(groups)
})