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