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

Ergün Erdogmus
Ergün Erdogmus
X
Jecelyn Yeen

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

החלונית מכשיר ההקלטה בכלי הפיתוח ל-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 או בטא כדפדפן הפיתוח שמוגדר כברירת מחדל. ערוצי התצוגה המקדימה האלה מעניקים לכם גישה לתכונות העדכניות ביותר של DevTools, מאפשרים לכם לבדוק ממשקי API מתקדמים לפלטפורמות אינטרנט ולמצוא בעיות באתר לפני שהמשתמשים יעשו זאת.

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

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