Question

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

我尝试使用“ element（by.partialLinkText（'Solid Community'））。click（）”，其中“ Solid Community”是必须单击的文本。我也尝试过“ by.LinkedText”，但是没有用。我不能使用“ by.id”或类似的名称，因为菜单的选项没有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(/^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，而不是角度HTML模板。呈现模板时会发生许多转换。

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

如果您的元素是另一种类型，则应该像这样使用cssContainingText定位符

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

使用定位器找不到任何元素：By（部分链接文本，Solid Community）

1 个答案: