Cypress testing props in component

Question

I am currently doing an integration test with Cypress and there is a point where I don't know how to solve in the proper way (meaning that I don't want to use the cypress selector tool in order to get a certain element within the DOM)

The situation being that I work with a 'in-house' styling library, therefore my go-to blogs and such is a bit limited. As an example of many, I have a checkbox like below:

<RadioButton
  left={{
    label: 'yes',
    value: true,
  }}
  right={{
    label: 'no',
    value: false,
  }}
/>

If I add an id to this component, cypress will find one element, which makes it impossible to afterwards ask to 'click' in one of them to test what happens when the state is changed.

Any idea on how can I approach this issue?

Can you expand on what the issue is with adding an `id`? As you said, if you add an `id`, cypress will find the element with the `id`. Why would it be impossible to click it? — Axel, Jan 16 '22 at 21:48
what I am trying to say is that cypress will find the ID, but that would be the 'container' of the buttons. To be able to click in one of them, I would need to go deeper and tell Cypress to click in 'yes' or 'no', which I don't know if its possible — Guillermina Martinez, Jan 16 '22 at 22:05
I did a quick search for "cypress nested selectors" and found many previous questions https://stackoverflow.com/questions/56876330/how-do-i-target-a-nested-input-that-has-no-id-attribute-using-cypress — Bugbeeb, Jan 16 '22 at 23:33
Does this answer your question? [How do I target a nested input that has no id attribute using Cypress?](https://stackoverflow.com/questions/56876330/how-do-i-target-a-nested-input-that-has-no-id-attribute-using-cypress) — Bugbeeb, Jan 16 '22 at 23:33

score 1 · Answer 1 · answered Jan 17 '22 at 03:12

The <RadioButton> splits into two elements, one with "Yes" and the other with "No".

To select one or the other sub-elements, add the id to the container and use what Cypress calls Traversal commands, maybe this

cy.get('#radiobutton')  // select parent with id
  .children()           // both Yes and No sub-elements
  .eq(0)                // pick Yes
  .click()

Inspect the DOM of the web page to see exactly what shape the elements have.

Cypress testing props in component

1 Answers1