javascript - 无法使用 Protractor 选择组件按钮

Question

我无法使用任何定位器组件的“添加新”按钮进行选择。

这是 audience.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”类。

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