无法让我的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单击事件通过

回答

相关问题