如何在Geb中标记复选框类型的html输入字段？

Question

我无法使用 Geb 在网页上检查两个复选框类型的 html 输入字段。

相关字段的html代码如下所示： <input id="yui-gen136" style="width: 50px;" class="assemble-document" type="checkbox"> （另一个有一个 id="yui-gen133"）。

一开始我试过：$('input[type=checkbox]').click() 但它不起作用......对于我要检查的两个字段。

另一方面，它确实适用于另一个输入字段（此页面上有 3 个这样的字段），在 html 中是：<input id="riskCheckbox" value="false" onclick="onCheckBoxClick()" type="checkbox">

在阅读了 filling inputs and checkboxes 上的 Geb 手册以及有关 Geb here 和 there 中的复选框的 Stack 上的一些讨论后，我尝试了这样的导航器：

$("div[id*='assoc_packageItems-cntrl-currentValueDisplay'] input")

它返回了我感兴趣的两个输入对象。然后，我使用 id 分别访问它们：

("div[id*='assoc_packageItems-cntrl-currentValueDisplay']").find("input[id='yui-gen136']")

和：

("div[id*='assoc_packageItems-cntrl-currentValueDisplay']").find("input[id='yui-gen133']")

不幸的是，按照 Geb 手册和 Stack 讨论中的建议，在它们上应用 .value(true)、.value("true") 或 .value('true') 会导致错误：

TypeError: $(...).find(...).value is not a function

在这两个字段和任何周围元素中都没有 Javascript 代码。

当我作为用户勾选这两个框时，我会在控制台上收到一条消息“找不到元素”。所以我遵循了这条路线，我观察到的唯一奇怪的事情是，当我勾选该框时，disabled="" 会在<input> 字段中弹出一秒钟。 这样<input> 字段看起来像：

<input id="yui-gen136" style="width: 50px;" class="assemble-document" type="checkbox" disabled="">

通常，我感兴趣的 html 标记内没有“可见性”选项。

应该如何处理 Geb 中这种不寻常的复选框？ “禁用”选项有问题吗？

---

编辑 这是周围表单的 html 部分。问题是，所有这些元素都是随机生成的。

<div id="page_x002e_data-form_x002e_task-edit_x0023_default_assoc_packageItems-cntrl-currentValueDisplay" class="current-values object-finder-list yui-dt form-element-border form-element-background-color">

<div class="yui-dt-mask" style="display: none; padding: 0em 0.5em;"></div>
<table id="yuievtautoid-0" summary="">

<colgroup></colgroup>
<thead></thead>

<tr id="yui-rec128" class="yui-dt-rec yui-dt-first yui-dt-even" style="">
    <td class="yui-dt116-col-nodeRef yui-dt-col-nodeRef yui-dt-first" headers="yui-dt116-th-nodeRef " style="width: 50px;"></td>
    <td class="yui-dt116-col-metadata yui-dt-col-metadata" headers="yui-dt116-th-metadata "></td>
    <td class="yui-dt116-col-update yui-dt-col-update" headers="yui-dt116-th-update "></td>
    <td id="yui-gen134" class="yui-dt116-col-download yui-dt-col-download" headers="yui-dt116-th-download "></td>
    <td id="yui-gen136" class="yui-dt116-col-check yui-dt-col-check yui-dt-last" headers="yui-dt116-th-check ">
        <div id="yui-gen138" class="yui-dt-liner" style="padding: 0em 0.5em;">
            <input id="yui-gen137" class="assemble-document" type="checkbox" style="width: 50px;"></input>

                </div>
            </td>
        </tr>
        <tr id="yui-rec129" class="yui-dt-rec yui-dt-last yui-dt-odd" style=""></tr>
    </tbody>
</table>

Answer 1

通过特定属性值选择时，预期值必须作为字符串传递。由于整个 CSS 选择器也是一个字符串，因此您应该将 " 用于外部字符串，将' 用于内部属性值。

要选中和取消选中复选框，请使用

$("input[type='checkbox']").click()

查看当前是否选中

$("input[type='checkbox']").value()

如果您能够在 <input> 或类周围找到更合适的 ID，则应考虑将其包含在 CSS 选择器中，以避免在网站的其他部分选中复选框。

在你的情况下，因为你有一个 id，你可以通过 id 使用 CSS 选择器：

$("input#yui-gen136").click()

或

$("#yui-gen136").click()

======== 编辑 ========

如果站点使用 Jquery，您可以打开控制台并查看返回的内容

$("input[type='checkbox']")

如果您返回了多个元素，您的选择器可能不够具体。你甚至可以在这边试一试，它只会返回编辑帖子时可见的“社区维基”复选框。

$("input[type='checkbox']").click()

在 stackoverflow 上成功选中此复选框：)

Answer 2

如果要检查选择器返回的多个复选框，则可以使用 Groovy 的扩展运算符：

$("div[id*='assoc_packageItems-cntrl-currentValueDisplay'] input")*.value(true)

Answer 3

谢谢你们的建议。我终于解决了这个问题。

我错了没有JS。复选框位于使用 AJAX 加载的框架内。在服务器添加变量之前，复选框被阻止。必须等待服务器，然后执行复选框标记。

现在，一切正常。