如何使用 cypress 单击带有标签名称的 select 菜单？

Question

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

我想做什么？

我有两个带有标签 label1 和 label2 的 select 菜单，我想单击带有标签“label2”的 select 菜单。

下面是代码，

<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”的第一个 select 菜单按钮

我希望它 select 用于“label2”。我该怎么做。有人可以帮我解决这个问题吗？谢谢。

Answer 1

由于您有多个带有 class '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');

Answer 2

你可以这样做：

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

首先找到带有文本的 label2 元素。然后使用 parent() 转到 box 父元素。然后使用 within 将下一个查询范围限定到具有 label2.

的第二个框中

Answer 3

cypress 中的最佳实践是我们在 web 上测试您可以控制，以便您可以将特定属性添加到 DOM

您可以添加多个选项

为特定的 select 或
添加一个 data-* 属性（cypress 在这里提到的最佳实践 https://docs.cypress.io/guides/references/best-practices#Selecting-Elements）

使用特定的 id 或数据-* 你可以轻松地 select 带有 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 遍历命令的组合 select 元素：https://example.cypress.io/commands/traversal.

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

如何使用 cypress 单击带有标签名称的 select 菜单？

How to click a select menu with label name using cypress?

cypress