使用定位器未找到元素：按（部分 link 文本，Solid 社区）

Question

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

我试过使用 "element (by.partialLinkText('Solid Community')).click()"，其中 "Solid Community" 是必须单击的文本。我也尝试过 "by.LinkedText" 但它没有用。我不能使用 "by.id" 或类似的，因为菜单的选项没有 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 && !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"）：

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();

使用定位器未找到元素：按（部分 link 文本，Solid 社区）

No element found using locator: By(partial link text, Solid Community)

javascript

cucumber

webstorm

angularjs

protractor