Невозможно выбрать компонент-кнопку с транспортиром

Question

Не могу выбрать с помощью любого локатора Компонентная кнопка «Добавить новый».

Вот Здесь audiow.po.ts Файл и метод "ClickAddNewBtn ()"

  clickAddNewBtn() {
      console.log("Click on Add New button.");
      return element(by.css('nano-add-new-button')).click();
  }

Компонент "Добавить новую кнопку" является дочерним (компонент):

    <div class="nano-f-40 nano-f-r">
        <nano-add-new-button (click)="openModal('new')"
                             class="nano-bc-green hover-effect">
        </nano-add-new-button>
    </div>

Вот тело компонента «Добавить новую кнопку»:

import { Component, Output, Input } from '@angular/core';

@Component({
    selector: 'nano-add-new-button',
    template: `
    <div class='nano-f-r nano-f add-new'>
        <i class='fa fa-plus'></i>
           <span class='nano-ml-5 add-new'>
                Add New
           </span>
    </div>`
})
export class NanoAddNewButtonComponent {
}

Снимок экрана с ошибкой, в данном случае попытался выбрать кнопку по xpath:

ЛюбойИдея, как выбрать эту кнопку и нажать на него?

Answer 1

Решение - выбрать класс «nano-ml-5» из диапазона «Добавить новый» локатором «all».

clickAddNewBtn() {
    return element.all(by.css('nano-ml-5'));;
}