พื้นฐานเว็บอัตโนมัติ: ขั้นตอนการทำงาน 4 ขั้นและข้อผิดพลาดที่พบบ่อย 3 แบบ

เว็บอัตโนมัติมักถูกเข้าใจว่าเป็นการให้โปรแกรมกดปุ่มแทนเรา แต่เมื่อลงมือทำจริงจะพบว่า การทำงานหนึ่งครั้งมี 4 ขั้นตอน และถ้าขั้นตอนไหนผิด ผลที่เห็นอาจดูเหมือนไม่มีอะไรเกิดขึ้นเลย

ก่อนอื่นควรแยกสองแนวคิดที่มักสับสนกัน เว็บอัตโนมัติมีขอบเขตกว้างกว่า หมายถึงการใช้โปรแกรมทำสิ่งที่ปกติคนต้องทำบนเว็บเพจ รวมถึงการดึงข้อมูลโดยตรงผ่าน request ส่วน browser automation เป็นแขนงที่เฉพาะกว่า คือโปรแกรมควบคุมเบราว์เซอร์จริงให้เปิดหน้า รัน JavaScript และจำลองการคลิกกับการพิมพ์ ในกรณีที่มี dynamic content มากหรือมี interaction ซับซ้อน โดยทั่วไปต้องใช้แนวทางหลัง

การทำงานหนึ่งครั้งมี 4 ขั้นตอน

• ค้นหาองค์ประกอบ: ระบุเป้าหมายด้วย id, name, class, CSS selector หรือ XPath ให้ความสำคัญกับ semantic attribute ก่อน และค่อยใช้โครงสร้างหรือ index เมื่อไม่มีทางเลือกที่ดีกว่า
• รอให้โต้ตอบได้: องค์ประกอบอยู่ใน DOM แล้วไม่ได้หมายความว่าจะคลิกได้ทันที ต้องรอให้มองเห็น คลิกได้ หรือรอให้ request ที่กำหนดตอบกลับ สิ่งที่ต้องรอคือเงื่อนไข ไม่ใช่จำนวนวินาที
• เรียกใช้การทำงาน: คลิก พิมพ์ หรือเลื่อน Custom component มักต้องทำตามลำดับเดียวกับคนจริง เช่น เปิดก่อน รอให้รายการ render แล้วจึงเลือกตามข้อความ
• ตรวจสอบผลลัพธ์: หลังทำงานต้องยืนยันว่าผลถูกต้องหรือไม่ ตรวจว่าลิงก์เปลี่ยนหรือไม่ ข้อความบนหน้าเปลี่ยนหรือไม่ หรือ API ตอบอะไรกลับมา ถ้าไม่มีขั้นตอนนี้ ความล้มเหลวอาจถูกนับเป็นความสำเร็จ และ retry หรือ alert ภายหลังก็จะไม่มีฐานที่เชื่อถือได้

ใน 4 ขั้นตอนนี้ ขั้นที่ 2 และ 4 มักใช้เวลาดีบักมากที่สุด ไม่ใช่เพราะยาก แต่เพราะมักไม่แสดง error และเพียงสร้างผลลัพธ์ที่ผิดอย่างเงียบ ๆ

ความเสถียรของ selector กำหนดว่าสคริปต์จะอยู่ได้นานแค่ไหน

เมื่อหน้าเปลี่ยน locator ที่เขียนตายตัวอาจใช้ไม่ได้ การค้นหาด้วยข้อความ ตำแหน่ง หรือ index ทนต่อการเปลี่ยนแปลงได้น้อยที่สุด แค่เพิ่มปุ่มหนึ่งปุ่มหรือเปลี่ยนข้อความแนะนำหนึ่งจุดก็อาจทำให้ทั้งหมดผิดได้

ถ้าใช้ได้ ให้เลือก id, name หรือ data attribute ก่อน ถ้าจำเป็นต้องใช้ locator แบบอิงโครงสร้าง ให้รวมไว้ในที่เดียว เพื่อเวลาแก้จะได้แก้จุดเดียวแทนหลายสิบบรรทัด อย่าคิดว่าเขียนเสร็จแล้วจะไม่ต้องดูแลอีก เว็บไซต์อัปเดตเป็นเรื่องปกติ และต้นทุนการบำรุงรักษาส่วนใหญ่ก็มักอยู่ตรงนี้

Dynamic loading: สิ่งที่รอสำคัญกว่ารอนานแค่ไหน

ปัจจุบันมีหน้าไม่มากที่ทุกอย่างพร้อมทันทีหลัง initial load เสร็จ ข้อมูลถูก render ผ่าน asynchronous request ทำให้องค์ประกอบปรากฏช้ากว่าที่คิด

การรอแบบกำหนดเวลาตายตัวพบได้บ่อยและพลาดได้ง่ายเช่นกัน การ sleep 3 วินาทีอาจสั้นเกินไปบนเครื่องช้า และเป็นเพียงการเสียเวลาบนเครื่องเร็ว วิธีที่ถูกต้องคือรอให้เงื่อนไขหนึ่งเป็นจริง แล้วค่อยทำเมื่อองค์ประกอบคลิกได้จริง

หาองค์ประกอบไม่เจอ ให้ตรวจ iframe และ shadow DOM ก่อน

ถ้าเห็นองค์ประกอบชัดเจนบนหน้าแต่สคริปต์หาไม่เจอ ปัญหามักไม่ได้อยู่ที่ selector แต่อยู่ที่ scope

iframe เป็นเอกสารแยก ต้อง switch เข้า frame ที่ถูกต้องก่อนค้นหาองค์ประกอบ และ switch ออกหลังทำงานเสร็จ มิฉะนั้นการค้นหาครั้งต่อไปจะอยู่ใน context ที่ผิด Node ใน shadow DOM จะไม่ถูกจับด้วย CSS selector จากด้านนอกโดยตรง ต้องได้ shadow root ก่อนแล้วจึงค้นหาภายใน สองกรณีนี้มักถูกเข้าใจผิดว่าเป็นการเปลี่ยนหน้า ทำให้เสียเวลาดีบักโดยไม่จำเป็น

ยังมีอีกสองเรื่องที่มักถูกลืม

เรื่องแรกคือ session งานที่ต้อง login ควรคิดไว้ล่วงหน้าว่าจะบันทึกและ reuse สถานะที่ล็อกอินแล้วอย่างไร ไม่เช่นนั้นทุกครั้งที่รันต้อง login ใหม่ และอาจติดอยู่ที่ขั้นตอน verification

เรื่องที่สองคือ environment ถ้าทุกงานใช้ browser environment เดียวกัน session และ cache อาจรบกวนกัน งานที่ทำงานได้ดีเมื่อแยกกันอาจเริ่มชนกันเมื่อรันร่วมกัน เมื่อจากงานเดียวเพิ่มเป็นหลายงาน การแยก environment isolation เป็นอีกชั้นหนึ่งจะช่วยลดปัญหาได้มาก เครื่องมืออย่าง PurpleMark ให้ fingerprint และ proxy แยกอิสระสำหรับแต่ละ environment ส่วน automation framework มีหน้าที่เรียกใช้ action เท่านั้น

มีขอบเขตหนึ่งที่ควรยืนยันก่อนเริ่ม

Automation แทนงานที่ทำซ้ำได้ แต่แทนขั้นตอนที่ต้องมีคนจริงเข้าร่วมไม่ได้ ถ้า target workflow มีการยืนยันใบหน้าแบบ real-time หรือการตรวจด้วยคน workflow นั้นจะทำให้เป็นอัตโนมัติ 100% ไม่ได้

ดังนั้นควรตรวจด้วยวิธีที่ง่ายที่สุดก่อน ทำ workflow ทั้งหมดด้วยตัวเองแบบ manual จดทุกขั้นตอน และดูว่ามีจุดไหนที่ผ่านไม่ได้หรือไม่ แล้วค่อยตัดสินใจว่าจะลงทุน development effort เท่าไร ความเป็นไปได้ทางเทคนิคกับสิ่งที่กฎอนุญาตก็เป็นคนละเรื่อง จึงควรอ่าน terms of service ของ target platform ล่วงหน้า