javascript - TestCafe 测试脚本 checkbox.checked 即使选中也总是返回 false，如何在 if 条件下检查复选框状态？

Question

这里是我的问题的总结:我们在文件共享应用程序中有一个包含复选框和文件名的表格。表格顶部是一个“设置预览”按钮，可让预览轮播始终显示默认预览项目。用户可以单击复选框并单击设置预览按钮，预览项目将发生变化，预览轮播将更新。

我有一个测试自动化脚本，该脚本使用 TestCafe、NodeJS 和 ES6 以 JavaScript 编写来测试此行为。

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

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

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

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

这会返回 false，即使复选框被选中。所以它永远不会被取消检查并且脚本失败。TestCafe 网站在此处提供了一个类似的示例来说明如何执行此操作: https://devexpress.github.io/testcafe/documentation/test-api/actions/click.html

所以我认为它应该可以工作，并且互联网上还有一些其他表格在复选框上显示类似的 if-condition 检查，所以这似乎是有效代码，但它仍然无法工作。

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

编辑:另一方面，在我添加 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 rowFileName = row => row.find('td[data-label="Name"] span');
 const setPreviewButton = Selector('div.table-actions')
      .find('a.set-preview-button');
 const tableRowCheckBox = filename => tableRowName(filename)
      .sibling()
      .find('td.checkbox-cell span.check');
 const previewRow = Selector('td.table-preview-column span')
      .filter(node => node.childElementCount === 1)
      .parent('tr');

抱歉，我不能授予访问网站本身的权限，因为这会侵犯知识产权。

我希望我已经提供了所有可能的信息以找到可能的解决方案。

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

Answer 1

方法:

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

的目标是 <span class="check">元素。

所以当你调用这个辅助方法时:

var checkbox = await projectDetails.tableRowCheckBox(fileName);

你获得一个<span> .问题是 checked属性仅存在于 <input type="checkbox">元素并且在 <span> 上不存在元素。

这意味着 checkbox.checked总是 undefined

您的代码应该是:

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 ) {
      ...
    }