javascript - Cypress - 从组合框 ng-selector 中检查所选项目

Question

我想检查所选项目是否与所需的文本值匹配。现在我使用列表上的位置选择值，但匹配它的代码并不完美。你有什么建议？

  fillDivision(value) {
    cy.get('[formcontrolname="divisionId"]').click()
    cy.get('[class="ng-option-label"]')
      .eq(value)
      .click()
  }

  getDivision(value){
    cy.get('[role="combobox"]').contains.(value)
  }

HTML 代码

<ng-select _ngcontent-c7="" bindlabel="name" bindvalue="id" class="ng-select ng-select-single ng-select-searchable ng-select-bottom ng-touched ng-dirty ng-valid ng-select-opened" formcontrolname="divisionId" role="listbox" ng-reflect-bind-label="name" ng-reflect-bind-value="id" ng-reflect-placeholder="Wybierz" ng-reflect-not-found-text="Brak" ng-reflect-select-on-tab="true" ng-reflect-items="[object Object],[object Object" ng-reflect-name="divisionId"><div class="ng-select-container ng-has-value">
    <div class="ng-value-container">
        <div class="ng-placeholder">Choose item</div>

        <!--bindings={
  "ng-reflect-ng-if": "true"
}--><!---->
            <!--bindings={
  "ng-reflect-ng-for-of": "[object Object]"
}--><div class="ng-value">
                <!---->

                <!--bindings={


<div class="ng-input">
            <input role="combobox" type="text" autocomplete="a3645360b82a" autocorrect="off" autocapitalize="off" aria-expanded="true" aria-owns="a3645360b82a" aria-activedescendant="ae1ceb98bcb2">
        </div>


<div class="ng-option ng-option-selected" role="option" aria-selected="true" id="a84a6f75bcf1">

            <!---->

            <!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]",
  "ng-reflect-ng-template-outlet": "[object Object]"
}-->
                <span class="ng-option-label">Item_to_check</span>

        </div>

Answer 1

我会使用data-test属性。这是生成唯一标识符的一个很好的模式，可以使测试变得更容易、更全面。了解更多相关信息here .