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

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

index您现在可以在命令中选择一个选项.select(index)：

cy.get('select').select(0)        // selects by index (yields first option) ie "What is this regarding?"
cy.get('select').select([0, 1])   // select an array of indexes

随着 cypress v8.5.0的发布，这应该很容易。请参阅文档了解更多信息。

Answer 3

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

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

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部分是我能找到的在选择中获取完整选项列表的唯一方法，它目前是我正在尝试处理的代码，尽管它工作正常。

Answer 5

因为工作答案正在使用 then 无论如何， 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 6

基于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用选定元素的值调用方法。