Puppeteer לניפוי באגים

כיבוי מצב 'דפדפן ללא GUI'

לפעמים כדאי לראות מה הדפדפן מציג. במקום להפעיל את הדפדפן במצב 'דפדפן ללא GUI', צריך להפעיל גרסה מלאה של הדפדפן באמצעות 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}`));

שימוש בכלי לניפוי באגים בדפדפן קוד האפליקציה

יש שני הקשרי הפעלה: point.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); (חשוב לזכור לשנות את הבדיקה כדי להשתמש בפונקציה ולא ב-'=>')

מוסיפים הצהרת הערכה עם כלי לניפוי באגים או מוסיפים את הכלי לניפוי באגים להצהרת הערכה קיימת:

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

לאחר מכן, הבדיקה תפסיק לבצע את הצהרת ההערכה שלמעלה, ו-Chromium נעצר במצב ניפוי באגים.

שימוש בכלי לניפוי באגים ב-צומת.js

כך אפשר לנפות באגים בקוד הבדיקה. לדוגמה, תוכלו לעבור על await page.click() בסקריפט של ה-net.js ולראות את הקליק מתרחשת בדפדפן של קוד האפליקציה.

לא ניתן להריץ את await page.click() במסוף כלי הפיתוח עקב באג 833928 ב-Chromium. לכן, אם אתם רוצים להתנסות במשהו, עליכם להוסיף אותו לקובץ הבדיקה.

1. מוסיפים את הכלי לניפוי באגים לבדיקה, למשל: javascript debugger; await page.click('a[target=_blank]');
2. יש להגדיר את 'דפדפן ללא GUI' ל-False.
3. מריצים את הצומת --inspect-brk, לדוגמה node --inspect-brk node_modules/.bin/jest tests.
4. ב-Chrome, פותחים את chrome://inspect/#devices ולוחצים על inspect.
5. בדפדפן הבדיקה שנפתח לאחרונה, מקלידים F8 כדי להמשיך את ביצוע הבדיקה.
6. עכשיו הכלי לניפוי באגים פגע, וניתן לנפות באגים בדפדפן הבדיקה

הפעלת רישום מפורט (verbose) ביומן

תעבורת הנתונים הפנימית של פרוטוקול DevTools מתועדת במודול ניפוי הבאגים במרחב השמות של 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 כמו בוס!