How do I select a checkbox when I get a path error. I am doing this in cypress-CodePudding

cy.get('[data-ng-show="destact['dest'].length > 0"] > .checkbox-block > :nth-child(1) > .ng-binding').click()

the above is the path to my checkbox. As there are two single quotes, I tried to concatenate them as well but no luck

cy.get('[data-ng-show="destact[' 'dest' '].length > 0"] > .checkbox-block > :nth-child(1) > .ng-binding').click()

CodePudding user response：

Assuming that the selector [data-ng-show="destact['dest'].length > 0"] > .checkbox-block > :nth-child(1) > .ng-binding is a correct selector, you can use backslash to escape the single quotes:

cy.get('[data-ng-show="destact[\'dest\'].length > 0"] > .checkbox-block > :nth-child(1) > .ng-binding').click()

CodePudding user response：

Two problems seem to be occurring when selecting this attribute with the complex expression

<div data-ng-show="destact['dest'].length > 0" ></div>

the quote marks conflict
the square brackets are ending the selector prematurely.

This will work if there's only one element with expression starting destact

cy.get("div[data-ng-show^=destact]")
  .should('have.attr', 'data-ng-show', "destact['dest'].length > 0")
  .find('.checkbox-block > :nth-child(1) > .ng-binding')

If there's more than one element selected by cy.get("div[data-ng-show^=destact]"), you can add a filter for the exact expression

cy.get("div[data-ng-show^=destact]")
  .filter((i, el) => {
    return Cypress.$(el).attr('data-ng-show') === "destact['dest'].length > 0"
  })
  .find('.checkbox-block > :nth-child(1) > .ng-binding')

CodePudding user response：

Back-ticks are also valid delimiters for the selector,

cy.get(`[data-ng-show^="destact['dest'].length > 0"] > .checkbox-block > :nth-child(1) > .ng-binding`)