1

我有以下复选框元素

<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>

我尝试使用单击复选框

    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()

没有一个工作，元素没有被点击，值没有改变

我正在使用 cypess 7 和 macos。浏览器是chrome。

编辑：在页面上，我有一个需要单击的复选框“销售条款”

4

3 回答 3

1

尝试这个 ：

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

或者

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

它螨虫帮助你。

于 2022-01-31T18:20:02.593 回答
0

离子复选框的两件事，阴影 DOM 的大量使用，因此将开关添加到cypress.json

{
  "includeShadowDom": true
}

该复选框的实现<input type="hidden" >是不寻常的，它使赛普拉斯误以为它不是一个复选框，因此您必须使用.click()而不是.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"

参考：使用 Ionic 和 Cypress 端到端测试移动应用程序

于 2022-01-31T19:41:15.643 回答
0

您可以contains结合使用文本和选择器。

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

或与{force: true}

cy.contains('[data-name="cta_confirmtermsofsale"]', 'Terms of sale')
  .should('exist')
  .click({force: true})
于 2022-01-31T10:58:56.740 回答