แก้ไขข้อบกพร่อง Puppeteer

ปิดโหมดไม่มีส่วนหัว

บางครั้งการดูว่าเบราว์เซอร์กำลังแสดงอะไรอยู่ก็มีประโยชน์ แทนที่จะเปิดในโหมดไม่มีส่วนหัว ให้เปิดเบราว์เซอร์เวอร์ชันเต็มโดยใช้ headless: false:

const browser = await puppeteer.launch({ headless: false });

ลดความเร็ว

ตัวเลือก slowMo จะทำให้การดำเนินการ Puppeteer ช้าลงถึงระดับมิลลิวินาทีที่ระบุไว้ ซึ่งเป็นอีกวิธีหนึ่งที่จะช่วยให้คุณรู้ว่าเกิดอะไรขึ้น

const browser = await puppeteer.launch({
  headless: false,
  slowMo: 250, // slow down by 250ms
});

บันทึกเอาต์พุตของคอนโซล

คุณสามารถรอฟังเหตุการณ์ console วิธีนี้มีประโยชน์เมื่อแก้ไขข้อบกพร่องของโค้ดใน page.evaluate() ดังนี้

page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));

await page.evaluate(() => console.log(`url is ${location.href}`));

ใช้โปรแกรมแก้ไขข้อบกพร่องในเบราว์เซอร์โค้ดของแอปพลิเคชัน

บริบทการดำเนินการมี 2 แบบ ได้แก่ Node.js ที่เรียกใช้โค้ดทดสอบ และเบราว์เซอร์ที่เรียกใช้โค้ดแอปพลิเคชันที่กำลังทดสอบ วิธีนี้ช่วยให้คุณแก้ไขข้อบกพร่องของโค้ดในเบราว์เซอร์โค้ดแอปพลิเคชัน ซึ่งก็คือโค้ดภายใน evaluate() ได้

ใช้ {devtools: true} เมื่อเปิด Puppeteer

const browser = await puppeteer.launch({ devtools: true });

เปลี่ยนระยะหมดเวลาทดสอบเริ่มต้น

  • jest: jest.setTimeout(100000);
  • ดอกมะลิ: jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
  • mocha: this.timeout(100000); (อย่าลืมเปลี่ยน test เพื่อใช้ function ไม่ใช่ '=>')

เพิ่มคำสั่งประเมินโดยมีโปรแกรมแก้ไขข้อบกพร่องอยู่ภายใน หรือเพิ่มโปรแกรมแก้ไขข้อบกพร่องลงในคำสั่งประเมินที่มีอยู่ ดังนี้

await page.evaluate(() => {
  debugger;
});

จากนั้นการทดสอบจะหยุดดำเนินการในคำสั่ง Assess ด้านบน และ Chromium จะหยุดในโหมดแก้ไขข้อบกพร่อง

ใช้โปรแกรมแก้ไขข้อบกพร่องใน Node.js

ซึ่งจะช่วยให้คุณแก้ไขข้อบกพร่องของโค้ดทดสอบได้ ตัวอย่างเช่น คุณอาจข้ามไป await page.click() ในสคริปต์ Node.js แล้วดูการคลิกที่เกิดขึ้นในเบราว์เซอร์โค้ดแอปพลิเคชัน

คุณเรียกใช้ await page.click() ในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บไม่ได้เนื่องจากข้อบกพร่องของ Chromium 833928 ดังนั้น หากต้องการลองใช้ คุณจะต้องเพิ่มฟีเจอร์ดังกล่าวลงในไฟล์ทดสอบ

  1. เพิ่มโปรแกรมแก้ไขข้อบกพร่อง เช่น javascript debugger; await page.click('a[target=_blank]');
  2. ตั้งค่าแบบไม่มีส่วนหัวเป็น "เท็จ"
  3. เรียกใช้โหนด --inspect-brk เช่น node --inspect-brk node_modules/.bin/jest tests
  4. เปิด chrome://inspect/#devices ใน Chrome แล้วคลิก inspect
  5. ในเบราว์เซอร์ทดสอบที่เปิดใหม่ ให้พิมพ์ F8 เพื่อดำเนินการทดสอบต่อ
  6. ขณะนี้โปรแกรมแก้ไขข้อบกพร่องของคุณถูกใช้งานแล้ว และคุณสามารถแก้ไขข้อบกพร่องได้ในเบราว์เซอร์ทดสอบ

เปิดใช้การบันทึกที่มีข้อมูลขนาดใหญ่

ระบบจะบันทึกการรับส่งข้อมูลของโปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บภายในด้วยโมดูลแก้ไขข้อบกพร่องภายใต้เนมสเปซของ Puppeteer

# Basic verbose logging
env DEBUG="puppeteer:*" node script.js

# Protocol traffic can be rather noisy. This example filters out all Network
# domain messages
env DEBUG="puppeteer:*" env DEBUG_COLORS=true node script.js 2>&1 | grep -v '"Network'

ดีบักโค้ด Puppeteer (โหนด) ของคุณ

ใช้ ndb:

  • npm install -g ndb (หรือใช้ npx)
  • เพิ่มโปรแกรมแก้ไขข้อบกพร่องลงในโค้ด Puppeteer (โหนด)
  • เพิ่ม ndb (หรือ npx ndb) ก่อนคำสั่งทดสอบ ตัวอย่างเช่น ndb jest หรือ ndb mocha (หรือ npx ndb jest / npx ndb mocha)
  • แก้ไขข้อบกพร่องการทดสอบใน Chromium ให้ดีที่สุด!