การทดสอบเป็นสิ่งสำคัญ ขั้นตอนนี้เป็นขั้นตอนสำคัญก่อนส่งมอบสิ่งที่คุณสร้างไปยังผู้ใช้ ไม่ว่าจะเป็นทั้งเว็บไซต์หรือแอปพลิเคชัน หรือฟีเจอร์ใหม่ เพื่อตรวจสอบว่าสิ่งเหล่านี้ทำงานได้ตามที่คาดไว้ อย่างไรก็ตาม ยังคงมีการทดสอบจำนวนมากที่เกิดขึ้นด้วยตนเอง โดยเพื่อนร่วมงานหรือวิศวกรการทดสอบได้ขอตรวจสอบฟีเจอร์ใหม่และรายงานปัญหาต่างๆ
แม้ว่าการทดสอบด้วยตนเองจะแสดงปัญหาบางประเภทได้ แต่ก็อาจทำให้พลาดปัญหาต่างๆ ได้อีกมากมาย ผู้ที่ทำการทดสอบอาจไม่พบข้อผิดพลาดหรือไม่ได้ทดสอบ เส้นทางเฉพาะใดๆ ในแอปเลย นอกจากนี้ พวกเขายังไม่มีข้อมูล ทั้งหมดที่คุณทำเมื่อเขียนโค้ด พวกเขาไม่ทราบ เกี่ยวกับปัญหาเฉพาะที่คุณใส่โค้ดเพื่อป้องกัน เมื่อเวลาผ่านไปและมีการเพิ่มฟีเจอร์ใหม่ๆ เข้ามา พวกเขาจะย้อนกลับไปทดสอบการทำงานเดิมทั้งหมดที่ก่อนหน้านี้ ใช้อีกครั้งเพื่อให้แน่ใจว่าการเปลี่ยนแปลงเหล่านั้นไม่เสียหาย
ทีม Chrome จึงเชื่อมั่นในความสำคัญของการทดสอบอัตโนมัติ การใช้ชุดทดสอบที่ทดสอบการหยุดทำงานของฟีเจอร์ได้อย่างเสถียรและซ้ำๆ ทำให้คุณมั่นใจได้ว่ารายละเอียดเล็กๆ น้อยๆ ทั้งหมดได้รับการทดสอบทั้งในปัจจุบันและหลังจากการพัฒนาในอนาคต ความรู้ของคุณในฐานะนักพัฒนาซอฟต์แวร์ฟีเจอร์จะรวมอยู่ในการทดสอบ
แต่เราทราบดีว่าการทดสอบอัตโนมัติอาจเป็นเรื่องที่ท้าทาย ทีม Chrome จึงมอบเครื่องมือและคำแนะนำต่อไปนี้เพื่อช่วยให้คุณใช้งานได้อย่างราบรื่นมากที่สุด
ผู้หุ่นเชิด
Puppeteer เป็นไลบรารี Node.js ซึ่งช่วยให้คุณทำให้ Chrome, Chromium และ Firefox ทำงานอัตโนมัติ ด้วย API ระดับสูงที่ใช้งานง่าย
แม้ว่าเดิมที API นี้จะใช้โปรโตคอล Chrome DevTools แต่เป้าหมายคือการทำให้โปรโตคอล WebDriver BiDi ขั้นสูงใหม่เป็นพื้นฐานของ Puppeteer ภายในสิ้นปีนี้ WebDriver BiDi ซึ่งสร้างขึ้นร่วมกันโดยผู้ให้บริการเบราว์เซอร์รายใหญ่ๆ ทั้งหมด ช่วยลดความซับซ้อนของ Use Case ของระบบอัตโนมัติจำนวนมาก และช่วยให้เกิดกรณีใหม่จำนวนมาก และสามารถใช้งานร่วมกับเบราว์เซอร์ต่างๆ ได้
แต่ไม่จำเป็นต้องรอ ปัจจุบัน API ของ Puppeteer เปิดใช้ Use Case ของการทำงานอัตโนมัติได้หลายอย่างอยู่แล้ว ซึ่งจะปรับปรุงได้ด้วย WebDriver BiDi เท่านั้น คุณสามารถทำหลายอย่างกับฟีเจอร์ต่างๆ เช่น การโต้ตอบหน้าเว็บ การสกัดกั้น และภาพหน้าจอ ตั้งแต่การทดสอบ ไปจนถึงการรวบรวมข้อมูลภาพ และการประมวลผลอัตโนมัติ และคุณยังใช้เครื่องมือนี้เพื่อทดสอบโมเดล AI ของเว็บในระบบคลาวด์โดยใช้ WebGPU และ WebGL ได้อีกด้วย
นอกจากนี้ Puppeteer ยังใช้โดยเครื่องมือต่างๆ เช่น WebdriverIO ซึ่งเป็นกรอบการทดสอบเบราว์เซอร์เต็มรูปแบบ และเครื่องมือวิเคราะห์ Privacy Sandbox ซึ่งจะช่วยให้คุณเข้าใจการใช้คุกกี้และข้อมูลในเว็บไซต์ของคุณได้ดียิ่งขึ้น
Chrome แบบ Headless
หากคุณเคยทำให้ Chrome ทำงานแบบอัตโนมัติโดยใช้ Puppeteer แล้ว คุณอาจพบว่าไม่มีหน้าต่างเบราว์เซอร์แสดงขึ้นขณะที่การทดสอบดำเนินการอยู่ โดยค่าเริ่มต้น Puppeteer จะเริ่มต้น Chrome ในโหมดไม่มีส่วนหัว ซึ่งหมายความว่าไม่มีหน้าต่างเบราว์เซอร์จริงๆ ขณะที่การทำงานอัตโนมัติทำงานอยู่
แต่คุณทราบหรือไม่ว่าโหมด Headless ของ Chrome ไม่ได้มีเพียงแค่ Chrome ที่ไม่มีหน้าต่างเท่านั้น แต่ยังเป็น Chrome เวอร์ชันที่ดูแลรักษาแยกต่างหากอย่างสมบูรณ์อีกด้วย เป็นเวลานานซึ่งก่อให้เกิดความสับสนและยากที่จะติดตามข้อบกพร่องและปัญหา
ตั้งแต่ Chrome 112 เราได้เปิดตัวโหมดไม่มีส่วนหัวใหม่ ซึ่งตอนนี้อิงตามฐานโค้ดเดียวกันกับ Chrome ทั่วไป วิธีนี้ไม่เพียงลดความสับสนก่อนหน้านี้ แต่ยังช่วยทำให้เกิดฟังก์ชันที่ไม่เคยทำได้มาก่อน เช่น การใช้ส่วนขยายระหว่างการทำงานอัตโนมัติอีกด้วย
Puppeteer ใช้โหมดไม่มีส่วนหัวใหม่นี้เป็นค่าเริ่มต้นมาตั้งแต่เวอร์ชัน 22 หากใช้ Chrome Headless ผ่านโซลูชันการทำงานอัตโนมัติอื่นๆ คุณสามารถบังคับใช้โหมดไม่มีส่วนหัวใหม่ได้ด้วยการเปลี่ยนบรรทัดคำสั่งของ --headless=new
ถึงแม้ว่าโหมดไม่มีส่วนหัวใหม่ของ Chrome จะมีประสิทธิภาพมากกว่า แต่ก็ไม่ได้น้ำหนักเบาเท่ากับโหมดไม่มีส่วนหัวแบบเก่า หากคุณมีทรัพยากรจำกัดมากหรือไม่จำเป็นต้องใช้ฟีเจอร์ทั้งหมดของ Chrome คุณใช้โหมดไม่มีส่วนหัวแบบเก่าเป็น chrome-headless-shell ได้
Chrome สำหรับการทดสอบ
ในการทดสอบ คุณต้องควบคุมสภาพแวดล้อมการทดสอบอย่างละเอียด ไม่ว่าจะเป็นระบบปฏิบัติการ เบราว์เซอร์ หรือเวอร์ชันของเบราว์เซอร์ การอัปเดตอัตโนมัติของ Chrome อาจเป็นเรื่องยาก
เราจึงได้สร้าง Chrome สำหรับการทดสอบ ซึ่งเป็น Chrome เวอร์ชันที่ไม่มีการอัปเดตอัตโนมัติ โดยเปิดตัวพร้อมกับ Chrome ทุกเวอร์ชันสำหรับระบบปฏิบัติการหลักทุกระบบ ซึ่งเข้าถึงได้จากที่เก็บถาวรที่มีเวอร์ชัน ซึ่งจะช่วยให้คุณเรียกใช้เวิร์กโฟลว์การทำงานอัตโนมัติกับ Chrome เวอร์ชันที่เจาะจงได้โดยไม่ต้องจัดการอะไรมาก
คุณสามารถเข้าถึงไบนารีของ Chrome สำหรับการทดสอบได้จากแดชบอร์ดความพร้อมใช้งานของ Chrome สำหรับการทดสอบ, JSON API หรือด้วยยูทิลิตีบรรทัดคำสั่ง Puppeteer
Puppeteer, โหมด Headless ที่อัปเดตของ Chrome และ Chrome สำหรับการทดสอบเป็นเพียงส่วนหนึ่งของงานที่ทีมของเราทำอยู่ในปัจจุบันเพื่อทำให้เบราว์เซอร์การทำงานอัตโนมัติและการทดสอบราบรื่นที่สุดสำหรับคุณ และเครื่องมือที่เกี่ยวข้อง เช่น โปรแกรมอัดเสียง DevTools จะช่วยคุณสร้างการทดสอบโดยบันทึกโฟลว์ผู้ใช้ใน Chrome และเล่นซ้ำใน Puppeteer
เรียนรู้การทดสอบใน web.dev
เครื่องมือที่กล่าวถึงในบทความนี้จะช่วยปรับปรุงการทดสอบอัตโนมัติ แต่ถ้าเพิ่งเริ่มต้น อาจดูเหมือนมีความเข้าใจและเรียนรู้ ได้มากมาย เราจึงสร้างหลักสูตรโมดูลใหม่ขึ้นมา 10 หลักสูตรที่ชื่อว่า Learn Testing on web.dev หลักสูตรเชิงลึกนี้ครอบคลุมแนวคิดหลักของการทดสอบ สถานที่และวิธีการทดสอบ ประเภทการทดสอบ และสิ่งที่จะทดสอบจริงๆ ซึ่งเป็นจุดเริ่มต้นที่ดี ในเส้นทางการทดสอบของคุณ เมื่อมีข้อมูลสำคัญแล้ว ให้ไปยังคอลเล็กชันการทดสอบการทำงานอัตโนมัติที่มีข้อมูลเชิงลึกและเคล็ดลับที่ใช้ในการทดสอบที่เจาะจงมากขึ้นซึ่งนำไปใช้ได้จริง