假裝看不見的capybara

昨天被水豚君搞到快崩潰QQ
只不過想要讓他幫我選個下拉選單怎麼覺得人生好難
就是下面這個樣子的select，但是卻一直跳error說找不到

 Capybara::ElementNotFound: Unable to find select box "court_observer_school"

上網google一下感覺問的人還蠻多的,不過有回說有找到答案的好像沒有很多？可能大家狀況都不一樣

• 別人的狀況：
  option裡面的值是model裡面撈出來的，但是rails裡面test的model是分開來的，所以抓不到東西
  但我的不是啊啊啊啊啊，所以這不是我要的答案
• 別人的狀況2:
  其實你html裡面真的沒有那個東西吧?!
  不過我有確定我測試在跑的時候html真的有把select生出來,可是水豚君就是當他不存在QQ

最後聖杯君（？！）幫我找到了原因
先說結論:

• 我搜尋的select court_observer_school是個display: none的東西，水豚君預設是看不到他的
• 我在網頁上看到的select其實是js產生的,所以如果你把developer
  tool打開來的話，選下拉選單會看到有東西閃一下（就是下面那個div.chosen-container的部分),不過水豚君是管不到他的

解決方法,加下面這行讓他看得到隱藏起來的東西

Capybara.ignore_hidden_elements = false

不過因為這是把預設值改掉,用完要記得改回來
不過因為這是把預設值改掉,用完要記得改回來
不過因為這是把預設值改掉,用完要記得改回來
（很重要所以講三次)
總之就是一個因為不熟水豚君&沒發現選單是js產生造成的悲劇………

<div class="form-group select optional court_observer_school">
    <select class="select optional form-control" name="court_observer[school]" id="court_observer_school" style="display: none;">
        <option value="">目前就讀學校（選填）</option>
        <option value="A學校">A學校</option>
        <option value="B學校">B學校</option>
        <option value="C學校">C學校</option>
    </select>

    <div class="chosen-container chosen-container-single chosen-container-active" style="width: 296px;" title="" id="court_observer_school_chosen">
        <a class="chosen-single">
            <span>C學校</span>
            <div>
                <b></b>
            </div>
        </a>
        <div class="chosen-drop">
            <div class="chosen-search">
                <input type="text" autocomplete="off">
            </div>
            <ul class="chosen-results">
                <li class="active-result" data-option-array-index="0">目前就讀學校（選填）</li>
                <li class="active-result result-selected" data-option-array-index="1">A學校</li>
                <li class="active-result" data-option-array-index="2">B學校</li>
                <li class="active-result result-selected" data-option-array-index="3">C學校</li>
            </ul>
        </div>
    </div>
    <label class="select optional control-label control-label" for="court_observer_school">學校
    </label>
</div>

Written with StackEdit.