Javascript TestCafe测试脚本checkbox.checked始终返回false即使选中，如何在if条件下检查复选框状态？

以下是我的问题摘要： 在文件共享应用程序中，我们有一个带有复选框和文件名的表。 在表格顶部有一个“设置预览”按钮，该按钮允许预览转盘始终显示默认的预览项目。 用户可以单击复选框并单击“设置预览”按钮，预览项目将更改，预览转盘将更新

我有一个测试自动化脚本，它使用TestCafe、NodeJS和ES6测试用JavaScript编写的这种行为

测试设置预览时，单击要设置预览的项目的复选框。 然后单击“设置预览”按钮。 确认预览图标设置在我们刚刚单击复选框的行上。 有一些事情需要注意： 当用户单击复选框时，如果选中的复选框已将预览设置为该行，则“设置预览”按钮将被禁用。 此外，单击“设置预览”时，选中的任何行都将自动取消选中

因此，如果选中已设置预览的行，则用户将无法单击设置预览，因此该复选框永远不会取消选中。 当循环重置并选中下一个项目时，现在将选中两个项目，并且禁用“设置预览”，因为无法使用“设置预览”设置两个项目

我添加了代码来检查当前行是否被选中，以及是否被选中；取消选中它。 问题是，当我检查复选框的状态以查看是否选中时：

var checkbox = await projectDetails.tableRowCheckBox(fileName);
if (checkbox.checked === true) {

即使选中了复选框，也会返回false。所以它永远不会被取消选中，脚本也会失败。 TestCafe网站提供了一个类似的示例，说明如何在此处执行此操作：

所以我认为它应该可以工作，互联网上还有一些其他表单在复选框上显示类似的if条件检查，所以这看起来像是有效的代码，但仍然不起作用

我还没有尝试过的一个可能的解决方案是检查预览行是否已设置为当前行，以及是否完全跳过该行。然而，即使这解决了我的所有问题，我仍然想解决这个问题。这就是我把它贴在这里的原因

编辑：另一个注意事项是，在我添加if条件（这是失败的）之前，我似乎在那里单击了，我运行了脚本，光标移动到复选框以取消选中它，但它实际上没有取消选中复选框。虽然我可能弄错了，只是在进行设置预览后重新选择了复选框，而设置预览本身会自动取消选中复选框。（好了，现在我的头真的在转了）

更完整的代码：

for (var j = 0; j < dataElementCount; j++) {
     // Act
     await t.click(projectDetails.tableRowCheckBox(fileName).with({ selectorTimeout: 30000}));
     await t.click(projectDetails.setPreviewButton, { selectorTimeout: 5000 });

     // Assert
     var previewRow = projectDetails.previewRow;
     // NOTE: Do not feed in test data that doesn't support the preview, or setting the preview will fail for that item.
     // tif and tiff files are not supported for the preview.
     await t.expect(projectDetails.rowFileName(previewRow).textContent).eql(fileName);

     // Cleanup
     // We have to now unselect the item that was just selected, because if we don't then when we go to select the next one,
     // the setPreview will fail, because two items would be selected at the same time.
     // Yes multi-select is now a thing, and we have to deal with it.
     // NOTE: Multi-select may be a thing, but it really only gets in our way with this workflow,
     // if we click a checkbox above for an item that already has the preview set.
     // After the SetPreview button is clicked the checkbox is unclicked,
     // but if the preview is already set for an item, then the item never gets unclicked.
     var checkbox = await projectDetails.tableRowCheckBox(fileName);
     if (checkbox.checked === true) {
          await t.click(projectDetails.tableRowCheckBox(fileName).with({ selectorTimeout: 30000}));
     } else {
          await t.wait(5000);
          console.log('DENIED: The checkbox is NOT checked for the checkbox with the row filename: ' + fileName);
          await t.wait(5000);
     }
}

很抱歉，我无法访问网站本身，因为这将侵犯知识产权

我希望我已经包含了所有我能找到的解决方案的信息

提前感谢您提供的任何帮助

方法：

const tableRowCheckBox = filename => tableRowName(filename)
      .sibling()
      .find('td.checkbox-cell span.check')

目标是

元素

因此，当您调用此帮助器方法时：

var checkbox = await projectDetails.tableRowCheckBox(fileName);

您将获得一个

。问题是，

checked

属性只存在于

元素中，而不存在于

元素中

这意味着

复选框。选中的

总是

未定义的

您的代码应该是：

const tableRowCheckBox = filename => tableRowName(filename)
      .sibling()
      .find('td.checkbox-cell span') 
      .nth(0);

    const checkbox = projectDetails.tableRowCheckBox(fileName);
    const isChecked = await checkbox.hasClass('check');
    if ( isChecked ) {
      ...
    }

方法：

const tableRowCheckBox = filename => tableRowName(filename)
      .sibling()
      .find('td.checkbox-cell span.check')

目标是

元素

因此，当您调用此帮助器方法时：

var checkbox = await projectDetails.tableRowCheckBox(fileName);

您将获得一个

。问题是，

checked

属性只存在于

元素中，而不存在于

元素中

这意味着

复选框。选中的

总是

未定义的

您的代码应该是：

const tableRowCheckBox = filename => tableRowName(filename)
      .sibling()
      .find('td.checkbox-cell span') 
      .nth(0);

    const checkbox = projectDetails.tableRowCheckBox(fileName);
    const isChecked = await checkbox.hasClass('check');
    if ( isChecked ) {
      ...
    }

---

虽然这不是我的特定用例所需要的确切解决方案，但总的来说它肯定是正确的！谢谢你给我指明了正确的方向。我将为可能遇到类似问题的其他人添加一条编辑注释，以及我是如何解决的。写得好！：-虽然这不是我的特定用例所需要的确切解决方案，但它在总体上肯定是正确的！谢谢你给我指明了正确的方向。我将为可能遇到类似问题的其他人添加一条编辑注释，以及我是如何解决的。写得好！：-D