TestCafe测试脚本checkbox.checked即使被选中也总是返回false，如何在if条件下检查checkbox状态? [英] TestCafe test script checkbox.checked always return false even when checked, how can I check the checkbox state in an if-condition?

问题描述

这是我的问题的摘要:在文件共享应用程序中，我们有一个带有复选框和文件名的表.表格顶部是设置预览"按钮，该按钮可使预览轮播始终显示默认预览项目.用户可以单击一个复选框，然后单击设置预览按钮，预览项目将更改，预览轮播也会更新.

Here is a summary of my problem: We have a table with check boxes and file names in a file sharing application. At the top of the table is a Set Preview button that lets the preview carousel to always display the default preview item. Users can click a check box and click the set preview button and the preview item will change and the preview carousel will update.

我有一个测试自动化脚本，可以使用TestCafe，NodeJS&ES6.

I have a test automation script that tests this behavior written in JavaScript using TestCafe, NodeJS & ES6.

在测试设置的预览"时，单击要为其设置预览的项目的复选框.然后，单击设置预览"按钮.确认在我们刚刚单击复选框的那一行上设置了预览图标.有一些注意事项:当用户单击复选框时，如果所选复选框已经将预览设置为该行，则设置预览按钮将被禁用.同样，当单击设置的预览时，选中的任何行也会自动取消选中.

When we test the set Preview we click the checkbox for the item that we want to set the preview for. Then we click the Set Preview button. Confirm that the preview icon is set on that row where we just clicked the checkbox. There are some things to note: When the user clicks the checkbox, if the checkbox that is selected already has the preview set to that row, than the set preview button is disabled. Also when the set preview is clicked, whatever row was checked is automatically unchecked.

因此，如果选中了已设置预览的行，则用户将无法单击设置的预览，因此永远不会取消选中该复选框.重置循环并检查下一个项目后，现在将检查两个项目，并禁用设置的预览，因为无法使用设置的预览来设置两个项目.

So if a row that already has a preview set on it is checked then the user will not be able to click the set preview and hence the checkbox is never unchecked. When the loop resets and the next item is checked, there are now two items that are checked and the set preview is disabled, because it's not possible to set two items with the set preview.

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

I've added code to check if the current row is checked and if it is; to uncheck it. The trouble is that when I check the state of the checkbox to see if it is checked:

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

即使选中此复选框，它也会返回false.因此，它永远不会未经检查，脚本也会失败.TestCafe网站在此处提供了类似的示例: https://devexpress.github.io/testcafe/documentation/test-api/actions/click.html

This returns false, even though the checkbox is checked. So it never gets unchecked and the script is failing. The TestCafe website gives a similar example of how to do this here: https://devexpress.github.io/testcafe/documentation/test-api/actions/click.html

所以我认为它应该可以工作，并且互联网上还有其他一些表格可以对复选框进行类似的if-condition检查，因此这看起来像是有效的代码，但仍然无法正常工作.

So I figured it should work, and there are a few other forms out on the internet that show similar if-condition checks on check-boxes, so this seems like valid code, but yet it still isn't working.

我尚未尝试过的一种可能的解决方案是检查预览行是否已设置为当前行，以及是否要完全跳过该行.但是，即使这解决了我的全部问题，我仍然想解决这个问题.这就是为什么我在这里发布它.

One possible solution I haven't yet tried is to check if the preview row is already set to the current row, and if it is to skip that row completely. However, even if that solves my over-all problem, I'd still like to solve this problem. That is why I have posted it here.

在另一个说明上，在添加if条件(失败)之前，在我看来，我已经单击了其中，然后运行了脚本，并且光标移至复选框以取消选择它，但实际上并没有取消选中该复选框.尽管我可能会误会，它只是在设置了预览"后重新选择了该复选框，该预览本身会自动取消选中该复选框.(好吧，我的头真的转了一圈)

On another note, before I added the if-condition (that is failing), it seemed to me that I had the click in there, and I ran the script, and the cursor moved to the checkbox to unselect it, but it didn't actually uncheck the checkbox. Although I could have been mistaken and it was just re-selecting the checkbox after doing the set Preview, which itself automatically unselected the checkbox. (OK now my head is really going in circles)

更完整的代码:

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');

对不起，我无法访问该网站本身，因为这将侵犯知识产权.

Sorry I cannot give access to the website itself, as that would be a breach of Intellectual Property.

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

I hope I've included all the information that I can to find a possible solution.

在此先感谢您提供的帮助！

Thank you in advance for any help you can give!

推荐答案

方法:

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

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

因此，当您调用此辅助方法时:

So when you are calling this helper method:

var checkbox = await projectDetails.tableRowCheckBox(fileName);

您获得< span> .问题在于， checked 属性仅对于< input type ="checkbox"> 元素存在，而在< span> 上不存在>元素.

you obtain a <span>. The problem is that the checked property only exists for <input type="checkbox"> element and does not exist on <span> element.

这意味着 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即使被选中也总是返回false，如何在if条件下检查checkbox状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！