量角器:使用标签选择形状元素

Protractor: select a form element using label

本文关键字：状元 元素 选择 标签 量角器      更新时间：2023-09-26

我正在使用量角器，并试图使用它的标签选择一个表单。

让我们举一个例子。我有这个表格，有几个输入：

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

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

this.When(/^I fill input identified by label "([^"]*)" with value "([^"]*)"$/, function(labelName, value, callback){        
   ...
});

我需要写这个步骤定义，因为我使用的是带cucumber.js的量角器，所以运行测试的人应该能够只知道标签就填写表单，而无需检查html代码来检索类、id或其他属性。

我在github上发现了这个问题，但我想知道是否有更好的方法可以做到这一点。

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

重要提示：我没有使用Angularjs

提前谢谢。

您可以通过文本找到label元素，然后获得以下同级input元素：

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的输入。

相关文章：