Cypress 无法选择单选按钮

Question

我正在使用 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>

我尝试了以下方法但不起作用

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

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

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

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

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

我已经增加了足够的等待时间。我找不到它。因此请求有关单击单选按钮的帮助

Answer 1

错误出现在第一个选择器（或第二个查询，取决于你如何看待它）。

您已使用：

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

但是失败了，因为

input[type="radio"]

既在

cy.get()

又在

.find()

中，但只有一个

input[type="radio"]

。

要修复错误，请更改为

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

或

cy.get('mat-radio-group > mat-radio-button[value="1"] input[type="radio"]') 
  .check();