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

Question

I'm trying to perform a Cucumber test that can click on the ng-select component (dropdown menu) and, after that, clicks on one of the options of the menu.

I've tried to use "element (by.partialLinkText('Solid Community')).click()", where "Solid Community" is the text that must be clicked. I also tried with "by.LinkedText" but it didn't work. I can not use "by.id" or similar because the options of the menu don't have an id (the whole dropdown menu has one).

Here are some relevant parts of the code:

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 (the error is in "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

When identifying elements it's important to look at the rendered HTML in the DOM instead of the angular HTML template. There are a number of transformations that occur when the templates are rendered.

Also partialLinkText will search for <a> tags which contain the provided string. It does not appear you are using any a tags within your code.

If your element is of another type you should be able to use the cssContainingText locator like so

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