ประกาศการรองรับ Firefox อย่างเป็นทางการใน Puppeteer

• ตั้งแต่ Puppeteer เวอร์ชัน 23 เป็นต้นไป จะรองรับ Firefox อย่างเป็นทางการ ทำให้ตอนนี้สามารถทำ automation และ end-to-end testing ได้อย่างง่ายดายทั้งบน Chrome และ Firefox
  • const browser = await puppeteer.launch({browser: "firefox"});
• เช่นเดียวกับ Chrome, Puppeteer สามารถดาวน์โหลดและรัน Firefox เวอร์ชันเสถียรล่าสุดได้
• การรองรับ Firefox อิงอยู่บน WebDriver BiDi ซึ่งเป็นโปรโตคอลข้ามเบราว์เซอร์ที่ปัจจุบันมีการ implement อยู่ใน Gecko และ Chromium ไม่ใช่โปรโตคอล automation เฉพาะของ Firefox
  • การใช้โปรโตคอลข้ามเบราว์เซอร์ช่วยให้ในอนาคตรองรับเบราว์เซอร์เพิ่มเติมได้ง่ายขึ้น

พื้นหลังทางเทคนิค

• จนกระทั่งเมื่อไม่นานมานี้ สำหรับผู้ที่ต้องการทำ browser automation มีตัวเลือกหลักอยู่สองทาง
  • ใช้ W3C WebDriver API
  • ใช้ API เฉพาะของแต่ละเบราว์เซอร์ (Chrome DevTools Protocol, Firefox Remote Debugging Protocol เป็นต้น)
• ทั้งสองทางเลือกต่างก็มี trade-off อยู่ไม่น้อย
  • WebDriver API แบบดั้งเดิมทำงานบน HTTP และมีโมเดลแบบส่งคำสั่งไปยังเบราว์เซอร์แล้วรอการตอบกลับ
  • สิ่งนี้ทำงานได้ดีสำหรับสถานการณ์ automation อย่างการโหลดหน้าเว็บและตรวจสอบว่า element แสดงขึ้นมาหรือไม่ แต่ไม่เหมาะกับกรณีใช้งานขั้นสูง เช่น การรับ event จากเบราว์เซอร์หรือการรันหลายคำสั่งพร้อมกัน
  • API เฉพาะของแต่ละเบราว์เซอร์โดยทั่วไปถูกออกแบบมาเพื่อรองรับกรณีใช้งานที่ซับซ้อนของ developer tools ภายในเบราว์เซอร์ จึงมีชุดความสามารถที่ล้ำหน้าไปกว่า WebDriver มาก
• ดังนั้น client สำหรับ browser automation จึงต้องเลือกระหว่างการใช้โปรโตคอลเดียวเพื่อรองรับหลายเบราว์เซอร์แต่มีความสามารถจำกัด หรือให้ชุดความสามารถที่สมบูรณ์กว่าแต่ต้อง implement ฟีเจอร์แยกสำหรับแต่ละเบราว์เซอร์ที่รองรับ
• สิ่งนี้เพิ่มต้นทุนและความซับซ้อนในการสร้างระบบ automation แบบข้ามเบราว์เซอร์ที่มีคุณภาพ
• สถานการณ์นี้คล้ายกับก่อนที่ LSP(Language Server Protocol) จะถูกพัฒนาขึ้น
• WebDriver BiDi นำชุดความสามารถด้าน automation ที่เคยถูกจำกัดอยู่ในโปรโตคอลเฉพาะของแต่ละเบราว์เซอร์มาไว้ในโปรโตคอลมาตรฐาน เพื่อให้ใช้งานได้กับทุกเบราว์เซอร์และทุกเครื่องมือ automation

การยกเลิกการรองรับ CDP(Chrome DevTools Protocol) แบบทดลองใน Firefox

• ในช่วงแรกของความพยายามปรับปรุงการทดสอบข้ามเบราว์เซอร์ ได้มีการจัดเตรียม partial implementation ของ CDP ที่จำกัดอยู่เพียงคำสั่งและ event บางส่วนที่จำเป็นต่อกรณีใช้งานด้าน testing
• แต่เมื่อชัดเจนว่านี่ไม่ใช่ทิศทางของการพัฒนา automation แบบข้ามเบราว์เซอร์ ความพยายามในส่วนนี้จึงถูกยุติ
• ผลลัพธ์คือมันไม่ได้รับการดูแลรักษา และไม่เข้ากันกับความสามารถสมัยใหม่ของ Firefox เช่น site isolation
• ดังนั้นจึงมีแผนจะถอดการรองรับนี้ออกภายในปลายปี 2024

แผนต่อจากนี้

• ยังมี API บางส่วนที่ยังไม่รองรับ
  • API ที่มีเฉพาะใน CDP
  • API ที่ยังต้องการงานด้านมาตรฐานเพิ่มเติม
  • API ที่มีมาตรฐานแล้วแต่ยังไม่ได้ implement
• จะจัดลำดับความสำคัญจาก feedback ของผู้ใช้

[xguru]

ความคิดเห็นจาก Hacker News

• การที่ทีม Puppeteer ย้ายออกจาก Google ไปอยู่ Microsoft และพัฒนา Playwright ต่อ ถือเป็นความเสียหายครั้งใหญ่สำหรับ Google

  • Google ไม่ได้ตระหนักว่าเครื่องมือทำงานอัตโนมัติของเบราว์เซอร์มีความสำคัญต่อกลยุทธ์ AI agent มากแค่ไหน
  • Google ต้องเลือกระหว่างปล่อย Puppeteer ไปแล้วพึ่งพา MS/Playwright หรือหาทิศทางใหม่ให้ Puppeteer
  • WebDriver BiDi เป็นการพัฒนาข้อดีของ Chrome DevTools Protocol(CDP) ต่อในรูปแบบมาตรฐาน

• แม้ว่าโปรโตคอล WebDriver BiDi จะไม่ใช่โปรโตคอลสำหรับสร้างเบราว์เซอร์โดยตรง แต่ก็ดูเหมือนว่าจะทำหน้าที่นั้นได้เกือบ 90%

  • Gecko พัฒนาไปมากตั้งแต่ยุค Servo และช่วงนี้ประสิทธิภาพก็ค่อนข้างดี
  • การสร้างเบราว์เซอร์บนพื้นฐาน Chromium นั้นง่ายกว่าการสร้างเบราว์เซอร์บนพื้นฐาน Gecko มาก
  • สามารถใช้ API เพื่อทำการนำทาง ดักจับคำขอ อ่านคอนโซล รัน JS และอื่น ๆ ได้
  • น่าจะดีถ้าสามารถตัด chrome ของเบราว์เซอร์ออกแล้วสร้างเบราว์เซอร์แบบกำหนดเองได้

• Playwright รองรับเอนจินเรนเดอร์สมัยใหม่ทั้งหมด (Chromium, WebKit, Firefox)

• สงสัยเรื่อง accessibility tree

  • สาเหตุที่ accessibility tree ถูกลบออกจาก Playwright เพราะมันเป็นการดัมพ์โครงสร้างข้อมูลภายในที่ต่างกันไปตามแต่ละเอนจิน
  • accessibility tree เป็นการสรุปองค์ประกอบเชิงความหมายทั้งหมดของหน้า และยอดเยี่ยมมากสำหรับ snapshot test หรือการทดสอบแบบ BDD
  • อยากให้ accessibility tree ถูกทำให้เป็นมาตรฐานในเอนจินเบราว์เซอร์หลัก ๆ
  • ในมุมมองของการพัฒนาเว็บ ก็น่าจะดีถ้าเข้าถึงได้จากเลเยอร์อื่นอย่าง CSS และ DOM ด้วย