คำถามที่พบบ่อย

สถานะของการสนับสนุนข้ามเบราว์เซอร์คืออะไร

การสนับสนุนอย่างเป็นทางการของ Firefox อยู่ในขั้นทดลอง การทำงานร่วมกันอย่างต่อเนื่องกับ Mozilla มีเป้าหมายที่จะสนับสนุน Use Case การทดสอบแบบต้นทางถึงปลายทางทั่วไป ซึ่งนักพัฒนาซอฟต์แวร์คาดหวังว่าจะมีความครอบคลุมในเบราว์เซอร์ต่างๆ ทีม Puppeteer ต้องการความคิดเห็นจาก ผู้ใช้เพื่อทำให้การรองรับ Firefox เสถียรและพูดถึง API ที่ขาดหายไปให้เราทราบ

ตั้งแต่ Puppeteer v2.1.0 เป็นต้นไป คุณสามารถระบุ puppeteer.launch({product: 'firefox'}) เพื่อเรียกใช้สคริปต์ Puppeteer ใน Firefox Nightly ได้โดยไม่ต้องมีแพตช์
ที่กำหนดเองเพิ่มเติม แม้ว่าการทดสอบแบบเก่าจำเป็นต้องใช้ Firefox เวอร์ชันที่แพตช์ แต่วิธีการปัจจุบันใช้ได้กับ Firefox ที่ "ขาย"

เราร่วมมือกับผู้ให้บริการเบราว์เซอร์รายอื่นๆ เพื่อทำให้เบราว์เซอร์อย่างเช่น Safari รองรับ Puppeteer ต่อไป ซึ่งรวมถึงการสํารวจมาตรฐานสําหรับการเรียกใช้คำสั่งข้ามเบราว์เซอร์ (แทนการพึ่งพาโปรโตคอล DevTools ที่ไม่ได้มาตรฐานที่ Chrome ใช้)

เป้าหมายและหลักการของ Puppeteer คืออะไร

เป้าหมายของโครงการมีดังนี้

  • สร้างไลบรารี Canonical ที่มีขนาดบางซึ่งไฮไลต์ความสามารถของโปรโตคอล DevTools
  • ระบุการใช้งานข้อมูลอ้างอิงสำหรับไลบรารีการทดสอบที่คล้ายกัน ท้ายที่สุดแล้ว เฟรมเวิร์กอื่นๆ เหล่านี้สามารถนำ Puppeteer มาใช้เป็นชั้นพื้นฐานได้
  • เพิ่มการนำการทดสอบเบราว์เซอร์แบบไม่มีส่วนหัว/อัตโนมัติมาใช้
  • ช่วยลองใช้ฟีเจอร์ใหม่ของ DevTools Protocol...และตรวจหาข้อบกพร่อง
  • ดูข้อมูลเพิ่มเติมเกี่ยวกับปัญหาของการทดสอบเบราว์เซอร์อัตโนมัติและช่วยเติมเต็มช่องว่างเหล่านั้น

เราปรับหลักการ Chromium เพื่อช่วยขับเคลื่อนการตัดสินใจเกี่ยวกับผลิตภัณฑ์ ดังนี้

  • ความเร็ว: Puppeteer มีค่าใช้จ่ายในหน้าที่ทำงานโดยอัตโนมัติเกือบเป็นศูนย์
  • ความปลอดภัย: Puppeteer ดำเนินการนอกกระบวนการที่เกี่ยวข้องกับ Chromium ซึ่งทำให้การสร้างหน้าเว็บที่อาจเป็นอันตรายแบบอัตโนมัติมีความปลอดภัย
  • ความเสถียร: เครื่อง Puppeteer ไม่ควรเป็นขุยและไม่ควรทำให้หน่วยความจำรั่วไหล
  • ความเรียบง่าย: Puppeteer มี API ระดับสูงที่ใช้งานง่าย เข้าใจ และแก้ไขข้อบกพร่อง

Puppeteer จะมาแทนที่ Selenium/WebDriver หรือไม่

ไม่ ทั้ง 2 โปรเจ็กต์มีค่าด้วยเหตุผลที่ต่างกันมากดังต่อไปนี้

  • Selenium/WebDriver มุ่งเน้นการทำงานอัตโนมัติแบบหลายเบราว์เซอร์ คุณค่าที่นำเสนอคือ API มาตรฐานรายการเดียวที่ทำงานได้ในเบราว์เซอร์หลักๆ ทั้งหมด
  • Puppeteer มุ่งเน้นที่ Chromium คุณค่าที่นำเสนอคือความสามารถที่หลากหลายและมีความน่าเชื่อถือสูงขึ้น

อย่างไรก็ตาม คุณสามารถใช้ Puppeteer ทำการทดสอบกับ Chromium เช่น การใช้ jest-puppeteer ที่ขับเคลื่อนโดยชุมชน นี่อาจไม่ใช่โซลูชันทดสอบเพียงโซลูชันเดียวของคุณ แต่ก็มีข้อดีบางประการเมื่อเทียบกับ WebDriver:

  • Puppeteer กำหนดให้ไม่ต้องตั้งค่า และมาพร้อมกับเวอร์ชัน Chromium ที่ทำงานได้ดีที่สุด ซึ่งควรจะมีการทดสอบ 2-3 อย่างที่ใช้งาน Chromium อย่างเดียว ดีกว่าที่จะไม่ได้ทำการทดสอบใดๆ เลย
  • หุ่นเชิดมีสถาปัตยกรรมที่ขับเคลื่อนด้วยเหตุการณ์ซึ่งทำให้ขจัดความหยาบได้มากมาย ไม่จำเป็นต้องมีเสียงเรียกคำว่า "สลีป(1000)" ชั่วร้ายในสคริปต์เชิดหุ่นกระบอก
  • หุ่นเชิดจะวิ่งแบบไม่มีหัวโดยค่าเริ่มต้นซึ่งทำให้วิ่งได้เร็ว นอกจากนี้ Puppeteer v1.5.0 ยังเผยบริบทของเบราว์เซอร์ ซึ่งช่วยให้ดำเนินการทดสอบพร้อมกันได้อย่างมีประสิทธิภาพ
  • Puppeteer โดดเด่นเมื่อคุณต้องการแก้ไขข้อบกพร่อง นั่นคือ เปลี่ยนบิต "ไร้หัว" เป็น False เพิ่ม "slowMo" แล้วคุณจะเห็นว่าเบราว์เซอร์กำลังทำอะไร คุณยังสามารถเปิดเครื่องมือสำหรับ Chrome Dev เพื่อตรวจสอบสภาพแวดล้อมการทดสอบได้ด้วย

เหตุใด Puppeteer v.XXX จึงใช้ไม่ได้กับ Chromium v.YYY

เรามองว่า Puppeteer เป็นเอนทิตีที่มองไม่เห็นกับ Chromium Puppeteer แต่ละเวอร์ชันมาพร้อมกับ Chromium เวอร์ชันเฉพาะ ซึ่งเป็นเวอร์ชันเดียวที่รับประกันว่าจะใช้ได้

นี่ไม่ใช่ข้อจำกัดปลอม งาน Puppeteer มากมายเกิดขึ้นในที่เก็บ Chromium ต่อไปนี้เป็นเรื่องราวทั่วไป:

  1. รายงานข้อบกพร่องของ Puppeteer
  2. ซึ่งเป็นปัญหาเกี่ยวกับโปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บ เราจึง แก้ไขใน Chromium
  3. เมื่อแก้ไขอัปสตรีมแล้ว เราจึงอัปเดต Chromium เป็น Puppeteer

อย่างไรก็ตาม บ่อยครั้งที่ควรใช้ Puppeteer กับ Google Chrome อย่างเป็นทางการแทนที่จะใช้ Chromium คุณควรติดตั้งเวอร์ชัน puppeteer-core ที่สอดคล้องกับเวอร์ชัน Chrome เพื่อดำเนินการนี้

ตัวอย่างเช่น หากต้องการขับเคลื่อน Chrome 101 ด้วย puppeteer-core ให้ใช้แท็ก chrome-101 npm ดังนี้

npm install puppeteer-core@chrome-101

Puppeteer ใช้ Chromium เวอร์ชันใด

ค้นหาเวอร์ชันโดยใช้วิธีใดวิธีหนึ่งต่อไปนี้

  • มองหารายการ chromium ใน revisions.ts หากต้องการค้นหาคอมมิตของ Chromium และหมายเลขเวอร์ชันที่เกี่ยวข้อง ให้ค้นหาการแก้ไขที่ขึ้นต้นด้วย r ในส่วน "ค้นหารุ่น" ของ OmahaProxy
  • ค้นหาแผนที่ versionsPerRelease ใน versions.js ซึ่งมีการแมประหว่างเวอร์ชัน Chromium และ Puppeteer หมายเหตุ: ไฟล์มีเฉพาะเวอร์ชัน Puppeteer ที่มีการอัปเดต Chromium เท่านั้น เราไม่ได้แสดงรายการ Puppeteer ทุกเวอร์ชัน

Puppeteer ใช้ Firefox เวอร์ชันใด

เนื่องจากการสนับสนุน Firefox อยู่ในขั้นทดลอง Puppeteer จะดาวน์โหลด Firefox Nightly ล่าสุดเมื่อตั้งค่าตัวแปรสภาพแวดล้อม PUPPETEER_PRODUCT เป็น firefox และนั่นเป็นเหตุผลที่ค่าของ firefox ใน revisions.ts คือ latest -- Puppeteer ไม่ได้เชื่อมโยงกับ Firefox เวอร์ชันใดเวอร์ชันหนึ่ง

วิธีดึงข้อมูล Firefox Nightly เป็นส่วนหนึ่งของการติดตั้ง Puppeteer

PUPPETEER_PRODUCT=firefox npm i puppeteer
# or "yarn add puppeteer"

การนำทางคืออะไร

จากมุมมองของ Puppeteer "navigation" คือทุกสิ่งที่เปลี่ยนแปลง URL ของหน้าเว็บ นอกเหนือจากการนำทางตามปกติที่เบราว์เซอร์เข้าถึงเครือข่ายเพื่อดึงข้อมูลเอกสารใหม่จากเว็บเซิร์ฟเวอร์แล้ว ซึ่งรวมถึงการนำทาง Anchor และการใช้ History API ด้วย

คำนิยามของ "การนำทาง" นี้ทำให้ Puppeteer ทำงานร่วมกับแอปพลิเคชันหน้าเว็บเดียวได้อย่างราบรื่น

เหตุการณ์อินพุตที่ "เชื่อถือได้" และ "ไม่น่าเชื่อถือ" แตกต่างกันอย่างไร

เหตุการณ์อินพุตอาจแบ่งออกเป็น 2 กลุ่มใหญ่ในเบราว์เซอร์ ได้แก่ เชื่อถือได้และไม่น่าเชื่อถือ

  • เหตุการณ์ที่เชื่อถือได้: เหตุการณ์ที่สร้างโดยผู้ใช้โต้ตอบกับหน้าเว็บ เช่น การใช้เมาส์หรือแป้นพิมพ์
  • เหตุการณ์ที่ไม่น่าเชื่อถือ: เหตุการณ์ที่สร้างโดย Web API เช่น เมธอด document.createEvent หรือ element.click()

เว็บไซต์สามารถแยกความแตกต่างระหว่าง 2 กลุ่มนี้ได้

  • โดยใช้แฟล็กเหตุการณ์ Event.isTrusted
  • เพื่อดักจับเหตุการณ์ที่เกี่ยวข้อง เช่น เหตุการณ์ 'click' ที่เชื่อถือได้ทั้งหมดจะเกิดขึ้นก่อนเหตุการณ์ 'mousedown' และ 'mouseup'

คุณควรสร้างเหตุการณ์ที่เชื่อถือได้เพื่อใช้การทำงานอัตโนมัติ เหตุการณ์อินพุตทั้งหมดที่สร้างขึ้นด้วย Puppeteer จะได้รับความไว้วางใจและเริ่มทำงานของเหตุการณ์ที่เกี่ยวข้องที่เหมาะสม

หากบุคคลใดต้องการเหตุการณ์ที่ไม่น่าเชื่อถือ ก็ไปที่บริบทของหน้าด้วย page.evaluate แล้วสร้างเหตุการณ์ปลอมได้ทุกเมื่อไม่ว่าด้วยเหตุผลใดก็ตาม

await page.evaluate(() => {
  document.querySelector('button[type=submit]').click();
});

Puppeteer ไม่สนับสนุนฟีเจอร์ใดบ้าง

คุณอาจพบว่า Puppeteer ไม่ทำงานตามที่คาดไว้เมื่อควบคุมหน้าเว็บที่มีเสียงและวิดีโอ ตัวอย่างเช่น การเล่นวิดีโอและภาพหน้าจอมีแนวโน้มที่จะล้มเหลว) มี 2 เหตุผลที่ทำให้เกิดกรณีนี้

  • Puppeteer มาพร้อมกับ Chromium (ไม่ใช่ Chrome) ดังนั้นจึงรับค่าจากข้อจำกัดเกี่ยวกับสื่อของ Chromium ทั้งหมดโดยค่าเริ่มต้น ซึ่งหมายความว่า Puppeteer ไม่รองรับรูปแบบที่ได้รับอนุญาต เช่น AAC หรือ H.264
    • คุณสามารถบังคับให้ Puppeteer ใช้ Chrome เวอร์ชันที่ติดตั้งแยกต่างหากแทน Chromium ได้โดยใช้ตัวเลือก executablePath เป็น puppeteer.launch คุณควรใช้การกำหนดค่านี้เมื่อต้องการเปิดตัว Chrome อย่างเป็นทางการที่รองรับรูปแบบสื่อเหล่านี้เท่านั้น
  • เนื่องจาก Puppeteer (ในทุกการกำหนดค่า) ควบคุม Chromium หรือ Chrome เวอร์ชันเดสก์ท็อป ระบบจึงไม่รองรับฟีเจอร์ที่ Chrome เวอร์ชันอุปกรณ์เคลื่อนที่เท่านั้น ซึ่งหมายความว่า Puppeteer ไม่รองรับ HTTP Live Streaming (HLS)

ฉันมีปัญหาในการติดตั้ง / เรียกใช้ Puppeteer ในสภาพแวดล้อมการทดสอบ ฉันควรขอความช่วยเหลือได้จากที่ใด

เรามีคำแนะนำในการแก้ปัญหาสำหรับระบบปฏิบัติการต่างๆ ที่แสดงรายการทรัพยากร Dependency ที่จำเป็น

Chromium ได้รับการดาวน์โหลดทุกครั้งที่เรียกใช้ npm ci ฉันจะแคชการดาวน์โหลดได้อย่างไร

เส้นทางการดาวน์โหลดเริ่มต้นคือ node_modules/puppeteer/.local-chromium แต่คุณจะเปลี่ยนเส้นทางดังกล่าวด้วยตัวแปรสภาพแวดล้อม PUPPETEER_DOWNLOAD_PATH ได้

Puppeteer ใช้ตัวแปรดังกล่าวเพื่อแก้ไขตำแหน่งปฏิบัติการของ Chromium ในระหว่างการเปิดตัว คุณจึงไม่ต้องระบุ PUPPETEER_EXECUTABLE_PATH ด้วย

เช่น หากต้องการดาวน์โหลด Chromium ใน ~/.npm/chromium ให้ทำดังนี้

export PUPPETEER_DOWNLOAD_PATH=~/.npm/chromium
npm ci

# by default the Chromium executable path is inferred
# from the download path
npm test

# a new run of npm ci will check for the existence of
# Chromium in ~/.npm/chromium
npm ci

หากมีข้อสงสัยเพิ่มเติม ฉันต้องถามจากที่ไหน

การรับความช่วยเหลือเกี่ยวกับ Puppeteer ทำได้หลายวิธี ดังนี้

อย่าลืมค้นหาช่องเหล่านี้ก่อนโพสต์คำถาม