找不到< select>的水豚::元素由上一个元素的onchange填充 [英] Capybara::Element Not Found for <select> populated by onchange of previous element

问题描述

运行 bundle exec rspec 进行表单的功能测试时，出现以下错误：

I get the following error when I run bundle exec rspec for my feature test for a form:

 Failure/Error: select('Boston Commons - Vacation English', :from => 'school_application_program')
 Capybara::ElementNotFound:
   Unable to find option "Boston Commons - Vacation English"

这是我的功能简介摘录：

Here is the snippet of my scenario from my feature spec:

select('Boston Commons', :from => 'school_application_fls_center')
select('Boston Commons - Vacation English', :from => 'school_application_program')

第二行失败。

在我的开发环境中，我访问了场景所访问的相同路径，
执行了先前的选择，然后确认 school_application_program 是< select> 标记的ID，并且选项名称与我正在检查的名称完全相同。

In my development environment I visit the same route that the scenario visits, perform the previous selection, and then confirm that school_application_program is the id of the <select> tag and that the option name is the exact same as the one I am checking.

我唯一的猜测是，由于某种原因，我的JavaScript onchange 函数未正确填充< select> 标记，但是考虑到功能规范应准确反映开发环境，这并没有多大意义。

My only guess, is that for some reason, my javascript onchange function is not properly populating the <select> tag, but that doesn't make a whole lot of sense given that the feature spec should mirror the development environment exactly.

onchange事件绑定到 school_application_program之前的< select> 标记并重置 school_application_program

The onchange event is being bound to the <select> tag immediately preceding school_application_program and resets the options for school_application_program

的选项这是填充我的 school_application_program < select>

Here is the javascript that populated my school_application_program <select>

 $("#school_application_fls_center").change(function(){
var center_id = document.getElementById("school_application_fls_center").value;
var formdata = {center: center_id}; 
$.ajax({
    url: "/application/get_programs_for_center",
    type: "POST",
    datatype: 'json',
    data: formdata,
    success: function(response){
      var options = $("#school_application_program"); 
      removeOptions(document.getElementById("school_application_program"));
      $.each(response.programs, function(i,item) {
        options.append($("<option />").val(response.programs[i].id).text(response.programs[i].name)); 
      });
    }
});
});

这是我的开发环境的快照，显示了表单，完成了规范会在测试失败时手动执行。

This is a shot from my development environment, showing the form, after I have done the behavior that the spec does manually, at the point where the test fails.

推荐答案

所需要做的就是通过添加启用Javascript： js =>定义场景时为true 标志，例如：

All that was required was to enable Javascript via adding the :js => true flag when the scenario was defined, like so:

scenario 'happy path that uses AJAX', :js=>true do
   #etc.
end

这篇关于找不到< select>的水豚::元素由上一个元素的onchange填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！