如何使用柏树单击带有标签名称的选择菜单？答案

【问题标题】：How to click a select menu with label name using cypress?如何使用柏树单击带有标签名称的选择菜单？
【发布时间】：2021-12-22 09:02:30
【问题描述】：

我想使用 cypress 单击带有标签名称的选择菜单。

我想做什么？

我有两个标签为 label1 和 label2 的选择菜单，我想点击标签为“label2”的选择菜单。

下面是代码，

<div class="Box">
    <label for="label1">label1</label>
    <div class="Select">
        <div class="Select_control">
        </div>
        <div class="Select_indicators">
            <button>
                <svg>
                    <title>down</title>
                </svg>
            </button>
        </div>
    </div>
</div>

<div class="Box">
    <label for="label2">label2</label>
    <div class="Select">
        <div class="Select_control">
        </div>
        <div class="Select_indicators">
            <button>
                <svg>
                    <title>down</title>
                </svg>
            </button>
        </div>
    </div>
</div>

我试过用

cy.get('.Select__indicators')
   .clickIconButtonByName('down');

但这会单击“label1”的第一个选择菜单的按钮

我希望它选择“label2”。我该怎么做。有人可以帮我解决这个问题。谢谢。

【问题讨论】：

标签： cypress

【解决方案1】：

你可以这样做：

cy.contains('label2')
  .parent()
  .within(() => {
    cy.get('.Select__indicators').clickIconButtonByName('down')
  })

首先找到带有文本的label2 元素。然后使用 parent() 转到 box 父元素。然后使用within 作用域将下一个查询放入具有 label2 的第二个框中。

【讨论】：

【解决方案2】：

由于您有多个元素具有“Select_indicators”类，它会找到具有该名称的两个 div。

我建议您改为给每个 div 一个唯一的 id

<div id="my_first_select" class="Select_indicators">
...
<div id="my_second_select" class="Select_indicators">
...

然后您可以改为搜索您要测试的特定对象

cy.get('#my_second_select').clickIconButtonByName('down');

【讨论】：

【解决方案3】：

cypress 的最佳实践是我们在您可以控制的网络上进行测试，以便您可以向 DOM 添加特定属性

您可以添加几个选项

为特定选择器添加 id
添加 data-* 属性（cypress 提到的最佳实践https://docs.cypress.io/guides/references/best-practices#Selecting-Elements）

使用特定的 id 或 data-* 您可以轻松选择带有 cy.get() 的元素。

<div id="firstSelect" class="Select_indicators">
<div class="Select_indicators" data-id="firstSelect">

cy.get('#firstSelect').click()
cy.get('[data-id=firstSelect]').click()

或者，如果无法添加 id 或 data-* 属性，您仍然可以使用cy.contains() 和此处列出的 cypress 遍历命令的组合来选择元素：https://example.cypress.io/commands/traversal。

但是以这种方式进行测试时，测试可能会变得不稳定，因为 UI 可以在开发过程中更改。

【讨论】：