התאמה אישית ואוטומציה של תהליכי עבודה למשתמשים מעבר לכלי ההקלטה של כלי הפיתוח ל-Chrome

Ergün Erdogmus
Ergün Erdogmus
X
Jecelyn Yeen

בואו נודה בזה: כתיבת בדיקות אוטומטיות היא לא החלק הכי מהנה בחיים של מפתחים. כמפתחים, אנחנו רוצים לכתוב תכונות, לתקן באגים ולשפר את העולם! עם זאת, אם לא נשתמש בבדיקות אוטומטיות בתהליכי העבודה שלנו, בטווח הארוך יכולים להיווצר הרבה באגים. לכן, אנחנו גם חושבים שחשוב לכתוב בדיקות אוטומטיות.

בעזרת החלונית Recorder (מכשיר הקלטה) בכלי הפיתוח ל-Chrome, אפשר להקליט תהליכי שימוש ולהפעיל אותם מחדש, לייצא אותם לפורמטים שונים (לדוגמה, סקריפטים לבדיקה) באמצעות תוספים וספריות שונים של צד שלישי, להתאים אישית את תהליכי השימוש באמצעות הספרייה Puppeteer Replay ולשלב אותם בתהליכי העבודה הקיימים.

בפוסט הזה בבלוג נסביר על:

  • איך מייצאים תהליכי שימוש ומפעילים אותם מחדש באופן פרוגרמטי.
  • איך להתאים אישית את רצפי המשתמשים בעזרת Puppeteer Replay.
  • איך לשלב את השירות בתהליכי העבודה של CI/CD.

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

ייצוא תהליכי משתמש והפעלה מחדש באופן פרוגרמטי

כברירת מחדל, הכלי להקלטת נתונים מאפשר לייצא את ההקלטות האלה כסקריפט של Puppeteer או של Puppeteer Replay, או כקובץ JSON רגיל.

אפשרויות הייצוא.

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

משחק חוזר עם Puppeteer Replay

פועלים לפי ההוראות במאגר כדי להתקין את Puppeteer Replay.

נניח ששמרתם את תהליכי המשתמש בפורמט JSON בתיקייה recordings (לדוגמה, demo project). תוכלו להשתמש בפקודה הבאה כדי להריץ תהליך משתמש אחד או יותר: 

# replay one user flow
npx @puppeteer/replay ./recordings/order-a-coffee.json

# replay all user flows under recordings folder
npx @puppeteer/replay ./recordings/*.json

אפשר גם להוסיף סקריפט npm להרצת ההקלטות. מוסיפים את השורה הבאה לשדה scripts בקובץ package.json:

"replay-all": "replay recordings"

כך תוכלו להריץ את npm run replay-all בשורת הפקודה כדי להפעיל מחדש את כל ההקלטות.

כברירת מחדל, המשתמש מעביר את ההפעלה מחדש ללא ממשק משתמש (שנקרא גם מצב 'דפדפן ללא GUI'). אם רוצים לראות את ממשק המשתמש, צריך להגדיר את משתנה הסביבה PUPPETEER_HEADLESS ל-false לפני שמריצים את הפקודה.

PUPPETEER_HEADLESS=false npm run replay-all

הפעלה מחדש באמצעות ספריות של צד שלישי

יש כמה ספריות של צד שלישי שאפשר להשתמש בהן כדי להפעיל מחדש מעבר לדפדפן Chrome. כאן מופיעה הרשימה המלאה של הספריות.

לדוגמה, TestCafe היא מסגרת לבדיקות מקצה לקצה. יש בו תמיכה בהפעלה חוזרת של תהליכי משתמש ב-JSON באמצעות Safari ועוד.

npm install -g testcafe

# replay with selected browsers
testcafe safari ./recordings/order-one-coffee.json
testcafe firefox ./recordings/order-one-coffee.json
testcafe chrome ./recordings/order-one-coffee.json

# replay with all browsers
testcafe all ./recordings/order-one-coffee.json

לעומת זאת, Saucelabs היא פלטפורמת בדיקות מבוססת-ענן. הוא תומך בהפעלה מחדש של זרימות משתמשים ב-JSON עם דפדפנים וגרסאות שונים בענן.

זו דוגמה לקובץ תצורה ב-Saucelabs. נכנסים למאגר ההדגמות.

apiVersion: v1alpha
kind: puppeteer-replay
suites:
  - name: "order a coffee"
    recordings: [ "recordings/order-a-coffee.json" ]
…

ייצוא תהליכי משתמשים עם תוספים שונים

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

לייצא את תהליכי העבודה של המשתמשים עם תוספים שונים.

לדוגמה, אפשר לתעד ולייצא את תהליכי השימוש כסקריפט מותאם אישית של WebPageTest. בעזרת הסקריפט תוכלו לבדוק את הביצועים של תהליכי שימוש מרובת שלבים באפליקציות שלכם. עם זאת, כתיבת הסקריפטים האלה יכולה להיות לפעמים מאתגרת.

בנוסף, אם כבר יש לכם כלים לבדיקה, יש תוספים לייצוא תהליכי שימוש לסקריפטים שונים של בדיקות, כמו Cypress,‏ Nightwatch,‏ WebdriverIO,‏ Testing Library ועוד. הרשימה המלאה כך תוכלו להתחיל לכתוב בדיקות מהר יותר.

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

בנוסף לתוספים, רוב ספקי הבדיקות האלה גם מפרסמים ספריות כדי לעזור לכם להמיר באופן פרוגרמטי תהליכים של משתמשים ב-JSON מרובים.

לדוגמה, אפשר להשתמש בספריות @cypress/chrome-recorder כדי לייצא תהליכי שימוש לבדיקות של Cypress.

npm install -g @cypress/chrome-recorder
npx @cypress/chrome-recorder ./recordings/*.json

הפעלה מחדש של תהליכי שימוש עם תוספים

החל מגרסה 112 של Chrome, אפשר עכשיו לשפר את חוויית השימוש בעזרת תוספים כדי להשמיע מחדש הקלטות. התוספים האלה מאפשרים לשלב בצורה חלקה שירותים ותשתיות של צד שלישי כדי להפעיל מחדש הקלטות בלי לצאת מ-DevTools.

תוספים של 'הפעלה חוזרת' מאפשרים לתוספים להוסיף חלונית ל-DevTools כדי להגדיר הפעלה חוזרת ולהציג את תוצאות ההפעלה החוזרת.

כדי להתחיל, עיין ברשימת התוספים הזמינים או למד כיצד ליצור תוסף מותאם אישית משלך.

פיתוח תוספים או ספריות משלכם

מאחורי הקלעים, כל התוספים והספריות מבוססים על ספריית Puppeteer Replay. מלבד האפשרות להפעיל מחדש את זרימת המשתמשים, Puppeteer Replay מציע ממשקי API שמאפשרים להתאים אישית או לשנות את השידור החוזר של זרימת המשתמש.

התאמה אישית של שידור חוזר של תהליכים של משתמש

נלמד איך ליצור פלאגין לצילום מסך. לכל תהליך משתמש, אנחנו רוצים:

  • כדי לצלם את המסך בסוף כל שלב ולשמור אותו בתיקייה _screenshots.
  • כדי להציג הודעה כשהרצת תהליך המשתמש מסתיימת.

זהו קטע הקוד. אפשר גם להוריד את הדמו הזה ולשחק בו.

/* screenshot-plugin.mjs */

import { mkdirSync } from "fs";
import { PuppeteerRunnerExtension } from "@puppeteer/replay";

// create folder if not exist
let screenshotFolder = "_screenshots";
mkdirSync(screenshotFolder, { recursive: true });

export default class ScreenshotPlugin extends PuppeteerRunnerExtension {
  count = 0;

  async afterEachStep(step, flow) {
    await super.afterEachStep(step, flow);
    this.count = this.count + 1;

    const path = `${screenshotFolder}/${flow.title}-${this.count}.png`;
    await this.page.screenshot({ path });

    console.log(`Saved screenshot as ${path}`);
  }

  async afterAllSteps(step, flow) {
    await super.afterAllSteps(step, flow);
    console.log("Operation completed successfully.");
  }
}

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

שומרים את הקובץ, ואז אפשר להריץ תהליכי שימוש עם התוסף הזה באמצעות הפקודה הבאה:

# replay one user flow with plugin 
npx @puppeteer/replay --extension ./screenshot-plugin.mjs  ./recordings/order-a-coffee.json

# replay all user flows with plugin under recordings folder
npx @puppeteer/replay --extension ./screenshot-plugin.mjs ./recordings/*.json

זהו הפלט:

Saved screenshot as _screenshots/order-a-coffee-1.png
Saved screenshot as _screenshots/order-a-coffee-2.png
Saved screenshot as _screenshots/order-a-coffee-3.png
…

Operation completed successfully.

טרנספורמציה של תהליכי שימוש

דרך נוספת להתאמה אישית של תהליך השימוש היא להמיר אותו לפורמטים שונים (לדוגמה, סקריפטים של בדיקות Cypress או Nightwatch).

לדוגמה, תהליך השימוש של המשתמש מכיל שלב שבו המשתמש מנווט לכתובת URL. כך נראה קובץ ה-JSON:

{
  "title": "order-a-coffee",
  "steps": [
    {
      "type": "navigate",
      "url": "https://coffee-cart.netlify.app/"
    },
    …
  ]
}

אפשר ליצור פלאגין מסוג stringify כדי להמיר את השלב ל-JavaScript. אפשר גם לעיין בספריות קיימות אחרות כדי לראות איך הן עושות זאת.

לדוגמה, קטע הקוד הבא מראה איך WebdriverIO הופכת את שלב הניווט:


export class StringifyPlugin extends PuppeteerStringifyExtension {

  #appendStepType(out: LineWriter, step: Step, flow: UserFlow) {
        switch (step.type) {
        case 'navigate':
    return out.appendLine(`await browser.url(${formatAsJSLiteral(step.url)})`)
        …
  }

כשמריצים את הפלאגין עם תהליכי המשתמש, שורת הניווט מתרגמת ל-await browser.url(‘https://coffee-cart.netlify.app/’).

התאמה אישית של חוויית ההפעלה מחדש של כלי הפיתוח

תוספים להפעלה חוזרת מאפשרים להפעיל מחדש הקלטות באמצעות שירותים ותשתיות של צד שלישי, בלי לצאת ממכשיר ההקלטה בכלי הפיתוח.

משפרים את חוויית הצפייה החוזרת בעזרת תוספים לדפדפן.

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

פרסום תוספי Chrome

אחרי שתתאימו אישית את תהליכי המשתמש ותבצעו בהם טרנספורמציה, תוכלו לארוז אותם בתור תוסף ל-Chrome ולפרסם אותם בחנות האינטרנט של Chrome.

אפשר לצפות בהדגמה הזו ובהוראות שמסבירות איך לבצע ניפוי באגים באופן מקומי ולפרסם תוסף ל-Chrome.

שילוב עם צינור עיבוד הנתונים של CI/CD

יש כמה דרכים לעשות זאת, ויש הרבה כלים שאפשר להשתמש בהם. דוגמה לביצוע אוטומטי של התהליך הזה באמצעות GitHub Actions: 

# .github/node.js.yml

name: Replay recordings

on:
  push:
    branches: [ "main" ]
  schedule:
    - cron: '30 12 * * *' # daily 12:30pm

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 18.x
        cache: 'npm'
    - run: npm install puppeteer
    - run: npm run replay-all
    - run: npm run start

בדוגמה זו, נפעיל מחדש את זרימת המשתמש כאשר:

  • שינויים חדשים שנדחפים להסתעפות main
  • כל יום בשעה 12:30

מלבד פעולות GitHub, אפשר לשלב גם עם ספקי שירותי הענן המועדפים עליך. בדמו הזה תוכלו לראות איך משתמשים ב-Google Cloud Run Job כדי להריץ עד 10,000 תהליכי משתמש במקביל.

סיכום

בפוסט הזה בבלוג דיברנו על האפשרויות השונות לייצוא תהליכים של משתמשים כקובצי JSON, להתאמה אישית של הפעלות מחדש באמצעות PuppeteerReplayExtension, לשינוי תהליכים של משתמשים באמצעות PuppeteerStringifyExtension ולשילוב שלהם בתהליכי העבודה של ה-CI.

אני מקווה שהפוסט הזה נתן לכם כמה רעיונות לשימוש בחלונית התיעוד ובכלים שסופקו, כדי להקל על שילוב תהליך עבודה של בדיקות בפרויקטים שלכם. ממש מעניין לראות את מה תפַתחו!

הורדת הערוצים לתצוגה מקדימה

מומלץ להשתמש ב-Chrome Canary, ב-Dev או ב-Beta כדפדפן הפיתוח שמוגדר כברירת מחדל. ערוצי התצוגה המקדימה האלה מעניקים לכם גישה לתכונות העדכניות ביותר של DevTools, מאפשרים לכם לבדוק ממשקי API מתקדמים לפלטפורמות אינטרנט ולמצוא בעיות באתר לפני שהמשתמשים שלכם יעשו זאת.

יצירת קשר עם צוות כלי הפיתוח ל-Chrome

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