在 C# 中使用 Selenium 测试 Angular 11 Material 应用程序

如何解决在 C# 中使用 Selenium 测试 Angular 11 Material 应用程序

我正在尝试使用 C# selenium 测试一个 angular 11 Material UI 应用程序。我发现量角器可以做到这一点，但在获取下拉列表和查找绑定选项值等方面对材料角度应用程序的帮助不大。 有没有图书馆可以帮我解决这个问题？

下面是最终渲染的材质选择/下拉

<mat-select _ngcontent-dtu-c317="" role="comboBox" aria-autocomplete="none" aria-haspopup="true" id="ddlContractMonth" formcontrolname="ContractMonth" required="" class="mat-select ng-tns-c220-8 ng-tns-c111-7 mat-select-required mat-select-empty ng-pristine ng-invalid ng-star-inserted mat-select-invalid ng-touched" ng-reflect-id="ddlContractMonth" ng-reflect-required="" ng-reflect-name="ContractMonth" aria-labelledby="mat-form-field-label-5 mat-select-value-3" tabindex="0" aria-expanded="false" aria-required="true" aria-disabled="false" aria-invalid="true" aria-describedby="mat-error-0"><div cdk-overlay-origin="" class="mat-select-trigger ng-tns-c220-8"><div class="mat-select-value ng-tns-c220-8" ng-reflect-ng-switch="true" id="mat-select-value-3"><span class="mat-select-placeholder ng-tns-c220-8 ng-star-inserted">&nbsp;</span><!--bindings={
  "ng-reflect-ng-switch-case": "true"
}--><!--bindings={
  "ng-reflect-ng-switch-case": "false"
}--></div><div class="mat-select-arrow-wrapper ng-tns-c220-8">

选项在 DOM 中的不同位置呈现

<div class="mat-select-panel-wrap ng-tns-c220-8 ng-trigger ng-trigger-transformPanelWrap ng-star-inserted"><div role="listBox" tabindex="-1" class="ng-tns-c220-8 ng-trigger ng-trigger-transformPanel mat-select-panel mat-primary" id="ddlContractMonth-panel" aria-multiselectable="false" aria-labelledby="mat-form-field-label-5" style="transform-origin: 50% bottom 0px; font-size: 14px; opacity: 1; min-width: calc(100% + 32px); transform: scaleY(1);"><mat-option _ngcontent-dtu-c317="" role="option" class="mat-option mat-focus-indicator mat-active ng-tns-c220-8" id="mat-option-4" tabindex="0" aria-disabled="false"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><span class="mat-option-text">-- None --</span><!--bindings={
  "ng-reflect-ng-if": null
}--><div mat-ripple="" class="mat-ripple mat-option-ripple" ng-reflect-trigger="[object HTMLElement]" ng-reflect-disabled="false"></div></mat-option><mat-option _ngcontent-dtu-c317="" role="option" class="mat-option mat-focus-indicator ng-tns-c220-8 ng-star-inserted" ng-reflect-value="MAY2021" id="mat-option-10" tabindex="0" aria-disabled="false" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><span class="mat-option-text"> MAY </span><!--bindings={
  "ng-reflect-ng-if": null
}--><div mat-ripple="" class="mat-ripple mat-option-ripple" ng-reflect-trigger="[object HTMLElement]" ng-reflect-disabled="false"></div></mat-option><mat-option _ngcontent-dtu-c317="" role="option" class="mat-option mat-focus-indicator ng-tns-c220-8 ng-star-inserted" ng-reflect-value="APR2021" id="mat-option-11" tabindex="0" aria-disabled="false" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><span class="mat-option-text"> APR </span><!--bindings={
  "ng-reflect-ng-if": null
}--><div mat-ripple="" class="mat-ripple mat-option-ripple" ng-reflect-trigger="[object HTMLElement]" ng-reflect-disabled="false"></div><mat-option _ngcontent-dtu-c317="" role="option" class="mat-option mat-focus-indicator ng-tns-c220-8 ng-star-inserted" ng-reflect-value="OCT2020" id="mat-option-17" tabindex="0" aria-disabled="false" style=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--><span class="mat-option-text"> OCT </span><!--bindings={
  "ng-reflect-ng-if": null
}--><div mat-ripple="" class="mat-ripple mat-option-ripple" ng-reflect-trigger="[object HTMLElement]" ng-reflect-disabled="false"></div></mat-option><!--bindings={
  "ng-reflect-ng-for-of": "MAY,APR,OCT"
}--></div></div>

我无权对原始代码进行修改。