javascript - 使用定位器找不到元素 : By(partial link text, Solid Community)

Question

我正在尝试执行 Cucumber 测试，该测试可以单击 ng-select 组件(下拉菜单)，然后单击菜单的选项之一。

我尝试使用“element (by.partialLinkText('Solid Community')).click()”，其中“Solid Community”是必须单击的文本。我也尝试过“by.LinkedText”，但没有成功。我不能使用“by.id”或类似的，因为菜单的选项没有 id(整个下拉菜单有一个)。

以下是代码的一些相关部分:

登录.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 && !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();
    }

Answer 1

识别元素时，重要的是查看 DOM 中呈现的 HTML，而不是 Angular HTML 模板。呈现模板时会发生许多转换。

还有partialLinkText将搜索 <a>包含提供的字符串的标签。您似乎没有使用任何 a代码中的标签。

如果您的元素属于其他类型，您应该能够使用cssContainingText像这样的定位器

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