how to Find element Locator in Protractor

Question

Iam new to protractor, Please help me to find the element locator using below code in Protractor/angularJS i have tried using xpath and CSS. what locator can be used from this code

<button type="submit" value="autofocus" class="btn" data-ng-click="reset()">Reset</button>

Answer 1

Here are various methods you can use apart from xpath and css. Locators specific to Protractor -

1. Get element using buttonText .

    element(by.buttonText('Reset')); 

2. You can also add a custom locator for your button using addLocator in protractor. Here's an example of it .

3. Use cssContainingText to get the element using both css and text properties.

    element(by.cssContainingText('.btn', 'Reset')); 

4. If at all you have a longer text in your button element(for ex, "Reset This Value"), then use partialButtonText to get it.

    element(by.partialButtonText('Value')); 

5. You can also use a shortcut to find elements using css.

    $('.btn'); // = element(by.css('.btn')) 

More details of the locators in Protractor are here .

You can use various General locators too -

1. Use className to get the element -

    element(by.className('btn')); 

2. Use tagName to get the element if its the only button element on the page, which is a rare case -

    element(by.tagName('button')); 

Hope it helps.

Answer 2

element(by.cssContainingText('.btn', 'Reset'));

以上答案解决了。

Answer 3

try the following:

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

or

$('.btn');

or

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

Answer 4

it is better to use elementor (elementor URL) for protractor to find element locator. this will help u in finding the exact locator without any issues. but little bit time consuming. but u dont need to worry on the elements found.

elementor URL in command prompt after starting the protractor.