无法在赛普拉斯的动态下拉列表中选择值

Question

我是初学者，我正在尝试从以下网站上名为“国家代码”的动态下拉列表中选择值https://pvg-test.instaging.net/register [这个][1] 这里默认显示一个值 +1，其余值隐藏。

首先我尝试了，

cy.get('#country_code').select('+34')

但它没有用。

然后我试了，

cy.get('#country_code').eq(9).click()

连这个都不行。

接下来我尝试了

cy.get('#country_code').contains('+34').click()

这也失败了。

还建议选择菜单而不是在字段中键入数据，因为它不会帮助我理解其实现背后的根本概念，因为我也遇到了与静态下拉菜单类似的问题

请帮助，因为没有处理此类问题的博客。 提前谢谢你

Answer 1

为什么

cy.select()

不起作用？

cy.select()

选择位于

<option>

标签下方的

<select>

标签。在这种情况下，您正在使用的网站没有任何一个。

为什么

cy.get().eq().click()

不起作用？

cy.get()

将生成一个或多个与传入的选择器匹配的元素。

.eq()

允许您选择由

n+1th

或另一个赛普拉斯查询生成的

cy.get()

项。由于只有一个 id 为

country_code

的项目，因此尝试选择第 10 个项目将失败。

为什么

cy.get().contains().click()

不起作用？

cy.contains()

在前面的 Cypress 查询产生的元素下搜索。如果您要查找的元素不在该父项之下，则

.contains()

将不起作用。

那么，没有打字，什么会真正起作用？

单击

#country_code

元素后出现的列表项具有

v-list-item

类。 （我可以通过让 Cypress 单击

#country_code

，并使用运行程序查看该状态下网站的快照来看到这一点。）因此，我们只需单击

#country_code

字段，然后找到

.v-list-item 

包含我们想要的文本的元素，然后单击该元素。

cy.get('#country_code').click() // open dropdown window
cy.get('.v-list-item') // get list of options that have appeared
  .contains('+34') // find element with `+34` text
  .click()