Capybara (Selenium WebDriver) で select2 バージョン 4 以降を操作する

• 普通に Capybara の select が使える。 StackOverflow でいろいろ小難しいやり方が出てくるが、古いバージョン用なので無視してよい
• テキスト検索するやつだけちょっと工夫が必要
  1. まずテキストフィールドを表示させるために .select2-selection__arrow を click してセレクトボックスを開く。他の select2 な要素と誤爆しないように within で囲う必要があるかもしれない
  2. 次にテキストフィールドに文字を入力する。このときテキストフィールドは .select2-selection__arrow を包含するコンテナ要素の中ではなく、 DOM ツリーでいうともっと外側の </body> 直前にある。 within の中からはアクセスできないので注意すること
  3. ユーザー入力テキストの値に応じて Ajax でデータを取得するタイプのセレクトボックスの場合、データのロードと表示を待ってから Enter キーを押す

https://github.com/kyanny/playground/blob/gh-pages/select2-v4-capybara/select2_v4_capybara.rb

require 'capybara'
require 'capybara/dsl'
require 'selenium-webdriver'

include Capybara::DSL

Capybara.default_driver = :selenium
Capybara.app_host = 'https://select2.github.io'

visit '/examples.html'


## Normal select

# Hack: Capybara's `select` DSL requires name attribute of select tag, so need to add attr
execute_script %Q|
$(
  $('.js-example-basic-single')[0]
).attr('name', 'foo');
|
select 'California', from: 'foo'
sleep 2

## Search text (waiting ajax call)

# 1. open text field
within '.js-example-data-ajax + .select2-container' do
  find('.select2-selection__arrow').click
end

# 2. input text (`input` element is rendered in very outside of HTML DOM tree)
within '.select2-dropdown' do
  find('.select2-search__field').send_keys('a')

  # 3. wait for ajax load to choose option
  loop until has_content?('angular/a', wait: 10)

  # 4. choose first one
  find('.select2-search__field').send_keys(:enter)
end

sleep 2
execute_script %Q|
alert('Whoa! Done!');
|
sleep 2
puts "Whoa! Done!"