חשוב לבצע בדיקות. לפני שמעבירים למשתמשים את מה שיצרתם – בין אם מדובר באתר או באפליקציה שלמים או בתכונה חדשה – חשוב לבדוק שהם פועלים כצפוי. עם זאת, עדיין יש הרבה בדיקות שמתבצעות באופן ידני, ועמיתים או מהנדסי בדיקות מתבקשים לבדוק את התכונה החדשה ולדווח על בעיות.
בדיקה ידנית יכולה לזהות סוגים מסוימים של בעיות, אבל היא עלולה לפספס הרבה יותר. יכול להיות שהאנשים שמבצעים את הבדיקה יפספסו מקרים קיצוניים, או שלא יצליחו לבדוק תהליך מסוים באפליקציה. בנוסף, אין להם את כל המידע שהיה לכם כשכתבתם את הקוד, והם לא יודעים על הבעיות הספציפיות שכללתם קוד כדי למנוע. וככל שיחלוף הזמן ויתווספו תכונות חדשות, האם הם יחזרו וינסו שוב את כל הדברים האלה שפעלו בעבר, כדי לוודא שהשינויים לא פגעו בהם?
לכן צוות Chrome מאמין בחשיבות של בדיקות אוטומטיות. שימוש בחבילת בדיקות שמבצעת בדיקות מהימנות וחוזרות של התכונה כדי לבדוק אם היא פגומה, מאפשר לכם להיות בטוחים שכל פרט קטן נבדק, עכשיו וגם אחרי הפיתוח העתידי. הידע שלכם כמפתחים של תכונה מסוימת מופיע בתוך בדיקה.
עם זאת, אנחנו יודעים שבדיקה אוטומטית יכולה להיות מאתגרת. לכן צוות Chrome מספק את הכלים וההנחיות הבאים כדי להקל עליכם ככל האפשר.
בובנאי
Puppeteer היא ספריית Node.js. הוא מאפשר לבצע אוטומציה ב-Chrome, ב-Chromium וב-Firefox באמצעות ממשק API ברמה גבוהה שקל להשתמש בו.
ה-API הזה התבסס במקור על פרוטוקול Chrome DevTools, אבל המטרה היא להפוך את פרוטוקול WebDriver BiDi המתקדם החדש לבסיס של Puppeteer עד סוף השנה. WebDriver BiDi, שנוצר בשיתוף עם כל ספקי הדפדפנים העיקריים, מפשט הרבה תרחישים לדוגמה של אוטומציה ומאפשר הרבה תרחישים חדשים, והוא תואם לדפדפנים שונים.
אבל אין צורך לחכות. כבר היום אפשר להשתמש ב-API של Puppeteer בהרבה תרחישי שימוש לאוטומציה, והם רק ישתפרו עם WebDriver BiDi. אפשר לעשות הרבה דברים, החל מבדיקות ועד לסריקה חזותית ואוטומציה של תהליכים, באמצעות תכונות כמו אינטראקציות בדפים, חסימת בקשות וצילומי מסך. אפשר אפילו להשתמש בו כדי לבדוק מודלים של AI לאינטרנט בענן באמצעות WebGPU ו-WebGL.
Puppeteer משמש גם כלים כמו WebdriverIO, מסגרת מלאה לבדיקת דפדפנים, וכלי הניתוח של ארגז החול לפרטיות, שמאפשרים לכם להבין טוב יותר את השימוש בקובצי cookie ובנתוני משתמשים באתר.
Chrome Headless
אם כבר יצרתם פעם אוטומציה של Chrome באמצעות Puppeteer, יכול להיות שגיליתם שלא מוצג חלון דפדפן בזמן הריצה של הבדיקות. כברירת מחדל, Puppeteer מפעיל את Chrome במצב Headless. כלומר, אין חלון דפדפן בפועל בזמן שהתהליך האוטומטי פועל.
אבל האם ידעתם שמצב Headless של Chrome לא היה רק Chrome ללא חלון, אלא למעשה גרסה של Chrome שמתוחזקת בנפרד? במשך זמן רב, המצב הזה הוביל לבלבול ולקשיים במעקב אחר באגים ובעיות.
החל מגרסה 112 של Chrome, הוספנו מצב Headless חדש שמבוסס עכשיו על אותה קוד בסיס כמו ב-Chrome הרגיל. כך לא רק תפתרו את הבלבול הקודם, אלא גם תקבלו פונקציונליות שלא הייתה אפשרית בעבר, כמו שימוש בתוספים במהלך האוטומציה.
ב-Puppeteer נעשה שימוש במצב החדש הזה ללא ממשק משתמש כברירת מחדל מאז גרסה 22. אם אתם משתמשים ב-Chrome Headless באמצעות פתרונות אוטומציה אחרים, תוכלו לאלץ את המצב החדש של דפדפן ללא ממשק משתמש באמצעות המתג של שורת הפקודה --headless=new.
מצב Headless החדש של Chrome חזק יותר, אבל הוא לא קל כמו המצב הקודם. אם יש לכם מגבלה משמעותית על המשאבים או שאתם לא צריכים את כל התכונות של Chrome, תוכלו להשתמש במצב Headless הקודם בתור chrome-headless-shell.
Chrome for Testing
כשבודקים, צריך שליטה מפורטת בסביבת הבדיקה: מערכת ההפעלה, הדפדפן וגרסה של הדפדפן. עם העדכון האוטומטי של Chrome, זה יכול להיות קשה.
לכן יצרנו את Chrome לבדיקה – גרסה של Chrome ללא עדכון אוטומטי, שפורסמת לצד כל גרסה של Chrome לכל מערכת הפעלה מרכזית, וניתן לגשת אליה מארכיון עם גרסאות. כך תוכלו להריץ את תהליכי העבודה האוטומטיים שלכם בגרסה ספציפית של Chrome בלי הרבה התעסקות.
אפשר לגשת לקובצי הבינארי של Chrome for Testing דרך לוח הבקרה של זמינות Chrome for Testing, ה-API בפורמט JSON או הכלי של Puppeteer לשורת הפקודה.
Puppeteer, המצב המעודכן של Chrome ללא גוף (Headless) ו-Chrome for Testing הם רק חלק מהעבודה שהצוות שלנו מבצע כרגע כדי להפוך את האוטומציה של הדפדפן ואת הפעלת הבדיקות לחלקים חלקים ככל האפשר. כלים קשורים, כמו DevTools Recorder, עוזרים לכם ליצור בדיקות: תוכלו להקליט תהליך משתמש ב-Chrome ולהפעיל אותו מחדש ב-Puppeteer.
מידע על בדיקות ב-web.dev
הכלים שמפורטים במאמר הזה יעזרו לכם לשפר את הבדיקות האוטומטיות. אבל אם אתם רק מתחילים, יכול להיות שזה נראה כמו הרבה מידע שצריך להבין וליישם. לכן יצרנו קורס חדש בן 10 מודולים – לימוד בדיקות ב-web.dev. הקורס המעמיק הזה מכסה את העקרונות הבסיסיים של בדיקות, את המקומות והדרכים שבהם מריצים בדיקות, את סוגי הבדיקות ואת הדברים שצריך לבדוק בפועל. זהו מקום מצוין להתחיל בו את תהליך הבדיקה. אחרי שתקבלו את המידע הבסיסי, תוכלו להמשיך לאוסף המאמרים שלנו בנושא אוטומציה של בדיקות, שבו מוסבר לעומק על שאלות ספציפיות יותר בנושא בדיקות ומפורטים טיפים מעשיים.