如何使用Cypress勾选modal-checkbox自定义复选框？

报错原因 #

Cypress的cy.check()方法仅支持原生<input type="checkbox">和<input type="radio">元素，你的目标是通过role="checkbox"模拟复选框的自定义<div>，因此直接调用check()会触发报错。

解决方案 #

根据自定义复选框的交互逻辑，选择以下任意一种方式实现勾选：

方法1：直接点击元素（最常用）

自定义复选框通常通过点击切换选中状态，直接调用click()后验证aria-checked属性：

cy.xpath("//div[@data-product-type='visa-platinum-credit card']//div[@role='checkbox']")
  .click()
  .should('have.attr', 'aria-checked', 'true')

方法2：模拟键盘空格键（符合无障碍规范）

由于元素设置了tabindex="0"支持键盘操作，可通过聚焦后按空格切换状态：

cy.xpath("//div[@data-product-type='visa-platinum-credit card']//div[@role='checkbox']")
  .focus()
  .type(' ')
  .should('have.attr', 'aria-checked', 'true')

方法3：验证类名变化（若组件用类标识选中状态）

如果组件通过添加特定类名（比如modal-checkbox--checked）来标记选中，可验证类名：

cy.xpath("//div[@data-product-type='visa-platinum-credit card']//div[@role='checkbox']")
  .click()
  .should('have.class', 'modal-checkbox--checked') // 替换为实际的选中类名

注意事项 #

优先选择符合真实用户操作的方式（点击/键盘操作），而非直接修改DOM属性，这样能更贴近真实测试场景。

内容的提问来源于stack exchange，提问作者jacksantho