リンク時にタブを変えるHTML記載方法
リンクをクリックした時にタブを変えるHTML記載方法
下記のように、[target:'_blank']をオプションで記述する
<%= link_to 'View Todos', project_tasks_path(@project), target:'_blank', rel: 'noopener' %>
※ポイント
・RSpecテスト実行時の注意点
下記のようなRSpecテストで[expect(page).to have_content task.title]のように、指定したコンテントがpage内にあるのを期待しているような記述をする時は、実際のブラウザ上ではタブが変わってしまっているので、希望しているコンテントは新規のタブに表示されるのでRSpecテストがエラーになってしまう
新規タブでRSpecで指定したコンテントを探すためには、使用するドライバの設定を変える必要がある
<%= link_to 'View Todos', project_tasks_path(@project), target:'_blank', rel: 'noopener' %>
it 'Project詳細からTask一覧ページにアクセスした場合、Taskが表示されること' do # FIXME: テストが失敗するので修正してください visit project_path(project) click_link 'View Todos' expect(page).to have_content task.title expect(Task.count).to eq 1 expect(current_path).to eq project_tasks_path(project) end
[spec/support/driver_setting.rb] RSpec.configure do |config| config.before(:each, type: :system) do driven_by(:rack_test) #タブが切り替える時に使う # driven_by(:selenium_chrome) # RSpecでのブラウザの自動操作の動きをブラウザで確認したい時に利用 # driven_by(:selenium_chrome_headless) # RSpecでブラウザを自動操作でテストを実行してブラウザの動きを見ない場合に利用(headless) end end
・リンクの記述で[target:'_blank']オプションを付与する時の注意点
セキュリティの都合上[rel: 'noopener']オプションも必ず付与しなければいけない(ブラウザによっては、[noopener]がサポートされていないので、[norefferer]も指定しておいた方が良い)
参考記事:
aタグはtarget="_blank"だけじゃNG!rel="noopener noreferrer"をつける - こがMemo
実はヤバい?aタグと別タブで開く(target=”_blank”)の使い方 |ホームページ制作 名古屋 愛知 |株式会社WWG ダブルダブルジー