I am writing a cypress test for radio to check whether it is private or public.
HTML Section
<div _ngcontent-c6="" class="form-check form-check-inline mb-1">`
<input _ngcontent-c6="" class="form-check-input ng-untouched ng-pristine ng-valid" formcontrolname="projectStatus" id="private" name="projectStatus" type="radio" ng-reflect-name="projectStatus" ng-reflect-form-control-name="projectStatus" ng-reflect-value="false" ng-reflect-model="false">
<label _ngcontent-c6="" class="form-check-label" for="private">Private</label>
</div>
Cypress Test
cy.get('#private').should('have.attr', 'checked', 'true') // Not working
cy.get('[type="radio"]').should('have.attr', 'ng-reflect-value', 'false') // Not Working
Part of the problem is when I console I see the message <input#private.form-check-input.ng-untouched.ng-pristine.ng-valid>
I could not find the attribute ng-reflect-checked
Anyone did cypress test for radio button made in Angular?
This would be a solution too:
cy.get('for=["private"]')
.parent()
.find('input')
.should('be.checked')
This way you don't need extra attributes to the input element.
Well I added a value attribute in the input
<input _ngcontent-c6="" class="form-check-input ng-untouched ng-pristine ng-valid" formcontrolname="projectStatus" id="private" name="projectStatus" type="radio" ng-reflect-name="projectStatus" ng-reflect-form-control-name="projectStatus" ng-reflect-value="false" ng-reflect-model="false" **value="false"**>
The cypress code
cy.get('#private').should('have.attr', 'value', 'false')
I hope 🤞 someone has a better solution.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With