เวลาวางแผนไปเที่ยวต่างจังหวัดหรือต่างประเทศ มันต้องมีอารมณ์ต้องเข้าไปเช็คที่พัก เช็คเที่ยวบินล่วงหน้าว่าราคาอยู่ที่เท่าไหร่และเหลืออีกกี่ที่นั่ง ซึ่งบางครั้งเราอาจเข้ามาดูเที่ยวบินวันเวลาเดิมซ้ำๆเพื่อเช็คโปรโมชั่นและยังเข้าไปเช็คกับสายการบินอื่นอีกที่มีเส้นทางเดียวกันเพื่อเทียบราคาว่าอันไหนคุ้มค่าที่สุด แต่ละครั้งที่ค้นหากินเวลานานแสนนานจนบางครั้งจองไม่ทัน
จะดีกว่าไหมที่เราบันทึก process ซ้ำๆเหล่านี้ขึ้นมาเป็น check list แล้วสั่งให้ computer วิ่งเข้าไปที่หน้าเว็บและแสดงผลการค้นหาออกมาตามที่เราต้องการเลยในคลิกเดียว ยินดีต้อนรับสู่โลกของ Automate tool วันนี้เรามาลองใช้งาน Selenium IDE ซึ่งเป็น plugin ที่ต้องติดตั้งลง FireFox เป็นเครื่องมือสำหรับการบันทึก Event หรือเหตุการณ์ต่างๆที่เราทำบนหน้าเว็บออกมาเป็นไฟล์ โดยเราสามารถรันเหตุการณ์เหล่านั้นซ้ำกี่รอบก็ได้! ซึ่งเราจะยกตัวอย่างจากการหาเที่ยวบิน AirAsia จากเชียงใหม่ ลงไปกรุงเทพ ในวันที่ 22 – 25 กันยายน มาดูกันว่า Selenium IDE จะทำให้ชีวิตง่ายขึ้นสักเท่าไหร่
ขั้นตอนการติดตั้ง
1. ลง FireFox Web Browser
2. เข้าไปที่ https://addons.mozilla.org/en-US/firefox/ แล้วค้นหา Selenium IDE ติดตั้งให้เรียบร้อย
3. กด ctrl + shift + s เพื่อเปิดหน้าต่าง Selenium Windows
รู้จัก HTML Element (ถ้ารู้จักแล้ว ข้ามไปได้ไม่โกรธ)
บนหน้าเว็บที่เราเข้าเป็นประจำทุกๆวัน มันจัดองค์ประกอบซ้าย ขวาอย่างสวยงามนั้นเบื้องหลังประกอบไปด้วย element ต่างๆเข้ามาประกอบกันจนไป HTML ไฟล์ ซึ่งชั้นบนสุดเราจะเรียก root หรือ tag <html> แล้วสิ่ที่อยู่ภายในนั้นจะถูกบรรจุลงไปใน element ถัดไปเรื่อยๆ ตัวอย่าง element ที่ควรรู้จัก
1. <input> มีหลายรูปแบบ แบบที่เราเห็นบ่อยๆคือ textbox หรือ <input type=’text’>
2. <div> ดีวิชั่นที่ใช้ บรรจุ element อื่นๆ
3. <button> ปุ่ม
4. <li> ลิส
ซื่ง Selenium จะรู้ตำแหน่งของ element บนหน้าจอได้ก็จากการจดบันทึกตำแหน่งจาก html element ที่บรรจุมันอยู่นั้นเอง
เริ่มใช้งาน
Download ไฟล์ตัวอย่างได้ที่นี้
1. การใช้ Selenium IDE เราจะเหนื่อยครั้งแรกครั้งเดียวส่วนครั้งถัดๆไปเราเพียงแค่กด run เพื่อทำงานตาม event ที่เราบันทึกในครั้งแรก
2. กด record (ปุ่มแดง ทางขวามือบน)
3. เริ่มเข้าหน้าเว็บ Airasia.com แล้วเลือกเส้นทาง ออกจากเชียงใหม่ เข้าสู่กทม หลังจากนั้นเลทอกวันเวลา และจำนวนผู้โดยสาร สังเกตที่ตัว Selenium จะมีการสร้าง record ขึ้นมาทุกครั้งที่เรามีการคลิกเลือกจุดต่างๆ ซึ่งแต่ละจุดเราแทนด้วย HTML element
4. หลังจากจบ process กดปุ่มสีแดง (record) อีกครั้งเพื่อจบการทำงาน
5. สังเกตุทางซ้ายมือ จะมีชื่อ test case อยู่ใน list test suit คลิกขวา กด save เพื่อบันทึก records เอาไว้
6. ถ้าอยากบันทึดเพิ่ม คลิกขวาบนที่ว่างทางซ้าย เลือก new test case
7. เริ่ม records ให้อีกครั้ง
ข้อสังเกตุ Selenium IDE มาพร้อมความง่าย แต่ Error เพียบ
เพราะ Selenium IDE มีหน้าที่แค่จับ element จาก event ที่เราทำบนหน้าจอในขณะนั้น เช่นตัวอย่างเว็บแอร์เอเชียนี้ เราได้คลิกเลือกต้นทาง และปลายทางจากตัวเลือก ซึ่งเมื่อกดรันอีกครั้งกลับ error เพราะอะไร เพราะว่ามันไม่ได้ฉลาดขนาดรอให้ ตัวเลือกแสดงขึ้นมาก่อน ทำให้สคริปพังกลางทาง เราต้องแก้ไขโดยการเปลี่ยนการกดเลือก เป็นการพิมพ์ลงไปแทน ซึ่ง Selenium จะมองเป็นการกรอกข้อความแทน
แต่ถ้ากรอกข้อความ command ขึ้นว่า
ดังนั้นเราควรระวังในการใช้งานพวกตัวเลือก ถ้าเป็นไปได้ควรใช้วิธีบ้านๆเช่นการพิมพ์ลงไปแทน จากรูปภาพตัวอย่างจะเห็นได้ว่ารูปที่สองมีค่า value เพราะเกิดจากการกรอกข้อมูลลงไป
อย่างน้อยการกด run ครั้งถัดไปก็ใช้เวลาน้อยมาก และเราไม่ต้องเสียเวลาเลือก หรือกรอกใดๆทั้งสิ้น เพราะครั้งที่สองเป็นต้นไป selenium จะทำงานแทนเราเอง ถ้าทำแบบนี้ทุกเว็บสายการบินจะประหยัดเวลาได้มาก การใช้ automate เข้ามาช่วยให้ชีวิตง่ายขึ้นก็ดีแบบนี้แล สวัสดีครับ มี version วิดีโอด้วยตาม link ข้างล่างนี้ ครับเผื่อใครอ่านแล้วยังไม่เห็นภาพชัดเจน
