select an element with protractor

There are different ways to select an element using protractor. You can get it by using id or tagName or css selector or or ng-repeat etc.

Select an element by id using protractor

element(by.id('element id'));

Select an element by css selector using protractor

element(by.css("css selector"));

css selector means you can select element using its class, attribute etc

Select element by class using protractor

element(by.css(".className"));

Example:

consider you have a element like

<div class="test"></div>

you can select the above element by its class name using protractor

element(by.css(".test"));

select element by tag name using protractor

element(by.tagName("h1"));

Select element by attribute using protractor

element(by.css("attributeValue"));

Example:

consider you have a element like below

<input type="button" class="test" ng-click="getAllRecords()" />

now you can select the above element by its ng-click attribute using protractor

element(by.css('[ng-click="getAllRecords()"]'));

Select element by ng-repeter using protractor

consider you have a div element for which you are applying ng-repeat.

<div ng-repeat="item in items">
    {{item.name}}
</div>

you can select all the elements resulted by ng-repeat using protractor

element.all(by.repeater("item in items"));

If you want to select only first element from ng-repeat , you can select by using below code

element.all(by.repeater("item in items")).get(0);

Read more...