CODEWITHSUNDEEP
javascriptangulartypescriptprotractor
James Delaney
James Delaney

Reputation: 1776

How to select a component element with protractor?

I have component "Add New" which is actually button. Already tried select with adding css, id, className and by that select element but still I'm is not visible.

Method in protractor which should select "Add New" -button. 

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

Html: "Add New" button (component):

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

Any Idea why I cant select some class id or selector of component Add new button?

audience.e2e-spec.ts: Spec test file: 

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 file:

 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();
  }

}

Upvotes: 0

Views: 1407

Answers (1)

James Delaney
James Delaney

Reputation: 1776

Solution is select "add new" class from Add New by all locator.

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

Upvotes: 1

Related Questions