無法讓我的Rspec測試的JavaScript單擊事件通過

我需要幫助解決我的Rails 4應用程序中Javascript click事件的Rspec功能測試問題。我正在使用Capybara，FactoryGirl和種子文件來存儲數據。 Poltergeist是Capybara的JavaScript驅動程序。我遇到麻煩的測試涉及一個圖像地圖，當用戶單擊熱點時，會選擇下拉菜單選項。我的應用程序代碼在瀏覽器中按預期工作。該腳本按預期在測試期間執行，但我無法編寫通過測試（期望）。無法讓我的Rspec測試的JavaScript單擊事件通過

下面是從規範文件中的相關代碼：

feature 'Clicking hotspots on image map' do 

scenario 'selects chest muscle group', js:true do 
    login 
    expect(page).to have_content ("New Strength Exercise") 
    #binding.pry 
    page.execute_script("$('#map_chest_strength').click()") 
    #save_and_open_page 
    expect(page).to have_select("#strength_exercise_muscle_group_id", with_options: "Chest - pectoralis") 
end 
end

當我運行測試，我得到以下錯誤：故障/錯誤：期待（頁）。爲了have_select（「＃strength_exercise_muscle_group_id」 with_options：「胸部 - 胸肌」）希望能夠找到選擇框「#strength_exercise_muscle_group_id」至少選擇「胸部 - 胸大肌」，但沒有比賽

下面是相關的JavaScript/jQuery代碼：

//Chest Muscle Group & Strength Exercise  
$("#map_chest_strength").click(function(){ 
    var chestID = 1; 
    var muscle_group = $("#strength_exercise_muscle_group_id option[value='" + chestID + "']").attr("selected","selected"); 
    console.log(muscle_group); 
//Filters Strength Exercises by Chest Muscle Group   
    filterStrengthExercises(); 
//Gets exercise description when user clicks muscle group via image map 
    getDescription(); 
}); // end image map - chest click event

下面是相關的HTML源代碼：

<h4><span class="number">1</span>Choose target muscles</h4><br> 
<label class="string optional" for="strength_exercise_muscle_group">Muscle group</label><br /> 
<select id="strength_exercise_muscle_group_id" name="strength_exercise[muscle_group_id]"><option value="">Your target muscles</option> 
<option value="1">Chest - pectoralis</option></select>

種子文件被加載在測試環境中，然後單擊事件激發預期。「胸部 - 胸部」被選爲瀏覽器中的下拉選項。爲什麼我的Rspec期望失敗？我做錯了什麼，以及如何修復測試？謝謝您的幫助！

來源

2015-11-05 codeinspired

是否存在某個特定的原因點擊通過execute_script而不是'find（'＃map_chest_strength'）。click（）'？通過JS觸發它並不總是觸發使用試圖模擬用戶的方法所做的所有事件。此外 - 你使用什麼版本的poltergeist，並且你能展示應該由點擊觸發的JS。 –

最初，我用「find（'＃map_chest_strength'）。click（）」編寫了測試，但Capaybara說它找不到css。我正在使用poltergeist（1.7.0）。用相關的JS/JQuery代碼查看更新的問題。 – codeinspired

幾件事情：首先，水豚找不到css應該關注你 - 你確定它確實在頁面上並且可見嗎？（如果該項目甚至不在頁面上，則您的execute_script不會引發錯誤）。其次，您應該使用'.prop（「selected」，true）'將選項設置爲選中狀態而不是.attr - 當您說「...在瀏覽器中按預期工作時」是在生產模式下還是僅在dev模式？這可能導致你的代碼中有JS錯誤，因爲它們在測試模式下連接，但不在開發模式下 –

的have_select匹配取標籤，名稱，或選擇框（未CSS選擇），並且with_options的ID帶有一個數組所以它應該是

expect(page).to have_select("strength_exercise_muscle_group_id", with_options: ["Chest - pectoralis"])

這將檢查該選擇用至少可以選擇「胸 - 胸」選項。如果您要驗證的選擇存在，並且選項被選中這將是

expect(page).to have_select("strength_exercise_muscle_group_id", selected: "Chest - pectoralis")

注 - 所選的選項可以是一個字符串數組，如果選擇框是一個多選

此外，在您的JS你正在使用.attr（「selected」，「selected」）來設置選擇的狀態，應該真的是.prop（「selected」，true）（所有布爾屬性相同），它設置元素屬性是正確的指示是否選擇了一個選項（而不是屬性，在這種情況下，該屬性在頁面加載時真的只有相關）

來源

2015-11-05 18:45:15

無法讓我的Rspec測試的JavaScript單擊事件通過

回答

相關問題