TestCafe 测试脚本 checkbox.checked 始终 return false 即使在选中时，我如何检查 if-condition 中的复选框状态？

Question

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

我有一个测试自动化脚本，它使用 TestCafe、NodeJS 和 ES6 在 JavaScript 中测试此行为。

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

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

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

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

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

所以我认为它应该可以工作，并且 Internet 上还有一些其他表格在复选框上显示类似的 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 ) {
      ...
    }

TestCafe 测试脚本 checkbox.checked 始终 return false 即使在选中时，我如何检查 if-condition 中的复选框状态？

TestCafe test script checkbox.checked always return false even when checked, how can I check the checkbox state in an if-condition?

javascript

checkbox

node.js

ecmascript-6

testcafe