Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Select form elements by associated label

See original GitHub issue

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?

Issue Analytics

State:
Created 10 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

2reactions

jamesthomasonjrcommented, Sep 14, 2018

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);

0reactions

Ema-jarcommented, Jan 11, 2016

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

Top Results From Across the Web

Using label elements to associate text labels with form controls

The objective of this technique is to use the label element to explicitly associate a form control with a label. A label is...

The Label element - HTML: HyperText Markup Language | MDN

To explicitly associate a <label> element with an <input> element, you first need to add the id attribute to the <input> element. Next,...

jQuery - select the associated label element of a input field

Show activity on this post. There are two ways to specify label for element: Setting label's "for" attribute to element's id. Placing element...

Form <input> elements must have labels | Axe Rules

Each form element must have a programmatically associated label element. The Algorithm (in simple terms). Ensures that every form element has a programmatically ......

HTML5 Forms: Label Element - Wufoo

The <label> can be associated with a form control either implicitly by placing the control element inside the label element, or explicitly by...