Question

我正在尝试选择嵌套在页面div中的复选框，以进行验收测试。

以下是我可能会看到的DOM结构示例：

...
<div class="section-1">
    ...
    <input type="checkbox" name="type[12312][][]" value="1">Thing1</input>
    <input type="checkbox" name="type[12312][][]" value="2">Thing2</input>
    ...
</div>
...

通常情况下，我可以这样做以选择一个特定的复选框：

input[name*=type][value=1]

但在我的情况下，我需要特定部分的复选框，其中页面中有很多。所以我假设以下内容可行：

.section-1 input[name*=type][value=1]

但不。

我的问题是：

为什么不起作用？
如何立即选择输入？

注意：我可以使用JS来获取输入，但我真的更喜欢使用CSS选择器，所以我可以使用库（Selenium）的函数来处理元素操作。

Answer 1

这有效：

＆＃13;

.section-1 input[name^="type"][value="2"] {
    display: block;
    margin: 25px;
}

＆＃13;

<div class="section-1">
    <input type="checkbox" name="type[12312][][]" value="1">
    <input type="checkbox" name="type[12312][][]" value="2">
</div>

＆＃13;

尝试在属性值中添加引号。

此外，input元素是void element。它没有结束标记，也不接受内容。

Answer 2

你必须使用＆gt;如果你想去看孩子。使用下面的cssSelector for selenium element locator：

.section-1 > input[name^= 'type'][value= '1']

我使用^作为你的名字以类型开头。

希望这会对你有所帮助。

Answer 3

导致此失败的属性值周围缺少引号。根据规范，属性值可以是标识符或字符串。我现在看到标识符可以包含字母和数字，但必须不以数字开头。这就是它失败的原因。

为具有多个属性的嵌套元素创建CSS选择器

3 个答案: