Capybara を使用してテストする際に collection_check_boxes でチェックボックスを表示してチェックを入れたい

Question

collection_check_boxes でチェックボックスを表示してチェックを入れたいのですが、見つかりませんとエラーが出てしまうのを解決できず、質問させていただきます。

【バージョン】

• Ruby 2.7
• Rails 6.1
• Bootstrap 4

アプリではモーダルボタンを押下するとフォームが表示されその中にチェックボックスがある使用になっております。
DOM上はモーダル部分にあたるHTMLが生成されているので、save_and_open_pageで見るとモーダルは描画されているが、テストではcollection_check_boxesで書いた部分が全く表示されずに困っています。

<div class="form-group mt-3 tag-group">
    <svg class="svg-inline--fa fa-tag fa-w-16 tag-color" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="tag" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z"></path></svg><!-- <i class="fas fa-tag tag-color"></i> Font Awesome fontawesome.com -->タグ
    <ul class="row px-3">
          </ul>
  </div>
  <small>* 最大2つまで選択可能です *</small>

アプリでのブラウザのソースコードは下記のように<li>タグでタグが表示されています。

<div class="form-group mt-3 tag-group">
    <svg class="svg-inline--fa fa-tag fa-w-16 tag-color" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="tag" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z"></path></svg><!-- <i class="fas fa-tag tag-color"></i> Font Awesome fontawesome.com -->タグ
    <ul class="row px-3">
      <li class="form-check col-6 col-md-4 col-lg-2 flex-wrap px-2">
        <label class="border rounded-pill w-100 post-form-tag-ids-1" for="post_form_tag_ids_1">
          <input class="checkbox-visibility" type="checkbox" value="1" name="post_form[tag_ids][]" id="post_form_tag_ids_1" />
          <span class="d-flex justify-content-center rounded-pill w-100 checkbox-position">
            キッチン
          </span>
        </label>
      </li>
    </ul>
  </div>
  <small>* 最大2つまで選択可能です *</small>

【HTML】
class 属性でBootstrap を使用してスタイルを設定しています。

<div class="form-group mt-3 tag-group">
  <i class="fas fa-tag tag-color"></i>
  <ul class="row px-3">
    <%= form.collection_check_boxes :tag_ids, Tag.all.order(id: :asc), :id, :name, include_hidden: false do |b| %>
      <li class="form-check col-6 col-md-4 col-lg-2 flex-wrap px-2">
      <%= b.label class:"border rounded-pill w-100 post-form-tag-ids-#{b.value}" do %>
        <%= b.check_box class: "checkbox-visibility" %>
        <span class="d-flex justify-content-center rounded-pill w-100 checkbox-position">
          <%= b.text %>
        </span>
      <% end %>
      </li>
    <% end %>
  </ul>
</div>

　　
【css】
label で括ってボタン風にするため、チェックボックスを非表示にしています。

.checkbox-visibility {
  display: none;
}

　　
初心者の質問になりますが、ご教授いただけたら幸いです。