การทดสอบโปรแกรม (Testing)

วันนี้ขออธิบายสิ่งที่หลาย ๆ คนอาจจะรู้ อาจจะทราบกันอยู่แล้ว แต่บางคนอาจจะยังไม่รู้ถึงกระบวนการและความจำเป็นของการทดสอบระบบ ผู้เขียนจึงขอนำเสนอข้อมูลในเรื่องนี้สักหน่อย เนื่องจากกำลังทำงานหลัก ๆ ที่เกี่ยวกับการทดสอบโปรแกรมเป็นส่วนใหญ่  การ Test คือการทดสอบระบบว่าทำงานได้ถูกต้องได้ผลตามวัตถุประสงค์หรือไม่ ซึ่งเป็นการทดสอบกระบวนการทางพื้นฐานทางคอมพิวเตอร์ โปรแกรมคอมพิวเตอร์มีหลักการง่าย ๆ คือ Input -> Process -> Output วิธีการกำหนด Test case อย่างง่ายที่สุดคือทำการ Test แต่ละส่วนโดยอยู่บนพื้นฐานของ Business requirement และวัตถุประสงค์ของระบบ ซึ่งจะต้องมีการเขียน Test case โดย Test case เป็นเอกสารที่ระบุชุดข้อมูลป้อนเข้าผลลัพธ์ ที่คาดว่าจะได้รับและกลุ่มของเงื่อนไขในการดำเนินการในชุดทดสอบต่าง ๆ มีจุดมุ่งหมายเพื่อแบ่งฟังก์ชันการทำงานของซอฟต์แวร์ออกเป็นฟังก์ชันย่อย ๆ เพื่อให้สามารถทำการทดสอบโดยชุดข้อมูลป้อนเข้าดังกล่าว และสร้างผลลัพธ์ที่สามารถประเมินผลได้โดยปกติจะขึ้นกับ use case ของระบบ “Test case ประกอบด้วย” ชื่อ Test case โดยปกติแล้วคือ Use case ตาม ฺBusiness requirement เช่น การ login เข้าระบบ วัตถุประสงค์ของ Test case นั้น ๆ ผลที่คิดว่าจะได้รับ (Output) กำหนดลักษณะข้อมูลที่จะนำเข้าเพื่อใช้ในการ Test (Input) ขั้นตอนวิธีการทดสอบ เป็น Step 1,2,3,… ว่าแต่ละขั้นตอนต้องทำอะไรบ้าง ผลที่ได้จากการ test “ชนิดของการ Test” ทดสอบความถูกต้อง Unit test เป็นการ test functional ของระบบในแต่ละส่วนย่อยๆเพื่อให้แน่ใจว่าแต่ละส่วนทำงานได้ถูกต้อง Integration test เป็นการนำแต่ละ unit มาประกอบกันและทดสอบการติดต่อระหว่าง unit ว่าสามารถทำงานได้ถูกต้อง End to end test เป็นการทดสอบระบบในภาพรวมโดยนำแต่ละส่วนของระบบมาประกอบกันให้สมบูรณ์ และทดสอบระบบประหนึ่งเป็น ผู้ใช้ของระบบ ทดสอบคุณภาพ Stress test เป็นการทดสอบประสิทธิภาพของระบบ เพื่อทดสอบว่าระบบสามารถรับจำนวนผู้ใช้, ข้อมูล ได้มากแค่ไหน Usability test เป็นการทดสอบประสิทธิภาพการใช้งานของระบบ เช่น UI เหมาะสมต่อการใช้งานหรือไม่ เข้าใจได้ง่ายหรือไม่ การทดสอบระบบไม่ว่าที่ไหนก็คงมีวิธีการและขั้นตอนไม่ต่างกันนัก ที่แตกต่างกันคงจะเป็นความเข้มข้นของการ Test เสียมากกว่า คือจะ Test ละเอียดแค่ไหน มีระบบที่ใช้เพื่อการ Test พร้อมหรือไม่ และทีมงานมีความพร้อมแค่ไหน การจะเป็น Tester ที่ดีได้ต้องเข้าใจถึงมาตรฐานต่างๆที่ระบบใช้งาน เพื่อจะได้ทดสอบได้อย่างถูกต้องและแบบมีหลักเกณฑ์ ยกตัวอย่างง่ายๆ หากเป็น Tester ของเว็บไซต์ที่หนึ่ง หากไม่มีความรู้ด้านมาตรฐานหรือด้านเทคนิคเลย จะทดสอบอะไรได้บ้าง? เพียงแต่ click ดูแล้วดูผลลัพธ์ว่าตรงเท่านั้นหรือ?

Read More »

วิธีการทดสอบเว็บไซต์ Responsive บน Smart phone ด้วย Chrome

“ปัจจุบันกระแสการออกแบบเว็บเชิงตอบสนอง (Responsive design) ถูกนำมาใช้ในการออกแบบเว็บสมัยใหม่ เนืองจากสามารถดูได้ทั้งแบบผ่านเครื่องคอม แท็บเล็ต และมือถือ ได้โดยทันที” แต่ในระว่างการออกแบบ ถ้าผู้ออกแบบจะต้องมีการทดสอบบนอุปกรณ์แท็บเล็ต หรือมือถือ ต่างๆ ซึ่งมีความละเอียดของหน้าจอแตกต่างกันออกไป ซึ่งในส่วนที่ Chrome มีเครื่องมือที่ช่วยในการแสดงผลเว็บไซต์บนอุปกรณ์ Smart phone ได้ โดยไม่ต้องโหลดเพิ่ม แต่ประการใด !!! แถมวิธีการก็ง่ายแสนง่าย  ขั้นตอนที่ 1 ให้ไปที่ More tools > Developer tools ดังภาพ ขั้นตอนที่ 2 เลือกที่รูปโทรศัพท์ ดังภาพ ขั้นตอนที่ 3 สังเกต ด้านซ้ายจะปรากฏหน้าจอมือถือขึ้นมา ให้ระบุ URL ที่เราต้องการดังภาพ จากภาพ จะเห็นว่าหากเป็นเว็บที่ออกแบบด้วยหลักการออกแบบเว็บเชิงตอบสนอง (Responsive design) จะมีการจัดหน้าจอให้เหมาะสมกับอุปกรณ์ ขั้นตอนที่ 4 สังเกต ด้านบน เราสามารถเลือกรุ่นของ Smart Phone ได้หลายรุ่น แม้จะไม่มาก แต่ก็เป็นรุ่นหลักและหลากหลายความละเอียด หรือจะเลือกปรับขนาดเองก็ทำได้  และสามารถปรับให้แสดงแนวตั้งและแนวนอนได้อีกด้วย ดังภาพ จะเห็นว่าเครื่องมือด้งกล่าวใช้งานไม่ยาก ทำให้สามารถดูหน้าจอในหลายๆ ความละเอียดได้อย่างรวดเร็ว 

Read More »

ทดสอบการแสดงผลเว็บแอพพลิเคชันง่ายๆ บน Browser ต่างๆ ด้วยบริการของ Modern IE

ในปัจจุบันเว็บแอพพลิเคชันที่มีการพัฒนาจะต้องรองรับ Browser และอุปกรณ์ที่แตกต่างกัน ซึ่งบางครั้งเป็นการยากที่เราจะทดสอบให้ครบได้ จะดีไหมถ้าเราสามารถดูการแสดงผลเว็บแอพพลิเคชันที่พัฒนาว่า หน้าตาเป็นอย่างไรเมื่อแสดงผลบน Browser หรืออุปกรณ์อื่นๆ Microsoft ได้เปิดตัว Modern IE ขึ้น โดยมีบริการที่น่าสนใจที่เรียกว่า Browser screenshots !! ขั้นตอนที่ 1 ไปยัง URL : https://dev.modern.ie/tools/screenshots/ ขั้นตอนที่ 2 ใส่ URL ของเว็บแอพพลิเคชันของเราที่ต้องการ ขั้นตอนที่ 3 กดปุ่ม Enter หรือรูปแว่นขยาย เครื่องมือจะแสดงผลดังภาพ จะเห็นว่าเจ้า Browser screenshots เป็นเครื่องมือที่ช่วยให้เราเห็นหน้าจอเว็บแอพพลิเคชันของเราในเบื้องต้นได้ “หวังว่าจะมีประโยชน์ต่อนักพัฒนาหรือนักทดสอบระบบทุกท่านนะค่ะ”

Read More »

สร้างโปรแกรมทดสอบเว็บแอพพลิเคชันอัตโนมัติด้วย Selenium WebDriver : ตอนที่ 1 การติดตั้ง Web Driver

“Selenium” คือ ชุดเครื่องมือที่ใช้สำหรับทดสอบเว็บแอพพลิเคชันอัตโนมัติ โดยประกอบด้วยเครื่องมือ 4 เครื่องมือ การใช้งานจะขึ้นอยู่กับวัตถุประสงค์ของการทดสอบในแต่ละองค์กร ได้แก่ Selenium Integrated Development Environment (Selenium IDE) Selenium Remote Control (RC) WebDriver Selenium Grid โดยในปัจจุบัน ในส่วนของ Selenium RC (Selenium 1.0) และ WebDriver ได้ร่วมเป็น Selenium ในเวอร์นที่ 2 ซึ่งในบทความนี้ ผู้เขียนจะขอเรียกว่า Selenium Web Driver เพื่อไม่ให้สับสนกับ Selenium ค่ะ ต่อไปก็ขออธิบายลงไปที่ Selenium Web Driver ต่อไปเลยค่ะ  Selenium Web Driver เป็นเครื่องมือที่ช่วยให้เราสามารถสร้างโปรแกรมในการทดสอบเว็บแอพพลิเคชันกับ Web browser ได้หลายตัว ซึ่งถือเป็นคุณสมบัติเด่นที่ดีกว่า Selenium IDE ค่ะ (Selenium IDE จะใช้งานได้เฉพาะ firefox เท่านั้น) โดยจะมี Web Driver เป็นตัวกลางที่มีไลบารีที่ช่วยในเราติดต่อกับ Web browser ได้ดังรูปค่ะ โดยใช้การเขียนโปรแกรมในภาษาต่างๆ ที่เราคุ้นเคยกัน ไม่ว่าจะเป็น JAVA, .Net (VB/C#), Ruby ติดต่อกับไลบารีของ WebDriver เพื่อเข้าถึงคอนโทรลที่แสดงผ่าน Web browser ได้ ทำให้เราสามารถสร้างโปรแกรมการทดสอบได้หลากหลายมากขึ้น เช่น ดึงข้อมูลที่ใช้สำหรับกรอกข้อมูลบนฟอร์ม จากฐานข้อมูลได้ สามารถใช้ทดสอบหลายๆ กรณี ได้อย่างต่อเนื่อง เริ่มเห็นประโยชน์กันบ้างยังค่ะ ต่อไปเพื่อไม่ให้เป็นการเสียเวลาและเพื่อให้เห็นภาพมากยิ่งขึ้น เราก็มาเริ่มการติดตั้งเลย โดยบทความนี้จะใช้ WebDriver ของ Firefox และภาษา C# ในการพัฒนา ขั้นตอนที่ 1 : โหลด Selenium Client และ WebDriverไปยัง URL : http://www.seleniumhq.org/download/Selenium Client คือ ไลบาลีที่ใช้ติดต่อกับ WebDriver ซึ่งขึ้นอยู่กับภาษาที่ใช้ในการพัฒนา (จากรูปด้านบน เลือกตามภาษาที่ใช้ในการพัฒนา) WebDriver คือ ไลบารีที่ใช้ติดต่อกับ Web brower ซึ่งในส่วนของ firefox จะติดมากับไลบารีของ Selenium Client อยู่แล้ว แต่ในส่วนของ IE , Chrome หรือ Safari ต้องโหลดแยกต่างหาก โดยในส่วนของเว็บ Selenium ก็มีให้โหลดเรียบร้อยแล้ว  (จากรูปบน เป็น Webdriver ของ Chrome เลือกตามระบบปฎิบัติการใช้งาน) (จากรูปบน เป็นไฟล์ Webdriver ของ Chrome โดยเราจะเรียกใช้โดยการอ้างอิงจากพาร์ธ) ขั้นตอนที่ 2 : การติดตั้งไลบารีกับ Visual Studio เมื่อดาวน์โหลดมาเรียบร้อย ทำการแตกไฟล์จะได้โฟลเดอร์ตามรูป โดยเลือกใช้งานตาม .Net Framework ที่ใช้ในการพัฒนา จากนั้นทำการสร้าง Project และทำการ Add Referrence ขั้นตอนที่ 3 : Hello World !! ขั้นตอนนี้ทำการเขียนโปรแกรม โดยการกดปุ่มจากฟอร์มและโปรแกรมทำการเปิดเว็บเพจ google ค้นหาคำว่า Hello World (จากรูปบน เป็นส่วนของการประกาศใช้งานไลบารีของ Selenium ซึ่งในกรณีนี้อยู่ที่ว่าจะใช้เรียกเว็บ browser อะไรก็เรียกใช้ไลบารีตัวดังกล่าว จากตัวอย่างผู้เขียนจะเรียกใช้ Firefox กับ Chrome) (จากรูปบน เป็นการสร้างตัวแปรคลาส driver ของ Firefox) (จากรูปบน เป็นการสร้างตัวแปรคลาส driver ของ Chrome โดยจะแตกต่างจากของ Firefox

Read More »