Nightwatch - 使用按钮文本名称单击按钮

Question

有什么方法可以使用按钮文本来单击按钮吗？

<label class="button">Button 1</label> <label class="button">Button 2</label> <label class="button">Button 3</label> <label class="button">Button 4</label>

我目前使用 :nth-of-type 来定位它们，但我正在寻找更具可读性的内容。（Xpath 也不是很可读）。

我正在考虑的另一个选项是使用页面对象并将不可读的选择器移到那里。

Answer 1

您可以将它们配置为按钮。然后使用 CSS.

将它们设置为文本样式

<html>
<head>
<style>
.astext {
    background:none;
    border:none;
    margin:0;
    padding:0;
}
</style>
</head>
<body>  
<button class="astext"><span>Button 1</span></button>
<button class="astext"><span>Button 2</span></button>
<button class="astext"><span>Button 3</span></button>
<button class="astext"><span>Button 4</span></button>
</body>
</html>

Answer 2

CSS 选择器目前不支持匹配文本，而且可能永远不会。您可以使用 xpath 通过文本定位按钮。

/* 这将匹配任何包含字符串 'Button 1' 的按钮。如果有一个 Button 12，Nightwatch 会抱怨多个元素与该选择器匹配，但它通常会起作用。 */

.useXpath().click("//*[contains(text(),'Button 1')]")

/* 这将仅匹配 完全匹配 字符串 'Button 1'*/

的按钮

.useXpath().click("//*[.='Button 1']") // 请注意 spaces 很重要，因此如果 html 中有前导或尾随 space 或其他任何内容，它将不起作用。

/* 最后，假设你的按钮没有编号，像这样 html:*/

<button class="astext"><span>Foo</span></button>
<button class="astext"><span>Foo</span></button>
<button class="astext"><span>Foo</span></button>
<button class="astext"><span>Foo</span></button>

/* 你在这里还有选择。通过索引到您想要的项目。假设您要单击带有文本 "Foo" 的第二个按钮。为此，请将您的 xpath 表达式括在括号中，然后在括号中记下您的索引，如下所示：*/

.useXpath().click("(//*[contains(text(),'Foo')])[2]")

xpath 选择器值得了解。有时编写 xpath 选择器要简单得多，并且通过练习，它相当容易做到。 Here is an excellent source document on xpath selectors

Nightwatch - 使用按钮文本名称单击按钮

Nightwatch - button click using button text name

html

css

automation

automated-tests

nightwatch.js