javascript - 如何用 Protractor 选择组件元素？

Question

我有组件“添加新”，它实际上是按钮。 已经尝试通过添加 css、id、className 和该选择元素进行选择，但我仍然不可见。

Protractor 中的方法应选择“添加新”按钮。

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

知道为什么我无法选择组件“添加新”按钮的某些类 ID 或选择器吗？

audience.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'));;
}