无法使用赛普拉斯选择单选按钮值答案

【问题标题】：Failing to select Radio button value with Cypress无法使用赛普拉斯选择单选按钮值
【发布时间】：2021-03-30 01:45:42
【问题描述】：

我正在尝试使用 Cypress 选择单选按钮的（react-radio-buttons）值。但这似乎不起作用。

这是我的代码：

<Radio
  value={this.state.input.radio}
  onChange={(value) => this.updateInput("radio", value)}
  horizontal
  className="radioGroup"
  data-cy="radioButton"
>
  <RadioButton
    value="1"
    iconSize={20}
    padding={-1}
  ></RadioButton>
  <p>Yes</p>
  <RadioButton
    value="0"
    iconSize={20}
    padding={-1}
  ></RadioButton>
  <p>No</p>
</Radio>;

我正在尝试通过以下代码使用 data-cy 访问和更改值：

到目前为止，这条测试线正在运行：

cy.get("[data-cy=radioButton]").first().click()

但它不会改变值。

【问题讨论】：

标签： reactjs cypress

【解决方案1】：

data-cy 属性位于 <Radio> 而不是 <RadioButton>。我希望您需要向下导航到子元素并单击其中一个 - 尽管 cy.get("[data-cy=radioButton]").first().click() 正在工作，所以我没有看到完整的图片。

您有onChange={(value) => this.updateInput("radio", value)}，因此您可能还需要触发更改事件。

试试

cy.get("[data-cy=radioButton]")
  .children()
  .first()
  .click()
  .trigger('change');

【讨论】：

【解决方案2】：

尝试强制执行命令：

cy.get("[data-cy=radioButton]").first().click({force:true})

【讨论】：

为什么强制：true？
@NankerPhelge elge 因为 force: true 不会检查元素是否可点击或可见或被另一个元素覆盖，它会立即点击它而无需检查。
好的，但不是这些吗？
@NankerPelge 定位器不正确，如果要选择是，请尝试 cy.get("[value="1"]").first().click({force:true})单选按钮。
那么是可见性还是定位器错误，还是只是猜测？