Capybara: Không thể tìm trường biểu mẫu bằng js: true

Question

Tôi đã viết một số thử nghiệm bằng cách sử dụng capybara để kiểm tra yêu cầu bằng cách sử dụng trình chỉnh sửa và ma ảo làm trình điều khiển javascript.

Các bước sau đây để điền vào một mẫu đăng nhập hoạt động tuyệt vời mà không cần js:

it "signs in" do 
    visit new_user_session_path 
    fill_in "Email", with: user 
    fill_in "Password", with: password||"foobar" 
    click_button "Login" 
end 

Nếu tôi xác định thử nghiệm của tôi với js it "signs in", js: true do thử nghiệm của tôi thất bại với lỗi:

Capybara::ElementNotFound: Unable to find field "Email" 

Các hình thức đăng nhập tự được xây dựng bằng cách sử dụng simple_form như trình tạo biểu mẫu và bootstrap trong giao diện người dùng. Các trường không có nhãn. văn bản tìm kiếm chỉ được chứa trong thuộc tính trình giữ chỗ.

= simple_form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| 
    = f.input :email, :placeholder => User.human_attribute_name(:email), :label => false, :input_html => {:class => 'input-xlarge'} 
    = f.input :password, :placeholder => User.human_attribute_name(:password), :label => false, :input_html => {:class => 'input-xlarge'} 
    %div 
    = f.button :submit, "Login", :class => 'btn btn-large btn-primary' 

Mã này tạo ra mã html sau

<form accept-charset="UTF-8" action="https://stackoverflow.com/users/login" class="simple_form new_user" id="new_user" method="post" novalidate="novalidate"> 
    <div style="margin:0;padding:0;display:inline"> 
    <input name="utf8" type="hidden" value="✓"> 
    </div> 
    <div class="control-group email required user_email"> 
    <div class="controls"> 
     <input class="string email required input-xlarge" id="user_email" name="user[email]" placeholder="Email" size="50" type="email" value=""> 
    </div> 
    </div> 
    <div class="control-group password required user_password"> 
    <div class="controls"> 
     <input class="password required input-xlarge" id="user_password" name="user[password]" placeholder="Password" size="50" type="password"> 
    </div> 
    </div> 
    <div> 
    <input class="btn btn btn-large btn-primary" name="commit" type="submit" value="Login"> 
    </div> 
</form> 

Bạn có bất cứ ý tưởng làm thế nào để đảm bảo rằng các lĩnh vực được tìm thấy ngay cả khi js được kích hoạt?

Answer 1

Tôi không biết bài kiểm tra Webrat của bạn đã trôi qua như thế nào. Theo kinh nghiệm của tôi, Capybara không thể tìm thấy "Email" nếu không có Label hoặc id phù hợp.

Trong trường hợp của bạn, vì bạn không sử dụng nhãn, tôi đề nghị bạn tìm lĩnh vực này với id

fill_in "user_email", with user.email 
# user_email is the id created by simple_form in general case. Verify yours. 
# Don't need "#" before id. 

Answer 2

Chụp ảnh màn hình sau khi visit new_user_session_path và xác minh html đang được trả lại khi: js => đúng.

visit new_user_session_path 
save_and_open_page 

Nếu không có gì đã được trả lại, chỉ là một tài liệu html trống, chắc chắn trong spec_helper.rb bạn

config.use_transactional_fixtures = false 

Ngoài ra hãy thử sử dụng DatabaseCleaner đá quý.

RSpec.configure do |config| 
    config.use_transactional_fixtures = false 

    config.before(:suite) do 
    DatabaseCleaner.clean_with :truncation 
    end 

    config.before(:each) do 
    if example.metadata[:js] 
     DatabaseCleaner.strategy = :truncation 
    else 
     DatabaseCleaner.strategy = :transaction 
    end 
    DatabaseCleaner.start 
    end 

    config.after(:each) do 
    DatabaseCleaner.clean 
    end 
end