Блог

Я пытаюсь выполнить огуречный тест, который может щелкнуть по компоненту ng-select (выпадающее меню) и после этого щелкнуть по одному из параметров меню.

Я пытался использовать «element (by.partialLinkText(‘Солидное сообщество’)).click ()», где «Солидное сообщество» — это текст, на который нужно щелкнуть. Я также пытался использовать «by.LinkedText», но это не сработало. Я не могу использовать «by.id » или что-то подобное, потому что опции меню не имеют идентификатора (он есть во всем выпадающем меню).

Вот некоторые соответствующие части кода:

login.component.html:

 ...
 <div style="margin-top: 10px;">
    <ng-select class="login-select"
               id="login-select-menu"
               bindLabel="name"
               bindValue="loginUrl"
               placeholder="Select ID Provider"
               dropdownPosition="bottom"
               [items]="identityProviders"
               [(ngModel)]="selectedProviderUrl"
               style="width: 360px; height: 48px; margin-left: auto; margin-right: auto;">

      <!-- DROPDOWN TEMPLATE -->
      <ng-template ng-option-tmp let-item="item">
        <div style="height:40px; padding-top:10px; position: relative;">
          <img [src]="item.image" style="float: left; height: 32px; width: 32px; margin-top:-5px;" />
          <span style="float: left; margin-left: 10px;">{{ item.name }}</span>
          <div style="clear: both;"></div>
        </div>
      </ng-template>

    </ng-select>
    <input type="text"
           class="wide-text"
           *ngIf="selectedProviderUrl===null"
           placeholder="Enter WebID"
           style="margin-top:10px; padding: 12px 10px; width: 340px; height: 16px; display: block; margin-left: auto; margin-right: auto;"
           [(ngModel)]="customProviderUrl" />
    <button class="wide-button" (click)="onLogin()" *ngIf="selectedProviderUrl !== undefined || customProviderUrl !== undefined" [disabled]="selectedProviderUrl===null amp;amp; !customProviderUrl" style="margin-top:10px;">Go</button>
  </div>
...
 

loginSelectMenu.feature:

 @loginSelectMenu-feature
Feature: Click on login select menu
  Display anything

  @loginSelectMenu-scenario
  Scenario: Login Page
    Given I am on the login page
    When I click on the login select menu
    Then It should happen anything

 

app.steps.ts (ошибка в «Когда»):

 When(/^I click on the login select menu$/, async () => {
    await page.clickOnLoginSelectMenu();
    await page.clickOnSolidCommunity();
});

 

app.po.ts:

  clickOnLoginSelectMenu() {
        return element(by.id('login-select-menu')).click();
    }

 clickOnSolidCommunity() {
        this.sleep(3000);
        return element(by.partialLinkText('Solid Community')).click();
    }
 

При идентификации элементов важно смотреть на отображаемый HTML в DOM, а не на шаблон angular HTML. При визуализации шаблонов происходит ряд преобразований.

Также partialLinkText будет выполняться поиск <a> тегов, содержащих указанную строку. Похоже, вы не используете какие-либо a теги в своем коде.

Если ваш элемент другого типа, вы должны иметь возможность использовать cssContainingText локатор следующим образом

 element(by.cssContainingText('div','Solid Community')).click();