выберите опцию текста из выпадающего списка, если один и тот же класс используется для всех выпадающих в транспортире JS

Question

Я работаю в Protractor и javasript. На моей странице есть несколько выпадающих списков одного и того же класса "панель вкладок активна ng-star-вставлена". Я хочу выбрать 1-й выпадающий список и щелкнуть опцию «Raphael (BH681) - SVI», передав текст в качестве параметра. Я хочу, чтобы различные xpath и css выполняли опцию select. Может кто-нибудь помочь мне выбрать опцию text from 1-й выпадающий список?

<div role="tabpanel" class="tab-pane active ng-star-inserted" aria-labelledby="tab-stakeHolder" id="tab-stakeHolder-panel" aria-expanded="true">
          <!---->
            <!---->
            <!----><app-workpackage-stakeholders-edit _ngcontent-c8="" _nghost-c13="" class="ng-star-inserted"><div _ngcontent-c13="" id="stakeholdersEditList">
  <table _ngcontent-c13="">
    <tbody _ngcontent-c13=""><tr _ngcontent-c13="">
      <th _ngcontent-c13="">Role</th>
      <th _ngcontent-c13="">Name</th>
     
    </tr>
    <!----><tr _ngcontent-c13="" class="ng-star-inserted">
      <td _ngcontent-c13="">EWPL or TL</td>
      <td _ngcontent-c13=""><i _ngcontent-c13="">Current :</i> <strong _ngcontent-c13="">QUINQUIS</strong>
        <br _ngcontent-c13=""> <i _ngcontent-c13="">New : </i>
        <select _ngcontent-c13="" class="form-control ng-valid ng-touched ng-dirty">
          <!----><option _ngcontent-c13="" value="0: to12" class="ng-star-inserted">
            JAMMES (to12) - ES2
          </option><option _ngcontent-c13="" value="1: to44" class="ng-star-inserted">
            Caroline (to44) - ES2D
          
          </option><option _ngcontent-c13="" value="2: BH681" class="ng-star-inserted">
            Raphael (BH681) - SVI
          </option><option _ngcontent-c13="" value="3: MF04C" class="ng-star-inserted">
            SOUHEL (MF04C) - HAHAF3
          </option><option _ngcontent-c13="" value="4: GHJKU" class="ng-star-inserted">
            BERRUE (GHJKU) - ES2D
          </option>
        </select>
      </td>
      <td _ngcontent-c13="">+44 561938567</td>
      <td _ngcontent-c13="">quinquis@abcd.com</td>
      <td _ngcontent-c13="">ES2D</td>
    </tr><tr _ngcontent-c13="" class="ng-star-inserted">
      <td _ngcontent-c13="">ES MFT Representative</td>
      <td _ngcontent-c13=""><i _ngcontent-c13="">Current :</i> <strong _ngcontent-c13="">Fabien</strong>
        <br _ngcontent-c13=""> <i _ngcontent-c13="">New : </i>
        <select _ngcontent-c13="" class="form-control ng-pristine ng-valid ng-touched">
          <!----><option _ngcontent-c13="" value="0: EUD9F" class="ng-star-inserted">
            MUNOZ (EUD9F) - INNO
          </option><option _ngcontent-c13="" value="1: GH678" class="ng-star-inserted">
            Gaetub (GH678) - IDD
          </option>
        </select>
      </td>
      <td _ngcontent-c13="">+44 582053000</td>
      <td _ngcontent-c13="">NMB@abcd.com</td>
      <td _ngcontent-c13="">INNO</td>
    </tr><tr _ngcontent-c13="" class="ng-star-inserted">
      <td _ngcontent-c13="">MFT Leader</td>
      <td _ngcontent-c13=""><i _ngcontent-c13="">Current :</i> <strong _ngcontent-c13="">GATNM</strong>
        <br _ngcontent-c13=""> <i _ngcontent-c13="">New : </i>
        <select _ngcontent-c13="" class="form-control ng-pristine ng-valid ng-touched">
          <!----><option _ngcontent-c13="" value="0: AB5EDA2" class="ng-star-inserted">
            Arthur (AB5EDA2) - ADC
          </option><option _ngcontent-c13="" value="1: AB157FC" class="ng-star-inserted">
            DESJARDINS (AB157FC) - ADC
          </option>
        </select>
      </td>
      <td _ngcontent-c13="">+44 561185000</td>
      <td _ngcontent-c13="">GHF@abcd.com</td>
      <td _ngcontent-c13="">ZIDDA</td>
    </tr><tr _ngcontent-c13="" class="ng-star-inserted">
      <td _ngcontent-c13="">S/C Manager</td>
      <td _ngcontent-c13=""><i _ngcontent-c13="">Current :</i> <strong _ngcontent-c13="">BERTON</strong>
        <br _ngcontent-c13=""> <i _ngcontent-c13="">New : </i>
        <select _ngcontent-c13="" class="form-control ng-pristine ng-valid ng-touched">
          <!----><option _ngcontent-c13="" value="0: FGHJ" class="ng-star-inserted">
            BERTON (FGHJ) - IDCB
          </option><option _ngcontent-c13="" value="1: AGHJ" class="ng-star-inserted">
             MICHAUD (AGHJ) - IDD
          </option>
        </select>
      </td>
      <td _ngcontent-c13="">+44 561181980</td>
      <td _ngcontent-c13="">berton@abcd.com</td>
      <td _ngcontent-c13="">ZIDDA</td>
    </tr>
  </tbody></table>
  <div _ngcontent-c13="" class="buttonTabSave">
    <button _ngcontent-c13="" class="saveButton">
      <span _ngcontent-c13="" class="fa fa-save"></span> Save New Stakeholders</button>
  </div>
</div></app-workpackage-stakeholders-edit>
            <app-supplier-stakeholders _ngcontent-c8="" _nghost-c14="" class="ng-star-inserted"><div _ngcontent-c14="" id="supplierStakeholdersList">
  <table _ngcontent-c14="">
    <tbody _ngcontent-c14=""><tr _ngcontent-c14="">
      <th _ngcontent-c14="">Role</th>
      <th _ngcontent-c14="">Name</th>
         </tr>
    <!----><tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="">DSCM</td>
      <td _ngcontent-c14="">BVCD BRUNET</td>
      <td _ngcontent-c14="">+44 56719156</td>
      <td _ngcontent-c14="">BVCD.brunet@abcd.com</td>
      <td _ngcontent-c14="">ES2D</td>
    </tr><tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="">ES Key Supplier Representative</td>
      <td _ngcontent-c14="">HGFD SCUOTTO</td>
      <td _ngcontent-c14="">+44 5619356778</td>
      <td _ngcontent-c14="">HGFD.scuotto.NMB@abcd.com</td>
      <td _ngcontent-c14="">ZIDD</td>
    </tr><tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="">QR or SRM</td>
      <td _ngcontent-c14="">HHK BROUTIER</td>
      <td _ngcontent-c14="">+44 56118456</td>
      <td _ngcontent-c14="">HHK.NMB@abcd.com</td>
      <td _ngcontent-c14="">ZIDD</td>
    </tr><tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="">SCQM or Lead SOM</td>
      <td _ngcontent-c14="">ROLLAND</td>
      <td _ngcontent-c14="">+44 5671909567</td>
      <td _ngcontent-c14="">rolland@abcd.com</td>
      <td _ngcontent-c14="">ZIDDA</td>
    </tr><tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="">Technical Authority Focal Point</td>
      <td _ngcontent-c14="">Jean Pierre</td>
      <td _ngcontent-c14="">+44 532110456</td>
      <td _ngcontent-c14="">NMB@abcd.com</td>
      <td _ngcontent-c14="">CMBA1</td>
    </tr><tr _ngcontent-c14="" class="ng-star-inserted">
      <td _ngcontent-c14="">TAM</td>
      <td _ngcontent-c14="">Sandrine</td>
      <td _ngcontent-c14="">00</td>
      <td _ngcontent-c14="">charmarty.NMB@abcd.com</td>
      <td _ngcontent-c14="">ESX</td>
    </tr>
  </tbody></table>
</div>
</app-supplier-stakeholders>
          
        </div>

Answer 1

Попробуйте этот xpath: //tr[2]/td[2]//option[contains(., 'Raphael (BH681) - SVI')]

Answer 2

Похоже, что раскрывающийся список также имеет идентификатор, который должен быть уникальным, поэтому, возможно, вам следует рассмотреть возможность использования идентификатора для определения раскрывающегося списка:

var dropdown = element(by.id('tab-stakeHolder-panel'));

Если предпочтительна идентификация по классу, вы можете выбрать 1-й элемент, который имеет этот класс, с помощью:

var dropdown = element.all(by.css('div.tab-pane.active.ng-star-inserted')).get(0);

Для меня выбор раскрывающегося списка лучше всего работает с sendKeys. Что-то вроде:

dropdown.click().sendKeys('Celine VINSONNEAU');