爲「全選」複選框編寫水豚/ poltergeist測試的問題

Question

在我正在構建的應用程序的管理面板上工作時，我構建了一個選項來「檢查所有」特定列中的複選框。在我的本地主機上，它100％按預期工作;但是當我回去修理我的集成測試時，我遇到了一大堆麻煩讓它工作。

的HTML：

<table class="table"> 
    <tr> 
    <th>Account Name</th> 
    <th>Status</th> 
    <th>Email</th> 
    <th>Approve</th> 
    <th></th> 
    </tr> 
    <form accept-charset="UTF-8" action="/cpanel/client_actions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="IhSJHcXcODzyrboTsk1i8AZIw23XEIQdTCod/UKqNws=" /></div> 

     <tr> 
      <td>Test Account</td> 
      <td>Email not sent</td> 
      <td><input class="email-client" id="email-client1" name="send_emails[]" type="checkbox" value="1" /></td> 
      <td><input class="approve-client" id="approve-client1" name="approve_clients[]" type="checkbox" value="1" /></td> 
      <td><a href="/cpanel/account_infos/1/edit" html="{:class=&gt;&quot;btn btn-success&quot;}">Edit</a></td> 
     </tr> 

     <tr> 
      <td>Test Account4</td> 
      <td>Email not sent</td> 
      <td><input class="email-client" id="email-client3" name="send_emails[]" type="checkbox" value="3" /></td> 
      <td><input class="approve-client" id="approve-client3" name="approve_clients[]" type="checkbox" value="3" /></td> 
      <td><a href="/cpanel/account_infos/3/edit" html="{:class=&gt;&quot;btn btn-success&quot;}">Edit</a></td> 
     </tr> 
    <tr> 
    <td></td> 
    <td></td> 
    <td> 
     <p><input id="email-all" name="email-all" type="checkbox" value="1" /></p> 
     <p>Select/Deselect All</p> 
    </td> 
    <td> 
     <input id="approve-all" name="approve-all" type="checkbox" value="1" /> 
     <p>Select/Deselect All</p> 
    </td> 
    <td><input name="commit" type="submit" value="Save changes" /></td> 
    </tr> 
</form></table> 

劇本：眼下

it "check all email box checks box for all records", :js => true, :focus => true do 
    click_on "Approved" 
    checkbox = find(:css, "#email-all") 
    checkbox2 = find(:css, "#email-client#{client_approved.id}") 
    checkbox.checked?.should == false 
    check("email-all") 
    checkbox.checked?.should == true 
    checkbox2.checked?.should == true 
    uncheck "email-all" 
    checkbox.checked?.should == false 
    checkbox2.checked?.should == false 
end 

：

$(function() { 
    $('#email-all').click(function() { 
    if (this.checked) { 
     $('input[type="checkbox"].email-client').each(function() { 
     this.checked = true; 
     }); 
    } else { 
     $('input[type="checkbox"].email-client').each(function() { 
     this.checked = false; 
     }); 
    } 
    }); 
    $('#approve-all').click(function() { 
    if (this.checked) { 
     $('input[type="checkbox"].approve-client').each(function() { 
     this.checked = true; 
     }); 
    } else { 
     $('input[type="checkbox"].approve-client').each(function() { 
     this.checked = false; 
     }); 
    } 
    }); 
}); 

而我在測試的嘗試該測試在checkbox2.checked?.should == true上失敗。我用於此測試的語法與我通常使用的語法不同，但它是我能夠正確檢查並取消選中的唯一方法。我當然不是這種測試腳本的專家 - 但我無法弄清楚我做錯了什麼。

有什麼建議嗎？謝謝！

Answer 1

我想通了 - 測試工作正常！我正在使用過濾器鏈接，使頁面顯示在ajax中 - 所以當我切換過濾器時，我寫的js將不再起作用。我也在測試中切換了濾波器。因此，我需要使用$(document).on("click", "#email-all", function()而不是$('#email-all').click(function()

Answer 2

我已經有了這樣一種方式設置checked的時間。你看過這裏提到的建議嗎：http://api.jquery.com/prop/

基本上this.checked = true不可靠地設置跨所有瀏覽器的「檢查」狀態。我記得，特別是在IE7和IE8中有很大的問題。