質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Capybara

Capybaraは、 Rubyで開発されているWebアプリケーションテストフレームワークです。Webブラウザ不要でブラウザ上のユーザー操作及びJavaScriptの挙動を自動化することができます。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

RSpec

RSpecはRuby用のBDD(behaviour-driven development)フレームワークです。

受付中

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

domari
domari

総合スコア0

Capybara

Capybaraは、 Rubyで開発されているWebアプリケーションテストフレームワークです。Webブラウザ不要でブラウザ上のユーザー操作及びJavaScriptの挙動を自動化することができます。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

RSpec

RSpecはRuby用のBDD(behaviour-driven development)フレームワークです。

0回答

0評価

0クリップ

104閲覧

投稿2022/05/22 15:20

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

【バージョン】

  • Ruby 2.7
  • Rails 6.1
  • Bootstrap 4

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

rb

<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>タグでタグが表示されています。

rb

<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 を使用してスタイルを設定しています。

erb

<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 で括ってボタン風にするため、チェックボックスを非表示にしています。

css

.checkbox-visibility { display: none; }

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Capybara

Capybaraは、 Rubyで開発されているWebアプリケーションテストフレームワークです。Webブラウザ不要でブラウザ上のユーザー操作及びJavaScriptの挙動を自動化することができます。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

RSpec

RSpecはRuby用のBDD(behaviour-driven development)フレームワークです。