CODEWITHSUNDEEP
protractorcucumberjs
Saloni Singhal
Saloni Singhal

Reputation: 151

Unable to locate buttons in protractor

There are 3 buttons in an angular application with the following details:

<button ng-class="btnClass1" class="btn btn-lg tab" ng-click="addCust()">
<b ng-show="btnClass1 === 'btn-primary'" id="notch" class="notch ng-hide"></b>
"Add Customer" </button>


<button ng-class="btnClass2" class="btn btn-lg tab" ng-click="addCust()">
    <b ng-show="btnClass1 === 'btn-primary'" id="notch" class="notch ng-hide"></b>
    "Open Account" </button>

<button ng-class="btnClass3" class="btn btn-lg tab" ng-click="addCust()">
    <b ng-show="btnClass1 === 'btn-primary'" id="notch" class="notch ng-hide"></b>
    "Customer" </button>

I tried following to locate: var addCustomerButton = element(by.className('btn btn-lg tab'));

But this will only work for the first one as the class name is same for all. Any way to have unique locators for all the three buttons?

Upvotes: 0

Views: 26

Answers (1)

Yuriy Gerasimovich
Yuriy Gerasimovich

Reputation: 424

You can utilize element.all (https://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.all) which will return an array of the elements so you can access the element by its index in the array (e.g addCustomerButton[0])

Or you can utilize nth-child() (https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child) to specify three different locators for three buttons and just interact with any of these.

However, I don't suggest any of this approaches since this can mess everything up hardly if more buttons gonna be added. Especially if the new button will be added between, let's say button 1 and button 2. Then your button 2 will become button 3, button 3 will become button 4, and so on...

Your to-go option should be to have unique locators for each button

Upvotes: 1

Related Questions