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

admin管理员组

文章数量:1417033

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.

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

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: .html

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 pletely. 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.

EDIT: 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)

More plete code:

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

Selectors:

 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!

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.

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

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

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 pletely. 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.

EDIT: 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)

More plete code:

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

Selectors:

 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!

• javascript
• node.js
• checkbox
• ecmascript-6
• testcafe

Share Improve this question Follow asked Jan 11, 2019 at 20:53 Seth EdenSeth Eden 1,16222 gold badges2121 silver badges4343 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

The method:

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

is targeting a <span class="check"> element.

So when you are calling this helper method:

var checkbox = await projectDetails.tableRowCheckBox(fileName);

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.

This means checkbox.checked is always undefined

Your code should be:

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

本文标签：