React中同data-testid单选按钮的Playwright选择器问题排查

你的选择器data-testid=modal >> data-testid=value-card-receiver-type-radio-button >> visible=true会匹配到两个单选按钮元素（Myself和Someone else），调用check()方法时，Playwright无法确定要操作哪一个，因此抛出错误。

以下是几种可行的修正方案：

• 通过value属性定位
  利用单选按钮的value属性区分目标元素，"Someone else"对应的value为someoneElse，修改定位器如下：

  this.someoneElseButton = page.locator(
    "data-testid=modal >> data-testid=value-card-receiver-type-radio-button[value='someoneElse'] >> visible=true"
  );
  

• 通过aria-label定位
  元素带有明确的aria-label属性，可直接用该属性筛选目标：

  this.someoneElseButton = page.locator(
    "data-testid=modal >> data-testid=value-card-receiver-type-radio-button[aria-label='Someone else'] >> visible=true"
  );
  

• 结合文本标签定位
  通过关联的文本标签反向定位对应的单选按钮：

  this.someoneElseButton = page.locator(
    "data-testid=modal >> span:text('Someone else') >> .. >> input[type='radio']"
  );
  

  其中>> ..表示向上选取父元素，再定位到对应的input单选按钮。

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