2016-07-16 2 views
0

레일 5와 카피 바라를 사용하고 있습니다. 간단한 레일 뷰 검색 양식을 만들었습니다. 제출시 vanilla JS는 preventDefault를 사용하고 검색 결과를 얻기 위해 AJAX를 수행합니다. 그런 다음 결과가 표로 패키지화되어 DOM에 추가됩니다. 페이지가 잘 작동하지만 capybara가 내 기능 사양에 협조하지 않습니다.왜 카피 바라는 AJAX 호출 후에 삽입 된 새 DOM 요소와 일치하지 않습니까?

expected to find css "#search_results table" but there were no matches.

내가보기에 이미 존재했던 css와 일치했기 때문에 Capybara는 JS가 소개 한 요소가 아닌 정확하게 일치하는 부분을 올바르게 처리 할 수 ​​있습니다.

저는 Capybara matchers에서 몇 가지 표준 Ruby sleep xwait: x을 설정했습니다. 또한 카피 바라를 기다리게하는 커스텀 메소드의 예가있는 몇 가지 기사를 보았습니다. 그러나이 기사에서는 사용하지 않는 jquery가 필요합니다. 카피 바라가이 바닐라 JS를 다루기를 기대하지만, 여기서 일하기 란 운이 없다. 도와주세요.

보기 :

<div id='media_search'> 
    <%= form_for(:search, method: "get", html: {class: "navbar-form navbar-left form-inline"}) do |f| %> 
    <%= f.label :search %> 
    <%= f.text_field :search, id: "media_search_field", class: "form-control", placeholder: "song, album, or artist" %> 
    <%= f.submit "Submit", id: "media_search_submit", class: "btn btn-default" %> 
    <% end %> 

    <div id='search_results'></div> 
</div>  

발췌문 바닐라 JS :

var ajaxSearchMedia = function (query, successCb) { 
    var request = new XMLHttpRequest(); 
    request.open('GET', '/search?query=' + query, true); 

    request.onload = function() { 
    if (request.status >= 200 && request.status < 400) { 
     // Success! 
     var songs = JSON.parse(request.responseText); 
     successCb(songs); 
    } else { ... 

기능 시험 :

시나리오 문은 js: true 태그되지
scenario "with results" do 
    visit '/' 

    fill_in "media_search_field", with: "song" 

    click_on "media_search_submit" 

    expect(page).to have_css("#search_results table") 
end 
+0

어떤 드라이버를 사용하고 있습니까? –

답변

0

하는 정상를 사용하는 경우 카피 바라 구성은 지원하지 않는 기본 랙 테스트 드라이버를 사용하고 있음을 의미합니다. JS. JS를 사용하는 드라이버를 사용하려면 JS 동작에 의존하는 테스트를 구성해야합니다 (https://github.com/jnicklas/capybara#selecting-the-driver 참조). 또한 트랜잭션 테스트를 사용하지 않도록 동일한 테스트를 구성해야합니다. https://github.com/jnicklas/capybara#transactions-and-database-setuphttps://github.com/DatabaseCleaner/database_cleaner#rspec-with-capybara-example

관련 문제