I'm having trouble selecting the "Add New" button using any locator component.
Check out the audience.po.ts file and the method "ClickAddNewBtn()":
clickAddNewBtn() {
console.log("Clicking on the Add New button.");
return element(by.css('nano-add-new-button')).click();
}
The "Add New button" component is a child component:
<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>
Here is the body of the "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 {
}
Error screenshot: when attempting to select the button by xpath. https://i.sstatic.net/yuJ3H.png
Any suggestions on how to effectively select and click this button?