Cypress 在组件中测试道具答案

【问题标题】：Cypress testing props in componentCypress 在组件中测试道具
【发布时间】：2022-01-16 21:06:37
【问题描述】：

我目前正在使用 Cypress 进行集成测试，并且有一点我不知道如何以正确的方式解决（这意味着我不想使用 cypress 选择器工具来获得某个DOM 中的元素）

情况是我使用“内部”样式库，因此我的首选博客等有点受限。作为许多示例，我有一个如下所示的复选框：

                               <RadioButton
                                    left={{
                                        label: 'yes',
                                        value: true,
                                    }}
                                    right={{
                                        label: 'no',
                                        value: false,
                                    }}

                                />

所以，正如您想象的那样，如果我向这个组件添加一个 id，cypress 会找到一个元素，这使得事后无法要求“单击”其中一个元素来测试状态改变时会发生什么。

知道如何解决这个问题吗？

【问题讨论】：

您能否详细说明添加id 的问题？如您所说，如果您添加id，赛普拉斯将找到带有id 的元素。为什么不能点击呢？
我想说的是 cypress 会找到 ID，但这将是按钮的“容器”。为了能够点击其中一个，我需要更深入地告诉赛普拉斯点击“是”或“否”，我不知道这是否可能
我快速搜索了“cypress nested selectors”，发现了很多以前的问题stackoverflow.com/questions/56876330/…
这能回答你的问题吗？ How do I target a nested input that has no id attribute using Cypress?
标记为 dup

标签： reactjs cypress

【解决方案1】：

<RadioButton> 分为两个元素，一个带有“是”，另一个带有“否”。

要选择一个或其他子元素，请将 id 添加到容器中并使用 Cypress 调用的 Traversal 命令，也许是这样

cy.get('#radiobutton')  // select parent with id
  .children()           // both Yes and No sub-elements
  .eq(0)                // pick Yes
  .click()

检查网页的 DOM 以查看元素的确切形状。

【讨论】：