Rails capybara click label with link

Question

in my rspec feature I try to check a checkbox with it related label because the input is hidden. My label contains link (<a> tag), so every time I use check('user[agree_terms]', allow_label_click: true) it never checks the box but instead open the link contains in the label.

Here's my view generated from ERB

    <p class="col boolean required user_agree_terms">
      <input name="user[agree_terms]" type="hidden" value="0">
      <input class="boolean required" required="required" aria-required="true" type="checkbox" value="1" name="user[agree_terms]" id="user_agree_terms">
      <label class="boolean required" for="user_agree_terms">
        <abbr title="required">*</abbr>
        J'ai accepté les <a target="_blank" href="https://somelink">Conditions Générales d'Utilisation</a> et la <a target="_blank" href="https://somelink">Politique de Confidentialité</a>
      </label>
    </p>

Here's my spec

  # I tried both but its behave the same way : open the <a> tag
  find('label[for="influencer_agree_terms"]').click
  check('influencer[agree_terms]', allow_label_click: true)

Do you know another way to check that box ?

By the way the UI on browser work correctly when I click the label.

Answer 1

When you tell Capybara to click on an element it clicks in the middle of that element which in this case is where you have the conditions link, so that takes the click before the label element. One option would be to specifically click on the abbr element, which is in the label but away from the link

find('label[for="influencer_agree_terms"] abbr').click

Another option would be to take advantage of the fact that allow_label_click supports specifying offsets for the click location

check('influencer[agree_terms]', allow_label_click: { x: 10, y: 10 })

Depending on the setting of Capybara.w3c_click_offset that offset could be from the center or from the top left corner of the label element so adjust the values as necessary. Technically you can do the same thing when calling click

find('label[for="influencer_agree_terms"]').click(x: 10, y: 10)

but it's generally better to use check when dealing with a checkbox