如何在Angular Storybook中通过play函数点击单选按钮？

你之前的实现存在两个关键问题：

• userEvent.selectOptions是专门用于下拉选择框（如<select>）的API，不适用于单选按钮组件
• 自定义role的使用不符合ARIA规范，且增加了不必要的复杂度

以下是两种可行的正确实现方式：

方法一：直接查找目标单选按钮并点击 #

利用Angular Material生成的原生ARIA属性，或者通过按钮的value/文本内容定位，然后用userEvent.click触发选择：

修正后的Play函数 #

play: async ({ canvasElement }) => {
  const canvas = within(canvasElement);

  // 方式1：通过单选按钮的显示文本查找
  const trainingRadio = canvas.getByRole('radio', { name: 'Insurance' });
  await userEvent.click(trainingRadio);

  // 或者方式2：通过value属性结合单选组查找
  // const radioGroup = canvas.getByRole('radiogroup');
  // const trainingRadio = within(radioGroup).getByRole('radio', { value: 'TRAINING' });
  // await userEvent.click(trainingRadio);
},

对应的HTML（推荐使用标准ARIA role） #

不需要自定义role，Angular Material会自动生成正确的ARIA属性：

<mat-radio-group formControlName="issueType">
  <mat-radio-button value="TRAINING">Insurance</mat-radio-button>
  <mat-radio-button value="FOLLOWUP">System</mat-radio-button>       
</mat-radio-group>

方法二：通过Angular表单控件直接设置值（更适合表单场景） #

如果组件绑定了Angular表单控件，可以直接操作表单控件设置值，模拟用户选择：

play: async ({ canvasElement }) => {
  const canvas = within(canvasElement);
  // 给单选组添加测试ID方便定位组件实例
  const radioGroup = canvas.getByTestId('issue-type-group');
  const componentInstance = radioGroup.componentInstance;
  
  // 直接设置表单控件值
  componentInstance.form.get('issueType').setValue('TRAINING');
  // 等待UI同步更新
  await waitFor(() => expect(componentInstance.form.get('issueType').value).toBe('TRAINING'));
},

对应的HTML（添加测试ID） #

<mat-radio-group formControlName="issueType" data-testid="issue-type-group">
  <mat-radio-button value="TRAINING">Insurance</mat-radio-button>
  <mat-radio-button value="FOLLOWUP">System</mat-radio-button>       
</mat-radio-group>

关键注意事项 #

• 优先使用原生ARIA role（radiogroup、radio）定位元素，避免自定义role破坏可访问性
• 单选按钮的交互必须用userEvent.click，不能用针对下拉框的selectOptions
• 绑定Angular表单的场景下，直接操作表单控件是更可靠的测试方式

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