使用Cypress+TypeScript无法选中对话框内单选按钮求助

我用Cypress结合TypeScript做自动化测试时，没法点击或选中对话框里的单选按钮，对应的HTML结构如下：

<div _ngcontent-ng-c3278589420="" class="dialog-container">
  <div _ngcontent-ng-c3278589420="" class="content-container">
    <div _ngcontent-ng-c3278589420="" class="title">Change the current stop sequence?</div>
    <div _ngcontent-ng-c3278589420="" class="content">
      <span _ngcontent-ng-c3278589420="" class="supporting-text"> With the addition of the new stop(s) on an existing route, would you like to- </span>
      <mat-radio-group _ngcontent-ng-c3278589420="" role="radiogroup" class="mat-mdc-radio-group radio-buttons">
        <mat-radio-button _ngcontent-ng-c3278589420="" value="1" ngdefaultcontrol="" class="mat-mdc-radio-button mat-accent ng-untouched ng-pristine ng-valid" id="mat-radio-38">
          <div mat-internal-form-field="" class="mdc-form-field mat-internal-form-field">
            <div class="mdc-radio">
              <div class="mat-mdc-radio-touch-target"></div>
              <input type="radio" class="mdc-radio__native-control" id="mat-radio-38-input" name="mat-radio-group-36" value="1" tabindex="0">
              <div class="mdc-radio__background">
                <div class="mdc-radio__outer-circle"></div>
                <div class="mdc-radio__inner-circle"></div>
              </div>
              <div mat-ripple="" class="mat-ripple mat-radio-ripple mat-mdc-focus-indicator">
                <div class="mat-ripple-element mat-radio-persistent-ripple"></div>
              </div>
            </div>
            <label class="mdc-label" for="mat-radio-38-input"> Keep the existing sequence number of the current stops. </label>
          </div>
        </mat-radio-button>
        <mat-radio-button _ngcontent-ng-c3278589420="" value="2" ngdefaultcontrol="" class="mat-mdc-radio-button mat-accent ng-untouched ng-pristine ng-valid" id="mat-radio-39">
          <div mat-internal-form-field="" class="mdc-form-field mat-internal-form-field">
            <div class="mdc-radio">
              <div class="mat-mdc-radio-touch-target"></div>
              <input type="radio" class="mdc-radio__native-control" id="mat-radio-39-input" name="mat-radio-group-36" value="2" tabindex="0">
              <div class="mdc-radio__background">
                <div class="mdc-radio__outer-circle"></div>
                <div class="mdc-radio__inner-circle"></div>
              </div>
              <div mat-ripple="" class="mat-ripple mat-radio-ripple mat-mdc-focus-indicator">
                <div class="mat-ripple-element mat-radio-persistent-ripple"></div>
              </div>
            </div>
            <label class="mdc-label" for="mat-radio-39-input"> Adjust the sequence of current stops </label>
          </div>
        </mat-radio-button>
      </mat-radio-group>
    </div>
  </div>
  <div _ngcontent-ng-c3278589420="" class="buttons">
    <div _ngcontent-ng-c3278589420="" class="green-text-btn">Cancel</div>
    <div _ngcontent-ng-c3278589420="" class="orange-text-btn disabled-text-btn"> Add Stops </div>
  </div>
</div>

我试过以下几种写法，但都没效果：

• 写法1：

cy.get('mat-radio-group > mat-radio-button[value="1"] input[type="radio"]') 
  .find('input[type="radio"]') 
  .check({ force: true }); 

• 写法2：

cy.get("mat-radio-group > mat-radio-button")
  .first()
  .check({ force: true }); 

• 写法3：

cy.get('input[type="radio"][value="2"]')
  .first()
  .check({ force: true }); 

• 写法4：

cy.get('input[type="radio"][value="2"]')
  .check({ force: true }); 

• 写法5：

cy.get('[value="1"]')
  .first()
  .check({ force: true }); 

我已经加了足够的等待时间，还是找不到并选中单选按钮，求解决办法。

可行的解决思路 #

1. 点击单选按钮的外层容器或标签

Angular Material的单选按钮交互通常绑定在外层的mat-radio-button或label元素上，直接操作底层input可能被遮挡，试试：

// 通过文本定位标签并点击
cy.contains('label.mdc-label', 'Keep the existing sequence number of the current stops.')
  .click({ force: true });

// 或者通过value定位mat-radio-button组件
cy.get('mat-radio-button[value="1"]')
  .click({ force: true });

2. 确保对话框完全可见后再操作

用Cypress的断言强制等待对话框加载完成，避免元素未就绪：

// 等待对话框容器可见
cy.get('.dialog-container').should('be.visible');

// 点击单选按钮的点击区域
cy.get('mat-radio-button[value="2"] .mdc-radio')
  .click({ force: true });

3. 手动设置选中状态并触发change事件

如果check()方法无效，可以直接修改input的checked属性并触发Angular需要的change事件：

cy.get('input.mdc-radio__native-control[value="1"]')
  .invoke('prop', 'checked', true)
  .trigger('change');

4. 检查是否存在iframe或shadow DOM

如果对话框是在iframe或shadow DOM中，需要先切换上下文：

// 如果是iframe
cy.get('iframe').then($iframe => {
  const body = $iframe.contents().find('body');
  cy.wrap(body).find('mat-radio-button[value="1"]').click();
});

// 如果是shadow DOM
cy.get('.dialog-container').shadow().find('mat-radio-button[value="1"]').click();

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