1

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

Achtung
  • 199
  • 9
FarFarAway
  • 1,017
  • 3
  • 14
  • 35

3 Answers3

2

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

Fody
  • 23,754
  • 3
  • 20
  • 37
  • DId not work. I am getting cy.check() can only be called on :checkbox and :radio. I updated the post to include the whole html element. please referes – FarFarAway Feb 01 '22 at 08:08
  • @FarFarAway - you are still using `check()`? See above, you should `click()` not `check()`. – Fody Feb 01 '22 at 08:31
  • If it's hidden, you may need `.click({force:true})` – Fody Feb 01 '22 at 08:34
0

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})
Alapan Das
  • 17,144
  • 3
  • 29
  • 52
  • this did not work. – FarFarAway Jan 31 '22 at 11:11
  • I updated the answer with `exist`, please try with that. If that also doesn't work please add the error screenshot. – Alapan Das Jan 31 '22 at 11:25
  • It did not work also. also this cy.contains('[data-name="cta_confirmtermsofsale"]') .should('exist') .click() did not work. the error is expected to find element, but never did – FarFarAway Jan 31 '22 at 11:30
  • 1
    Without seeing the error or more information about your DOM, I won't be able to debug more. I am assuming that the checkbox has a label of `Terms of sale` text and that the checkbox is not inside an iframe. – Alapan Das Jan 31 '22 at 12:58
  • I have included the complete HTML element on my original question. Thanks in advance – FarFarAway Feb 01 '22 at 09:03
0

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.

Achtung
  • 199
  • 9
Umesh Sulakude
  • 286
  • 2
  • 14