代码之家 › 专栏 › 技术社区 › James Delaney

如何使用量角器选择构件图元?

protractor typescript angular javascript

James Delaney · 技术社区 · 6 年前

我有一个组件“Add New”,实际上是按钮。已经尝试过通过添加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 {
}

知道为什么我不能选择某个类id或“组件添加新”按钮的选择器吗?

观众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');
  });
});

观众采购订单。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();
  }

}

1 回复 | 直到 6 年前

James Delaney 6 年前

解决方案是从add new by all定位器中选择“add new”类。

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