10

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?

Mr. J.
  • 3,499
  • 1
  • 11
  • 25
Rahul Thawal
  • 241
  • 1
  • 3
  • 13

2 Answers2

10

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.

Mr. J.
  • 3,499
  • 1
  • 11
  • 25
3

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.

Mr. J.
  • 3,499
  • 1
  • 11
  • 25
Rahul Thawal
  • 241
  • 1
  • 3
  • 13
  • Thanks for this solution. It turned out to be the most useful command. I was struggling to figure out a way to cross-check an attribute value with cypress and this one worked! – Arun Ramachandran Aug 02 '20 at 12:16