Posted on June 19, 2015 By Anak Umpaivit
ใน Blog นี้ เราจะมาพูดถึงหนึ่งเครื่องมือของ QA นั้นก็คือ Automated Testing นั้นเอง ซึ่งการสร้างระบบการทดสอบโดยอัตโนมัตินี่ขึ้นมา ก็จะช่วยให้ Application ที่กำลังพัฒนา มีความถูกต้องอยู่เสมอ สำหรับ Swiftlet ที่ทำงานกับ Ruby on Rails นั้น Capybara และ Rspec ก็เป็นตัวเลือกที่เราเลือกใช้ในการทำงาน สำหรับผู้ที่สนใจ และยังมองไม่เห็นภาพ วันนี้ ผมจะมายกตัวอย่างคำสั่งเริ่มต้นง่ายๆ และหน้าตาของการทำงานของ Capybara Automated Testing ให้ดูกัน
เริ่มต้น
หลังจากเราติดตั้ง และ Setup สิ่งต่างๆของ Capybara และ Application ที่เราต้องการทดสอบแล้ว ก็มารู้จักการทำงานของ Capybara กัน
การเข้าถึงหน้า Website
แน่นอนว่าก่อนที่เราจะทดสอบ Application ได้ เราก็ต้องเข้าไปที่หน้าที่เราต้องการทดสอบก่อนโดยใช้คำสั่ง visit แต่สิ่งที่เรา Visit ได้ มีดังนี้
เข้าผ่าน URL โดยตรง
คือการเข้าจาก path ของ App เช่น
[code language="ruby"]
visit '/users/sign_in'
visit '/modules/:id/edit'
[/code]
ข้อเสียของวิธีนี้คือ หากมีการเปลี่ยนแปลง path เราก็ต้องแก้ path ทั้งหมดที่เราใส่ไปใน test script
เข้าผ่าน Route Path
ใน Application ที่พัฒนาด้วย Ruby on Rails จะมีการจัดการ route paths ทำให้ง่ายขึ้นต่อการทำงาน และเราก็สามารถนำมาใช้กับการ visit ได้ เช่น
[code language="ruby"]
visit new_user_path
visit edit_module_path(module_id)
[/code]
ซึ่งหากมีการแก้ไข path เราก็ไม่จำเป็นต้องแก้ไขทั้งหมดเอง
เข้า Website อื่นๆ บน Internet
นอกจากการทำงานบน Application ที่กำลังพัฒนาแล้ว ก็ยังสามารถใช้ Capybara Visit Website อื่นๆ ได้ เช่น
[code language="ruby"]
visit 'http://www.facebook.com'
[/code]
การกรอกข้อมูลใน Textbox
การกรอกข้อมูลใน Textbox หรือทำงานกับ Element อื่นๆ ในหน้า Website เราสามารถดู Tag และ Element ต่างๆ ได้โดย Click ขวาที่หน้า Website และเลือก Inspect Element หรือ หากใช้ Firefox ก็สามารถ Download ส่วนเสริมที่ชื่อว่า Firebug มาช่วยในการดูได้ ซึ่ง Firebug จะมีความสามารถมากกว่าการ Inspect Element ที่มีมาใน Browser
กรอกด้วย name ของ textbox
หาก Textbox ที่เราต้องการกรอก มี name=’textbox_name’ อยู่ภายใน เราก็สามารถใช้คำสั่ง fill_in กับ name ได้ เลย และกำหนด สิ่งที่ต้องการกรอกด้วย option ‘with:’ เช่น
textbox ที่เราเห็นคือ
<input type="text" name="your-name">
เราก็สามารถใส่ค่าได้โดย
[code language="ruby"]fill_in('your-name', with: 'John')
[/code]
กรอกด้วยการ set ค่า ที่ element โดยตรง
ในบางครั้ง Application ก็ไม่ได้ให้ค่า name มาใน Element นั้น เราก็ต้องระบุสิ่งอื่นแทน เช่น Element Tag, Class, ID , etc. โดยก่อนที่เราจะทำอะไรกับ Element นั้น เราต้องระบุถึงตัวมันให้ได้ก่อน โดยใช้คำสั่ง find และระบุถึงสิ่งที่เราต้องการโดย
.class การเติมจุดข้างหน้าคำ หมายถึง class
#ID การเติม # ข้างหน้าคำ หมายถึง ID
ตัวอย่าง
[code language="ruby"]
find('.text-box')&lt;/code&gt;
find('#text_ID')
[/code]
หลังจากเราระบุถึง Textbox ที่เราต้องการได้แล้ว ก็สามารถใช้คำสั่ง .set เพื่อกรอกข้อมูล เช่น
[code language="ruby"]find('#text_ID').set('example text')[/code]
การ Click ที่ Button
หลังจากเรากรอก Form ไปแล้ว เราก็ต้อง Submit แน่นอน เรามาดูวิธีการกด Button ด้วยวิธีต่างๆ กัน
การคลิกโดย Label ของ Button
หาก Button ของเรามีคำที่เป็น Label อยู่ข้างหน้า เช่น ‘Enter’ หรือ ‘Submit’ เราสามารถใช้คำสั่ง click_on ได้เลย เช่น
[code language="ruby"]
click_on('Submit')
click_on('Enter')
[/code]
การคลิกโดยระบุ element โดยตรง
ในบางครั้ง Button ในจุดเดียวกัน ก็อาจจะมีการเปลี่ยนแปลงชื่อไปได้ตามสถานการณ์ เช่น ในการ Test ที่เราไม่ได้กำหนดชื่อของตารางข้อมูลนั้นไว้ เป็นการตั้งชื่ออัตโนมัติด้วยระบบเอง เราก็สามารถระบุถึง button ด้วยวิธีอื่นๆ ได้ เช่น
[code language="ruby"]
find('.enter-btn).click
find("button[type='submit']").click
[/code]
หรือในกรณีที่ ทำ Button ในรูปแบบ Link ( ใช้ Tag <a>) ก็สามารถใช้คำสั่ง click_link ได้ เช่น
[code language="ruby"]click_link('Enter')[/code]
การตรวจสอบความถูกต้องของ Application
หลังจากเรารู้ Action ในการกระทำต่างๆ ที่หน้า Website เบื้องต้นไปแล้ว สิ่งที่ขาดไม่ได้คือการตรวจสอบนั่นเอง โดยเราสามารถตรวจสอบความถูกต้องตามต้องการด้วยวิธีเหล่านี้
ด้วย text ในหน้า Website
หากเราต้องการตรวจสอบว่า ถ้ากระทำการใดๆกับหน้า Website แล้ว จะปรากฏตัวหนังสือขึ้น เราสามารถใช้คำสั่ง
[code language="ruby"]expect(page).to have_content('text ที่ปรากฏ')[/code]
หรือ ต้องไม่ปรากฏ หรือหายไป
[code language="ruby"]expect(page).not_to have_content('text ที่ไม่ควรปรากฏ')[/code]
ด้วย element ในหน้า Website
เราอาจจะตรวจสอบด้วย Element ต่างๆ บนหน้า Website เช่น หาก Login เข้าไป จะมี กรอบ Alert ที่เป็น CSS ขึ้นมา เราสามารถใช้คำสั่ง
[code language="ruby"]expect(page).to have_selector('.alert-success')[/code]
หรือต้องไม่ปรากฏ
[code language="ruby"]expect(page)not_to have_selector('.alert-danger')[/code]
ด้วยวิธีอื่น
การตรวจสอบ Application ที่เราทำยังมีอีกหลายวิธีมาก เช่น การตรวจสอบว่ามี Selectbox ที่มีตัวเลือกใดๆ หรือ การตรวจสอบการเรียงของข้อมูลว่าถูกต้องไหม ซึ่งเราจะอธิบายใน Blog ถัดๆ ไป
เมื่อเราเขียน Automated Test Script เสร็จแล้ว เราก็สามารถ Run ผ่าน Terminal ได้ และ Browser จะ แสดงการทำงานตามที่เราตั้งค่าไว้ หากใครนึกภาพไม่ออก ลองดูในวีดีโอด้านล่าง
https://www.youtube.com/watch?v=pOZ-7zPiTJM
ตอนนี้เราคงได้รู้จัก และพอจะมองเห็นภาพการใช้งาน Automated Testing ด้วย Capybara กันแล้วขอขอบคุณผู้อ่านที่สนใจ และพบกันใน Blog ถัดไป สำหรับ “Test Cases เขียนยังไงให้เข้าใจง่ายบน Capybara!”
ข้อมูลที่น่าสนใจ