Как выбрать составной элемент с транспортиром?

Question

У меня есть компонент «Добавить новый», который на самом деле кнопка. Уже пробовал выбирать с добавлением css, id, className и этим элементом select, но я все еще не виден.

Метод в транспортире, который должен выбрать кнопку «Добавить новый».

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

HTML: кнопка «Добавить новый» (компонент):

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 {
}

Любая идея, почему я не могу выбрать некоторый идентификатор класса или селектор компонента Добавить новую кнопку?

аудитория. E2e-spec.ts: тестовый файл спецификации:

describe('Category Rule functionality', () => {
  let loginPage: LoginPage;
  let audiencePage: AudiencePage;


  beforeEach(() => {
    loginPage = new LoginPage();
    audiencePage = new AudiencePage();
  });

  it('Auto QA bot should be able to make new Category rule and save.', () => {

    console.log("Navigate on login page");
    loginPage.navigateTo();

    console.log("Fill login form");    
    loginPage.fillCredentials();

    console.log("After login go to Audience tab"); 
    audiencePage.goToAudienceTab();

    audiencePage.clickAddNewBtn();

    audiencePage.typeTextInAudienceNameField();

    audiencePage.pickRangeLast14Days();

    audiencePage.selectCategoryRule();

    audiencePage.typeTextInCategoryRuleTextArea();

    audiencePage.clickSaveBtn();

    expect(audiencePage.getNotification()).toEqual('Audience saved');
  });
});

Файл Audience.po.ts:

 export class AudiencePage {

  navigateTo() {
    return browser.get('/private/audience');
  }

  goToAudienceTab() {
    return element(by.xpath('/html/body/nano-app/nano-private/nano-navigation/div/div[3]/a/span')).click();
  }

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

  typeTextInAudienceNameField() {
    console.log("Type text in audience name field");
    return element(by.css('.nano-white-smoke-input')).sendKeys('Test');
  }

  pickRangeLast14Days() {
    return element(by.xpath('/html/body/nano-app/nano-private/nano-modal/div/div/div/div/nano-modal-entity/nano-audience-edit/form/div/div[2]/nano-audience-date-range/div[2]/label[2]/span'));
  }

  openRuleDropdown() {
    return element(by.xpath('/html/body/nano-app/nano-private/nano-modal/div/div/div/div/nano-modal-entity/nano-audience-edit/form/div/nano-audience-rules/div[1]/div[2]/div[1]/nano-drop-down/div/button/div/span')).click();
  }

  selectCategoryRule() {
    return element(by.xpath('/html/body/nano-app/nano-private/nano-modal/div/div/div/div/nano-modal-entity/nano-audience-edit/form/div/nano-audience-rules/div[1]/div[2]/div[1]/nano-drop-down/div/ul/li[5]/button/div/span')).click();
  }

  typeTextInCategoryRuleTextArea() {
    return element(by.xpath('/html/body/nano-app/nano-private/nano-modal/div/div/div/div/nano-modal-entity/nano-audience-edit/form/div/nano-audience-rules/div[1]/div[2]/div[2]/nano-category-rule/div/textarea')).sendKeys('Test');
  }

  clickAddRuleBtn() {
    return element(by.name('button .nano-c-p')).click();
  }

  clickSaveBtn() {
    return element(by.id('save')).click();
  }

  getNotification() {
    return element(by.xpath('notification')).getText();
  }

}

Answer 1

Решение - выбрать «добавить новый» класс из списка «Добавить новый для всех».

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