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

Ergün Erdogmus
Ergün Erdogmus
X
Jecelyn Yeen

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

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

בפוסט הזה בבלוג נדון:

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

בפוסט הזה נניח שכבר ידוע לכם מהם היסודות של Recorder. אם זו הפעם הראשונה שאתם משתמשים ב-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: 

# .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 Actions, אפשר גם לשלב עם ספקי הענן המועדפים עליכם. בדמו הזה תוכלו לראות איך משתמשים ב-Google Cloud Run Job כדי להריץ עד 10,000 תהליכי משתמש במקביל.

סיכום

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

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

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

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

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

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