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

时间:2016-01-11 00:35:06

标签: javascript testing protractor

我正在使用量角器,而我正在尝试使用它的标签选择一个表单。

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

RadialGradientPaint

我的步骤定义应该是这样的:

<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的量角器,所以运行测试的人应该能够填写一个只知道标签的表单,而无需检查html代码来检索类,id或其他属性。

我在github上找到this question,但我想知道是否有更好的方法可以做到这一点。

任何人都可以帮我解决这个问题吗?我不想向其他开发者询问代码段,但我真的不知道如何继续,我无法找到有关此问题的文档。

重要提示:我没有使用Angularjs

提前谢谢。

2 个答案:

答案 0 :(得分:4)

您可以按文字找到label元素,然后获取following sibling input元素:

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

答案 1 :(得分:0)

我最近遇到了这个问题,因为我想通过标签而不是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的输入。