复选框选中断言不通过

Question

My scenario is, that i want to make a page object for check-boxes in general. With this page object, i can see if any desired check-box (at the moment in the given example is the 'Display Category' check-box), is checked, and if not, to check the same and afterwards assert that it is indeed checked.

So in my page object file i have the following:

/* Class where the check-box will be marked - using the below class Page, together with this class Feature, using a method given in the the Test-code (at the end), i am trying first to click on the label (feature.label), thus checking the check-box, and then assert to see if the check-box is indeed marked as checked ( .expect(feature.checkbox.checked).ok(); )

// this will translate to:
// click.Selector('coral-checkbox-label').withText('Display Category);

// expect(Selector('coral-checkbox-label').withText('Display
// Category).parent(0).parent(0).checked).ok; // or

// expect(Selector('coral-checkbox-label').withText('Display
// Category).parent(0).parent(0).child(0).checked).ok

// I use either the parent or the child, because:
// 1. Parent is used because, when marking the check-box, and inspecting, the 'checked' element is // shown on the parent (coral-checkbox)
// 2. In a similar issue, the solution is to do the assertion if the check-box is checked, on the
// element which is of type . In my code, this translates to the above mentioned child(0).
https://stackoverflow.com/questions/54153903/testcafe-test-script-checkbox-checked-always-return-false-even-when-checked-how

    Helper.js // filename
_const label = Selector('coral-checkbox-label');

export class Feature {
constructor (text) {
this.label = label.withText(text);
this.checkbox = label.parent(0).parent(0) // .child(0)
// the reason .child(0) is commented will be mentioned in the following
}
}

// List of all desired check-boxes taken by label
export class Page {
constructor () {
this.featureList = [
new Feature('Display Category')
];
}
}_

 // Test code where check-boxes should be checked and asserted
import Page from Helper.js
let page = new Page();
for (const feature of page.featureList) {
console.log(feature.checkbox);
await t
.click(feature.label)
.wait(5000)
.expect(feature.checkbox.checked).ok();
}

// Either way i execute, i get the following report:

AssertionError: expected false to be truthy

Answer 1

If you use a non-standard element with a specific attribute, you should use the hasAttribute function to check that some attribute exists on the element.

I created an example on github, which illustrates my solution. Please modify my example to reproduce the issue, if it does not help you.