Question

I have the following checkbox element

<div _ngcontent-qcu-c225="" class="checkbox-section terms-of-sale"><div _ngcontent-qcu-c225="" class="checkbox-wrapper"><ion-checkbox _ngcontent-qcu-c225="" data-cy="terms-of-sale-checkbox" formcontrolname="acceptTermsOfSale" data-name="cta_confirmtermsofsale" class="checkbox ng-untouched ng-pristine ng-invalid ios interactive hydrated ion-untouched ion-pristine ion-invalid" aria-checked="false" role="checkbox"><input type="hidden" class="aux-input" name="ion-cb-0" value=""></ion-checkbox></div><div _ngcontent-qcu-c225="" class="legal"><span _ngcontent-qcu-c225="" class="valid"><p _ngcontent-qcu-c225=""> I accept the <a _ngcontent-qcu-c225="" data-cy="external-terms-of-sale-link" target="_blank" class="link">Terms of Sale</a></p></span></div></div>

I have tried to click the check box using

    cy.get( [data-cy="terms-of-sale-checkbox"]:last input ).should( exist ).click({force: true, multiple: true});

    cy.get( [data-cy="terms-of-sale-checkbox"] input ).should( exist ).click({force: true, multiple: true});

    cy.get( [data-cy="terms-of-sale-checkbox"] ).check()

neither one has worked , the element does not get clicked, the value dose not change

I am using cypess 7 with macos. the browser is chrome.

EDIT: On the page I have a single checkbox "Terms of sale" which needs to be clicked

Answer 1

Two thing with ionic checkbox, there s heavy use of shadow DOM so add the switch to cypress.json

{
  "includeShadowDom": true
}

The checkbox is implemented with <input type="hidden" > which is unusual and it fools Cypress into thinking it s not a checkbox, so you have to use .click() instead of .check()

cy.get( [data-cy="terms-of-sale-checkbox"])
  .find( input )
  .invoke( val )
  .should( eq ,   )  // empty on page load

cy.get( [data-cy="terms-of-sale-checkbox"])
  .click({force:true})   // {force:true} if it s hidden, but try without first

cy.get( [data-cy="terms-of-sale-checkbox"])
  .find( input )
  .invoke( val )
  .should( eq ,  on )  // switched to "on"

Ref: End-to-end Testing Mobile Apps with Ionic and Cypress

Answer 2

Try this :

cy.get( [data-cy="terms-of-sale-checkbox"] input ).should( include.text ,  Terms of sale )

or

cy.get( [data-cy="terms-of-sale-checkbox"] input ).invoke( text ).then(text) => {
  expect(text).contains( Terms of sale )
}

it might help you.

Answer 3

You can use contains with the combination of text and selector.

cy.contains( [data-name="cta_confirmtermsofsale"] ,  Terms of sale )
  .should( exist )
  .click()

or with {force: true}

cy.contains( [data-name="cta_confirmtermsofsale"] ,  Terms of sale )
  .should( exist )
  .click({force: true})

友情链接