access test data after test area in cypress

Question

I have an html code with contains

<div class="form-card">

  <h2 class="fs-title" test-data="area_1">
    About DigCompEdu
  </h2>

  <p></p>

  <label for="academic_teaching" class="question" test-data="question_1">
    <b>1- </b>
  </label>
  <small id="academic_teachingHelp" class="form-text text-muted">
  </small>

  <div class="form-check question-form-check ">
    <div class="row">
      <div class="col-1">
        <input class="radio" type="radio" value="0" id="3" name="2" test-data="answer_1" />
      </div>

    </div>

So, I have h1 with testdata name after that i have a form, this form contains question with multin check radio .. i want to access this check , not by just call ([test-data="answer_2"]) because i have another tips and don't want to check them as this one ,

i did smth like this but it's not working :

cy.get('[test-data="area_1"]~[test-data="answer_2"]').check({force: true})

Any one have another idea ?

Answer 1

It might be the ~ between the selectors, I haven't seen that before.

Does it work with a space between instead?

cy.get('[test-data="area_1"] [test-data="answer_2"]').check({force: true})

---

If the heading is followed by the form like this

<h2 class="fs-title"  test-data="area_1">
  About DigCompEdu
</h2> 
<div class="form-check question-form-check ">
  ...

then you would query like this

cy.get('[test-data="area_1"]')
  .next('.form-check')                // next element on page
  .find('[test-data="answer_2"]')     // this looks inside '.form-check'
  .check({force: true})