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条件检查,所以这看似有效的代码,但它仍然无法正常工作.

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

编辑:另一方面,在我添加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 ) {
      ...
    }