如何在經過驗證的頁面上測試JavaScript隱藏/顯示行爲？

上下文：當用戶登錄並查閱自己的個人資料時，他可以點擊他的頭像，此點擊顯示一個帶有「上傳頭像」選項的下拉菜單。當用戶點擊這個選項時，它會打開一個表單，用於上傳頭像的新圖像。我使用twitter bootstrap來處理下拉（和模態）。如何在經過驗證的頁面上測試JavaScript隱藏/顯示行爲？

當然，我想測試這個。但我不知道如何。

讓我們集中於下拉功能，如模態測試將可能幾乎相同：

起初我在考慮使用水豚的，但沒有辦法檢查元素是否通過它的CSS屬性display: none可見或display: block。我讀過一些人建議通過水豚檢查類如hidden。但在這種情況下，因爲我使用的是Twitter Bootstrap，因此僅有一個dropdown。

我不想修改bootstrap行爲只是爲了能夠測試它，這將是一種氣味。

這裏是我的RSpec套件的一個樣本：

describe 'should display a dropdown menu' do 
    let(:user) { FactoryGirl.create :user } 
    before do 
    sign_in_as user 
    # I have routes just like that: /1/firstname-lastname 
    visit(profile_path(id: user.id, first: user.first_name.downcase, last: user.last_name.downcase)) 

    click_link 'avatar-dropdown' 
    end 
    it { should have_css('.dropdown-menu', visible: true) } 
    describe 'with an upload link' do [...] end 
end

的HTML看起來像：

<div class="dropdown" id="avatar-menu"> 
    <a class="dropdown-toggle" id="avatar-dropdown" data-toggle="dropdown" href="#avatar-menu"> 
    <%= @user.avatar %> 
    </a> 
    <ul class="dropdown-menu"> 
    <li><a class="upload-avatar" href="#">Upload an image</a></li> 
    </ul> 
</div> <!-- #upload-menu -->

當然，它不與visible: true工作，爲display: none由Twitter的引導的設置CSS。

然後，我考慮用Jasmine測試這種行爲（一個很好的機會潛入），但是如果我這樣做，我應該如何註冊一個用戶？我不知道它是否共享測試數據庫，但我不認爲我可以使用工廠女孩在茉莉花中創建新用戶，對嗎？我甚至不知道是否訪問茉莉花的註冊頁面（如果它甚至可能？）並提交表單將做伎倆。與認證一樣。

我該如何測試這些行爲？我應該使用水豚（有沒有一個技巧？）或茉莉花（什麼是去的方式，然後？）

謝謝！

來源

2012-07-11 Gabriel Dehan

嗯，我設法使事情與水豚一起工作。我不知道它會爲每一個其它情況下工作，但對我來說它的工作：

我們需要通過傳遞js: true要麼describe或it

describe 'should display a dropdown menu', js: true do 
    let(:user) { FactoryGirl.create :user } 
    before do 
    sign_in_as user 
    # I have routes just like that: /1/firstname-lastname 
    visit(profile_path(id: user.id, first: user.first_name.downcase, last: user.last_name.downcase)) 

    click_link 'avatar-dropdown' 
    end 
    it { should have_css('.dropdown-menu', visible: true) } 
    describe 'with an upload link' do [...] end 
end

這種方式來激活Selenium的水豚，水豚似乎真的檢查該屬性是否可見。它每次運行測試時都會啓動Firefox，這可能會非常痛苦。

來源

2012-07-12 06:45:59

起初我在考慮使用水豚的，但沒有辦法檢查元素是否是通過它的CSS屬性顯示中可見：無或顯示：塊

你不能做例如：

page.has_xpath?("/xpath/here[contains(@style, 'display: block')]")

其中'display：none'將在'visible：block'不可見時替換'display：block'。

來源

2012-07-31 17:52:13 ampecho

如何在經過驗證的頁面上測試JavaScript隱藏/顯示行爲？

回答

相關問題