การทดสอบข้อมูล kendoGrid โดยใช้แตงกวา capybara

ฉันกำลังพยายามเขียนการทดสอบแตงกวา/capybara เพื่อตรวจสอบความถูกต้องของข้อมูลในส่วนประกอบ KendoGrid UI และกำลังมีปัญหาบางประการในการพิจารณาวิธีการเลือกและตรวจสอบความถูกต้องของข้อมูลบนหน้าเว็บ

ฉันพบบทช่วยสอนพื้นฐานและตัวอย่างเกี่ยวกับการใช้แตงกวา/คาปิบาราด้วยข้อมูลตาราง แต่ปรากฏว่า KendoGrid ใช้การกำหนดค่าตารางและข้อมูลที่แตกต่างกันเล็กน้อย โดยที่ 1.) ไม่มี "id" เพื่อเลือกตารางบนหน้าได้อย่างง่ายดาย และ 2.) มีหลายตาราง (หนึ่งตารางสำหรับส่วนหัว) และอีกตารางหนึ่งสำหรับข้อมูลจริง

นี่คือข้อความที่ตัดตอนมาจากข้อมูล kendoGrid ปัจจุบันของฉันที่ฉันต้องการตรวจสอบ:

<div id="item_grid" data-role="grid" class="k-grid k-widget k-secondary" style="">
  <div class="k-grid-header" style="padding-right: 17px;">
    <div class="k-grid-header-wrap">
      <table role="grid">
        <colgroup>
          <col>
          <col>
          <col>
        </colgroup>
        <thead>
          <tr>
            <th role="columnheader" data-field="ItemA" data-title="Item A" class="k-header" data-role="sortable">
              <a class="k-link" href="/th#">Item A</a>
            </th>
            <th role="columnheader" data-field="ItemB" data-title="Item B" class="k-header" data-role="sortable">
              <a class="k-link" href="/th#">Item B</a>
            </th>
            <th role="columnheader" data-field="ItemC" data-title="Item C" class="k-header" data-role="sortable">
              <a class="k-link" href="/th#">Item C</a>
            </th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
  <div class="k-grid-content">
  <table role="grid">
    <colgroup>
      <col>
      <col>
      <col>
    </colgroup>
    <tbody>
      <tr data-uid="2c77ea57-50ea-474d-950a-8379b3690936" role="row">
        <td role="gridcell">A</td>
        <td role="gridcell">223.63</td>
        <td role="gridcell">0</td>
      </tr>
      <tr class="k-alt" data-uid="979534bc-7dea-47e9-9471-088c5bffe5b5" role="row">
        <td role="gridcell">B</td>
        <td role="gridcell">223.63</td>
        <td role="gridcell">180</td>
      </tr>
      <tr data-uid="4d4c31e7-4daf-44ad-b6c1-20ffdfde57c4" role="row">
        <td role="gridcell">C</td>
        <td role="gridcell">143.58</td>
        <td role="gridcell">0</td>
      </tr>
      <tr class="k-alt" data-uid="8d315558-b014-4219-b21b-dbe52cc6dd18" role="row">
        <td role="gridcell">D</td>
        <td role="gridcell">143.58</td>
        <td role="gridcell">180</td>
      </tr>
    </tbody>
  </table>
  </div>
</div>

จุดเริ่มต้นที่ดีที่สุดในการเขียนแบบทดสอบเพื่อให้ครอบคลุมสถานการณ์นี้คือที่ใด

ฉันได้เล่นเพิ่มเติมกับ Telerik Test Studio แล้ว และการทดสอบสถานการณ์เฉพาะนี้ในแอปพลิเคชันนั้นง่ายมาก!


kendo-grid selenium cucumber kendo-ui capybara
person user2776987    schedule 19.11.2013    source แหล่งที่มา
comment
คุณช่วยอธิบายให้ชัดเจนหน่อยได้ไหมว่าคุณต้องการทำอะไร - เช่น คุณต้องการความช่วยเหลือในการแยก Capybara อะไรในการควบคุม?   -  person Justin Ko    schedule 19.11.2013
comment
ฉันต้องการที่จะตรวจสอบได้ว่าในเนื้อหาดูเหมือนว่าแถวที่มีข้อมูลเช่น ... A | 223.63 | 0, บี | 223.63 | 180 ซี | 143.58 | 0, ง | 143.58 | 180   -  person user2776987    schedule 19.11.2013
comment
ดังนั้นคุณต้องการความช่วยเหลือในการแยกค่า (เช่น ส่วน Capybara) หรือส่วนการตรวจสอบ (เช่น ส่วนแตงกวา)?   -  person Justin Ko    schedule 19.11.2013
comment
ฉันเดาว่าสิ่งที่ฉันกำลังมองหาคือวิธีที่ดีที่สุดในการแยกและตรวจสอบ โปรดทราบว่าค่า ID ของข้อมูลเป็นแบบไดนามิกและไม่คงอยู่ระหว่างการโหลด ค่าคงที่เดียวที่คุณวางใจได้คือ ‹div id=item_grid› ที่เหมือนกัน   -  person user2776987    schedule 20.11.2013

คำตอบ (1)


arrow_upward
1
arrow_downward

แนวทางหนึ่งคือการรวบรวมสารบัญลงในอาร์เรย์ 2 มิติโดยใช้:

data_rows = page.all(:css, 'div#item_grid div.k-grid-content tr')
data = data_rows.collect do |tr|
  tr.all(:css, 'td').collect(&:text)
end
p data
#=> [["A", "223.63", "0"], ["B", "223.63", "180"], ["C", "143.58", "0"], ["D", "143.58", "180"]]

จากนั้นด้วยข้อมูล (และสมมติว่าคุณรู้ว่าข้อมูลใดควรอยู่ในตาราง) คุณสามารถตรวจสอบความถูกต้องของอาร์เรย์ข้อมูลได้:

# If you want to validate the entire table and row order matters:
expect(data).to eql([["A", "223.63", "0"], ["B", "223.63", "180"], ["C", "143.58", "0"], ["D", "143.58", "180"]])

# If you want to validate the entire table and row order does not matter:
expect(data).to match_array([["B", "223.63", "180"], ["A", "223.63", "0"], ["D", "143.58", "180"], ["C", "143.58", "0"]])    

# If you want to validate a specific row exists:
expect(data).to include(["B", "223.63", "180"])
person Justin Ko    schedule 19.11.2013
comment
จัสติน ฉันลองแก้ไขแอปพลิเคชันทดสอบของฉันดู และตอนนี้ฉันได้รับข้อผิดพลาดที่แจ้งว่าคอลเล็กชันจริงมี [] และไม่มีข้อมูลที่ถูกต้อง ฉันเดาว่านี่เกี่ยวข้องกับการเลือก css ที่หยิบไม่ถูกต้องใช่ไหม ฉันแก้ไขด้วย 'div#item_grid div.k-grid-content table tr' และดูเหมือนจะไม่ได้สร้างความแตกต่าง มีความคิดอะไรบ้าง? - person user2776987; 20.11.2013
comment
แปลก รหัสทำงานได้ดีเมื่อฉันสร้างหน้าด้วย html ที่ให้มา คุณแน่ใจหรือว่าคุณกำลังทดสอบกับหน้าที่ถูกต้อง - เช่น คุณได้รับ html แบบเดียวกับที่คุณโพสต์เมื่อคุณทำ p page.html หรือไม่ - person Justin Ko; 20.11.2013
comment
ฉันคิดว่าฉันพบปัญหาของฉันที่นี่ ปัญหาคือองค์ประกอบที่ฉันกำลังทดสอบนั้นเป็นองค์ประกอบ kendoGrid UI ที่ไม่สามารถมองเห็นได้บนหน้าจอเสมอไป ไม่กี่ขั้นตอนก่อนการตรวจสอบความถูกต้องจะทำให้รายการนั้นมองเห็นได้ ปัญหาคือมีสภาวะการแข่งขันที่กำลังตรวจสอบเนื้อหาที่ไม่สามารถมองเห็นได้ ... ฉันได้ตรวจสอบสิ่งนี้โดยเพียงแค่หยุดชั่วคราวและก้าวผ่านมันอย่างช้าๆ และให้เวลาระบบในการแสดงข้อมูลก่อนที่จะตรวจสอบ เดาว่าฉันจะต้องแปรงขึ้นเกี่ยวกับวิธีการที่จะรอ ;-) ขอบคุณ! - person user2776987; 20.11.2013
comment
ฉันเข้าใจแล้ว all ไม่ต้องรอเหมือนที่ find รอ เพื่อให้แน่ใจว่ามีการโหลดแถวตารางอย่างน้อย 1 แถว (และสมมติว่ามีการโหลดแถวหนึ่งหมายความว่าโหลดทั้งหมดแล้ว) คุณสามารถเพิ่ม page.find(:css, 'div#item_grid div.k-grid-content tr', :match => :first) ก่อนที่จะรับแถวข้อมูล - person Justin Ko; 20.11.2013