如何使用Cypress操作Material-UI Rating组件完成评分选中自动化测试

问题原因 #

Material-UI 的 Rating 组件默认将原生 <input> 元素隐藏，交互事件绑定在带有 role="radio" 属性的外层 <span> 节点上，而内部的星星图标默认设置了 pointer-events: none，所以直接点击图标、隐藏的 input 都无法触发正确的赋值逻辑。

可行实现方案 #

方案1：通过 aria-label 定位点击（推荐） #

直接点击对应星级的可交互单选节点，模拟真实用户操作：

// 选中5星评分
cy.get('[name="testrating"]')
  .find('[aria-label="5 Stars"]')
  .click();

// 验证赋值成功
cy.contains('The value is 5').should('be.visible');

方案2：通过索引定位点击 #

如果项目做了国际化导致 aria-label 文本变动，可以按索引选择对应星级的节点，索引从0开始计数：

// 选第5颗星，对应索引为4
cy.get('[name="testrating"]')
  .find('[role="radio"]')
  .eq(4)
  .click();

方案3：兜底强制触发更新 #

如果遇到特殊场景模拟点击无效，可以手动触发 change 事件赋值：

cy.get('[name="testrating"]').then($ratingEl => {
  const changeEvent = new Event('change', { bubbles: true });
  Object.defineProperty(changeEvent, 'target', {
    writable: false,
    value: { value: 5 }
  });
  $ratingEl[0].dispatchEvent(changeEvent);
});

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