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

ארגון ארדומוס

Twitter

ג'סלין יין

Twitter GitHub דף הבית

הערה: רוצים לעזור בשיפור כלי הפיתוח? אפשר להירשם להשתתפות במחקר של Google על התנהגות המשתמשים.

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

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

בפוסט הזה בבלוג, נדון בנושאים הבאים:

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

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

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

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

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

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

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

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

# 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, Google Testing Library ועוד. הנה הרשימה המלאה. זה יכול לעזור לכם ולצוות שלכם להתחיל לכתוב מבחנים מהר יותר.

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

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

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

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 לביצוע עד 10,000 זרימות משתמשים בו-זמנית!

סיכום

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

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

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

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

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

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

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