赛普拉斯 select 项来自不断增长的列表 (q-select)

Question

要进行一些测试，我需要为字段设置一个值。我在以最佳方式设置下拉列表时遇到了一些麻烦。其他套件似乎在带有下拉列表的套件完成之前就已经开始了。我正在遍历字段，每个字段都做了一个套件，特别是为了确保它们不是并行完成的。套件设置并检查字段。

droplist(quasar q-select)的情况是不知道有多少个选项，n个选项后，selection内容又增加了新的选项和旧的删除。这意味着如果您只是 select 包含所有选项的 div，如果您的价值在那个数量，它就会起作用。

现在我有一个下拉列表的自定义函数。每次按下向下箭头时，selection 都会向下移动，并在需要时将下一个选项添加到列表中。因此我一直需要获取内容。

Cypress.Commands.add('selectOption', (strOptionValue) => {
    function funcSelect (strOptionValue, iIndex) {
        cy.get('.q-select__options--content')
            .find('.q-item')
            .eq(iIndex)
            .then($oOption => {
                cy.wrap($oOption)
                    .find('[class=q-item__label]')
                    .then($oOptionLabel => {
                        const strListValue = $oOptionLabel.text();

                        cy.log('['+strOptionValue+']-['+strListValue+']');

                        if (strListValue === strOptionValue) {
                            cy.wrap($oOption)
                                .click();
                        } else {
                            cy.wrap($oOption)
                                .type('{downarrow}');

                            funcSelect(strOptionValue, iIndex + 1);
                        }
                    });
            });
    }

    funcSelect(strOptionValue, 0);
});

我认为不对的地方：使用索引。列表中的金额没有变化，现在它一直在检查整个列表。我认为应该可以做到：

循环列表
如果在最后一个没有找到，请点击下方
获取列表，
从第 2 步中获取项目
检查下一个
重复直到最后一个等等

有什么想法吗？

编辑：还有两个额外的挑战：一种。开始有时在项目总数的中间。向下箭头，在最后一个项目移动到第一个。这没关系，但这意味着您也需要在您最初开始的项目上进行突破。 b. 'arrowdown' 与单击的作用相同，它 select 是项目。我仍在检查，但在单击实际值之前继续测试循环可能会导致问题

Answer 1

我认为递归函数是正确的，但它需要 break-out 守卫来阻止无限递归。

然后我将获取 Cypress 当前可以选择的所有现有选项标签（即加载到 DOM）并查看搜索值是否在列表中。

由于列表每次递归都会更改，因此我会 re-query if/else 中的选项而不是换行。

最后，我会将递归调用链接到 .then() 中，因为 .type('{downarrow}') 发生在赛普拉斯命令队列上，您只想在该步骤完成后转到下一个调用。如果项目是从 API.

中获取的，您可能还想使用一个小的等待或使用一个拦截等待

function selectOption(searchForValue, attempt = 0) {

  if (attempt > 10 ) throw 'Too many attempts - item not found';

  cy.get('.q-select__options--content')
    .find('[class=q-item__label]')
    .then($labels => {
      const listValues = [...$labels].map(label => label.innerText)
      if (listValues.includes(searchForValue) {

        cy.contains('.q-select__options--content .q-item', searchForValue)
          .click()

      } else {

        cy.contains('.q-select__options--content .q-item', searchForValue)
          .type('{downarrow}')
          .then(() => {
            cy.wait(100) // or wait on an intercept alias if API involved
            selectOption(searchForValue, attempt + 1)
          })
      }
    })
}

selectOption(searchForValue);

顺便说一句，我认为 func 和 str 前缀在 1996 年正式弃用了 ;).

克服向下箭头的问题

根据您对 down-arrow 的评论，我在“标准”类星体 select 上试用了 1000 个项目。

有些 selector 需要调整，但原理有效。

function selectOption(searchValue, attempt = 0) {

  if (attempt > 100 ) throw 'Too many attempts - item not found';

  cy.get('.q-item__label')
    .then($labels => {
      const listValues = [...$labels].map(label => label.innerText)

      if (listValues.includes(searchValue)) {
        cy.contains('.q-item__label', searchValue).click()
      } else {

        const lastItem = listValues[listValues.length -1]
        cy.contains('.q-item__label', lastItem)
          .type('{downarrow}')
          .then(() => {
            selectOption(searchValue, attempt + 1)  // next batch
          })
      }
    })
}

const searchValue = '500'

cy.get('.q-field__append').click();         // open dropdown

selectOption(searchValue);                  // find value

cy.get('.q-field__control-container span')  // confirm value
  .should('have.text', searchValue)         // passes ✅

赛普拉斯 select 项来自不断增长的列表 (q-select)

Cypress select item from growing list (q-select)

javascript

dynamic-list

quasar

cypress