Javascript 量角器:使用标签选择表单元素

Javascript 量角器:使用标签选择表单元素,javascript,testing,protractor,Javascript,Testing,Protractor,我正在使用量角器,我正在尝试使用它的标签选择一个窗体 让我们举个例子。我有这个表格,有几个输入: <form> <label for="name">Name</label> <input type="text" id="name"> <label for="address">Address</label> <input type="text" id="address"> &

我正在使用量角器,我正在尝试使用它的标签选择一个窗体

让我们举个例子。我有这个表格,有几个输入:

<form>
    <label for="name">Name</label>
    <input type="text" id="name">
    <label for="address">Address</label>
    <input type="text" id="address">
    <label for="email">Email</label>
    <input type="text" id="email">
</form> 
我需要编写这个步骤定义,因为我在cucumber.js中使用的是dragrator,所以运行测试的人应该能够填写一个只知道标签的表单,而不必检查html代码来检索类、id或其他属性

我已经在github上找到了,但我想知道是否有更好的方法来实现这一点

有人能帮我解决这个问题吗?我不喜欢向其他开发人员询问代码片段,但我真的不知道如何继续,也找不到关于这个问题的文档

重要提示:我没有使用Angularjs


提前感谢。

您可以通过文本找到
标签
元素,然后获得
输入
元素:

var input = element(by.xpath("//label[. = '" + labelName + "']/following-sibling::input"));
input.sendKeys(value);

我最近遇到了这个问题,因为我希望通过标签而不是ID来查找输入字段(因此我可以更专注于测试接口,而不是实现)

下面是我想到的xpath片段:

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;
};
它首先抓取包含所提供内容的label元素,抓取for属性,然后使用该属性查找具有匹配id的输入

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