柏树从生长列表中选择项目(q-select)

Question

要进行一些测试，我需要将字段设置为一个值。我很难用最好的方法设置下拉列表。其他套件似乎在带有下拉列表的套件完成之前就已经开始了。我在字段之间循环，每个字段都制作了一个套件，特别是为了确保它们不是并行完成的。套件设置并检查字段。

对于下拉列表(quasar q-select(，情况是我不知道有多少个选项，在n个选项之后，新选项被添加到选择内容中，旧选项被删除。这意味着，如果您只选择包含所有选项的div，那么如果您的值是这个数量，它就会起作用。

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

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);
});

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

1. 循环列表
2. 如果在最后一个位置未找到，请单击向下
3. 获取列表
4. 从步骤2中获取项目
5. 检查下一个
6. 重复到最后一个等等

有什么想法吗？

编辑：还有两个额外的挑战：a.起点有时在项目总量的中间。最后一项的向下箭头移动到第一项。这没关系，但这意味着爆发也需要在你刚开始的项目上。b."向下箭头"的作用与单击相同，它选择项目。我仍在检查，但在点击实际值之前继续测试周期可能会造成问题

Answer 1

我认为您使用递归函数是正确的，但它需要一个突破保护来停止无限递归。

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

由于列表会更改每次递归，所以我会在if/else中重新查询选项，而不是换行。

最后，我将在.then()中链接递归调用，因为.type('{downarrow}')发生在Cypress命令队列上，并且您只想在该步骤完成后转移到下一个调用。如果项目是从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);

---

BTW我认为func和str前缀在1996年被正式弃用；(。

---

克服向下箭头的问题

根据你对下箭头的评论，我在"；标准"；类星体选择1000个项目。

有些选择器需要调整，但原理是可行的。

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 ✅