用法：

Question

说我有HTML：

<select name="subject" data-testid="contact-us-subject-field">
  <option value="What is this regarding?">What is this regarding?</option>
  <option value="Partnerships">Partnerships</option>
  <option value="Careers">Careers</option>
  <option value="Press">Press</option>
  <option value="Other">Other</option>
</select>

选择具有已知值的选项，例如“职业”，就像以下一样简单：

cy.get('[data-testid="contact-us-subject-field"]').select('Careers');

如何在此字段中选择第n个选项，无论的值是什么？

Answer 1

使用eq

cy.get('tbody>tr').eq(0)    // Yield first 'tr' in 'tbody'
cy.get('ul>li').eq(4)       // Yield fifth 'li' in 'ul'

Answer 2

在选择第n个option的特定上下文中，这可能是适当的：

cy.get('select[name=subject] > option')
  .eq(3)
  .then(element => cy.get('select[name=subject]').select(element.val()))

Answer 3

基于Miguel Rueda的解决方案，但使用了prevSubject选项：

Cypress.Commands.add(
  'selectNth',
  { prevSubject: 'element' },
  (subject, pos) => {
    cy.wrap(subject)
      .children('option')
      .eq(pos)
      .then(e => {
        cy.wrap(subject).select(e.val())
      })
  }
)

用法：

cy.get('[name=assignedTo]').selectNth(2)

说明：

使用children('option')和.eq(pos)将select的子代遍历到特定元素。
使用所选元素的值调用select方法。

Answer 4

我遇到了同样的问题，并通过创建一个自定义的cypress命令解决了它。没有我想要的那么漂亮，但是确实做到了。

Cypress.Commands.add("selectNth", (select, pos) => {
  cy.get(`${select} option +option`)
    .eq(pos)
    .then( e => {
       cy.get(select)
         .select(e.val())
    })
})

然后我在测试中就这样使用

    cy.viewport(375, 667)
      .selectNth("customSelector", 3)

option +option部分是我可以找到的在select内获取完整选项列表的唯一方法，尽管它可以很好地工作，但这是我目前正在尝试的一些代码。

Answer 5

假设您要选择第二个选项，您可以通过此简单操作完成

cy.get("select option").eq(2)

请记住，cy.get()的工作方式类似于jquery的$()。

Answer 6

使用选择器捕获下拉菜单中的所有元素。得到长度。使用math.random()随机获得一个数字。选择索引处的选项。

cy.get("ul > li").as("options")
cy
.get("@options")
.its('length')
.then(len => Math.floor(Math.random() * Math.floor(len)))
.then((index) => {
cy.get("@options").eq(index).click()
})

Answer 7

因为无论如何都在使用有效答案，所以eq或类似的东西对于数组索引来说是多余的...

// to click on the 1st button
cy.get('button').then($elements => {cy.wrap($elements[0]).click();});
// to click on the 4th tr
cy.get('tr').then($elements => {cy.wrap($elements[3]).click();}); 
// to click on the last div:
cy.get('div').then($elements => {cy.wrap($elements[$elements.length - 1]).click();});

Answer 8

使用 ID 或类查找下拉列表 -

cy.get('#ID').contains("dowpdown placeholder or name").click();

点击下拉结果下拉元素会弹出后，使用inspect元素找到结果ID或Class，然后-

cy.get('#result-ID').children().first().click();

这将点击下拉列表的第一个元素。

如何选择cypress中select元素中的第n个项目

8 个答案:

用法：

说明：