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

Ergün Erdogmus
Ergün Erdogmus
X
Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

נניח ששומרים בתיקייה recordings את תהליכי המשתמש ב-JSON (לדוגמה, פרויקט הדגמה), אפשר להשתמש בפקודה הבאה כדי לבצע תהליך אחד או יותר של משתמש: 

# 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 כדי לייצא תהליכים של משתמשים לבדיקות ברוש.

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

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

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

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

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

יצירת תוספים או ספריות משלך

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

סיכום

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

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

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

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

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

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

  • אפשר לשלוח לנו הצעה או משוב דרך crbug.com.
  • כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות   עוד   > עזרה > דיווח על בעיות בכלי הפיתוח בכלי הפיתוח.
  • שליחת ציוץ אל @ChromeDevTools.
  • נשמח לשמוע מה חדש בסרטונים ב-YouTube של כלי הפיתוח או בסרטונים ב-YouTube שקשורים לכלי פיתוח.