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

user_12871503 0
Viewed 62
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()
cypress testing path automation javascript
3 Answers

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`)
user_168836810

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

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')
user_169977070
Related