Select form elements by associated label

[ravinggenius]

Given markup like:

<label for="your_name">Name</label>
<input id="your_name" />

... I should be able to fill in the input with ptor.findElement(protractor.By.label('Name')).sendKeys('My Name');.

Is this currently possible?

[ravinggenius]

I was able to approximate the desired functionality with

ptor.findElement(protractor.By.xpath('//label[contains(text(), "Name")]')).then(function (label) {
  ptor.findElement(protractor.By.id(label.getAttribute('for'))).sendKeys('My Name');
});

... but clearly this is less than ideal.

[juliemr]

I'm confused why you would want to do this. The 'for' attribute in your label has to be the id attribute of your input so... why not just find the input by id?

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

[ravinggenius]

Basically I'm asking for a convenience wrapper so Protractor can interact with the page more like a human user would. Using my example above, I believe it is more natural to ask the user (and thus Protractor) to fill in the "Name" field, not the "#your_name" field.

[juliemr]

Gotcha. Finding elements by text on the page is often not recommended because labels change more frequently than IDs and internationalization/localization can mess it up. I'd suggest writing your own wrapper if you want to use this.

So, I think a feature like this would be great as an extension but not a core part of Protractor. What I'd like to do is make an easier way to extend the custom element locators that Protractor adds to webdriver.

[juliemr]

See the request for that in #236

[Ema-jar]

This question helped a lot: http://stackoverflow.com/questions/34712495/protractor-select-a-form-element-using-label

[jamesthomasonjr]

In case anyone runs across this issue from Google and wants a simple solution using by.addLocator:

function findElementByLabel(labelText, opt_parentElement) {
    const using = opt_parentElement || document;
    const xpath = `//input[@id=string(//label[. = '${labelText}']/@for)]`;
    return document.evaluate(xpath, using, null, XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue;
};

by.addLocator('label', findElementByLabel);