无法在 cypress 的动态下拉列表中选择值

Question

我正在尝试从以下网站上名为“国家/地区代码”的动态下拉列表中选择一个值 [此][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.get('#country_code').contains('+34')为cy.contains('+34')并且有效！

仅在页面底部的“门户”（实际上是 Vuetify ）中打开下拉列表后，选项才会添加到页面v-overlay-container。

使用cy.contains('+34')将在页面上的任何位置找到它，前提是文本是唯一的（它在此页面上！）

您需要这样做.click({force: true})，因为该项目位于列表底部下方，并且 Cypress 无法将其滚动到视图中（.scrollIntoView() 不起作用）。

cy.visit('https://pvg-test.instaging.net/register')

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

cy.contains('+34')
  .click({force: true})

cy.get('#country_code')
  .should('have.value', '+34')