How do I check a checkbox element according to the value in cypress, while the value attribute does not exist. I want to check the checkbox according to the value, not the id, because the id is different for each page.

Because in some pages, the id starts with c1, and some page ids start with c2, and some start with c5. How would I check the element according to value? I got the selector for all 3 checkboxes, but it checked all the 3 elements. I want specific element according to value attribute, but there there is no value attribute. i tried this

             cy.get('.x-overlay__wrapper--right input[type="checkbox"]').check()

but it checked all the element and this checked the first element

             cy.get('.x-overlay__wrapper--right input[type="checkbox"]').first().check()

but I want the checked according to value, but here in attributes there is no value attribute.

the value that i want is just written next to checkbox

and here in html

How do I check a checkbox element according to the value in cypress, while the value attribute does not exist. I want to check the checkbox according to the value, not the id, because the id is different for each page.

Because in some pages, the id starts with c1, and some page ids start with c2, and some start with c5. How would I check the element according to value? I got the selector for all 3 checkboxes, but it checked all the 3 elements. I want specific element according to value attribute, but there there is no value attribute. i tried this

             cy.get('.x-overlay__wrapper--right input[type="checkbox"]').check()

but it checked all the element and this checked the first element

             cy.get('.x-overlay__wrapper--right input[type="checkbox"]').first().check()

but I want the checked according to value, but here in attributes there is no value attribute.

the value that i want is just written next to checkbox

and here in html

• javascript
• html
• checkbox
• css-selectors
• cypress

• Please add a Minimal Reproducible Example. In other words, what have you already tried? – shreyasm-dev Commented Jul 24, 2020 at 1:07
• I posted an answer. Does the code work? – shreyasm-dev Commented Jul 24, 2020 at 1:18
• I updated to match your needs. – shreyasm-dev Commented Jul 24, 2020 at 1:42

2 Answers 2

Looking at the html, perhaps search for the text then use parent and sibling mands to shift the subject to the checkbox, something like

cy.contains('span', 'Free Shipping')  // find your text
  .parent('div')                      // move to parent div
  .siblings('span.checkbox')          // move to checkbox span
  .find('input')                      // select it's input
  .check();                         

Example with ments explaining the code:

cy.get('.x-overlay__wrapper--right input[type="checkbox"]').each((checkbox, i) => { // Get the elements and run .each() on them
  if (cy.get('.cbx.x-refine__multi-select-cbx')[i].innerHTML === "value") { // If the value is something, perform an action. Replace "value" with the value that you need to test it for
    checkbox.check()
  }
})