如何在柏树的选择元素内选择第n个项目

Posted 2023-02-15

【中文标题】如何在柏树的选择元素内选择第n个项目

【英文标题】：How to select nth item inside select element in cypress

【发布时间】：2018-11-17 22:38:03

【问题描述】：

假设我有 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 个选项，无论其值如何？

【参考方案1】：

2021 年更新

您现在可以在.select(index) 命令中通过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 的发布，这应该很容易了。请参阅documentation 了解更多信息。

【讨论】：

试过了，对我有用。谢谢。

【参考方案2】：

使用 ID 或类查找下拉菜单 -

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

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

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

这将点击下拉菜单的第一个元素。

【讨论】：

这救了我的命。谢谢！

【参考方案3】：

由于工作答案正在使用 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(););

【讨论】：

终于，一个可行的。就我而言：cy.wrap($recordings[0]).findByRole('button', name: 'Remove' ).click( force: true )

【参考方案4】：

更新

正如@dpstree 在 cmets 中所指出的，这并不能回答最初的问题。请查看更多最新答案以获得完整的解决方案。

原创

通过使用eq

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

【讨论】：

eq 是缩写吗？这是什么意思？

正如我链接的文档页面所述，该术语来自 jQuery。所以你可能对this post

感兴趣

这不会选择任何东西。它确实演示了作为解决方案一部分所需的 .eq() 语法，但忽略了需要操作选择的重要上下文。请参阅下面的 Robert 或 Miguel 的解决方案。

我的话，你是对的，我一定是读得太快了。将编辑指出这一点。

请记住，如果将此选择保存到变量中，它将不起作用。 const mySelection = cy.get('tbody>tr') ;我的选择.eq(0); mySelection.eq(1) --> 不会是第二个元素。你需要再次调用一个选择函数

【参考方案5】：

使用选择器捕获下拉列表中的所有元素。获取长度。使用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()
)

【参考方案6】：

假设你想选择第二个选项，你可以这样做

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

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

【参考方案7】：

基于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 方法。

【参考方案8】：

我遇到了同样的问题，并通过创建自定义 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 中获取完整选项列表的唯一方法，它目前是我正在尝试使用的代码位，尽管它工作正常。

【参考方案9】：

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

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

【讨论】：

对这个聪明的解决方案赞不绝口

正是我想要的，请注意，很快就会有一个更简单的解决方案github.com/cypress-io/cypress/issues/757。对@Robert 使用 cy.wrap() + parents() 不重复选择器的小建议：.eq(2).then(($el) => cy.wrap($el).parent('select').select($el.val())).