ปรับแต่งและทำให้กระบวนการทำงานของผู้ใช้เป็นแบบอัตโนมัตินอกเหนือจากโปรแกรมบันทึกเครื่องมือสำหรับนักพัฒนาเว็บใน 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

สมมติว่าคุณบันทึกโฟลว์ผู้ใช้ JSON ไว้ในโฟลเดอร์ recordings (เช่น โปรเจ็กต์สาธิต) คุณจะใช้คําสั่งต่อไปนี้เพื่อเรียกใช้โฟลว์ผู้ใช้ได้อย่างน้อย 1 รายการ 

# 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 ในบรรทัดคำสั่งเพื่อเล่นไฟล์บันทึกเสียงทั้งหมดซ้ำได้

การเล่นโฟลว์ผู้ใช้ซ้ำโดยไม่มี UI โดยค่าเริ่มต้น (หรือที่เรียกว่าโหมดไม่มีส่วนหัว) หากต้องการดู UI ให้กำหนดตัวแปรสภาพแวดล้อม PUPPETEER_HEADLESS เป็น "เท็จ" ก่อนเรียกใช้คำสั่ง

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

ในทางกลับกัน Sacelabs เป็นแพลตฟอร์มทดสอบในระบบคลาวด์ รองรับการเล่นโฟลว์ผู้ใช้ JSON ซ้ำโดยใช้เบราว์เซอร์และเวอร์ชันต่างๆ ในระบบคลาวด์

ลองดูตัวอย่างไฟล์การกำหนดค่าใน Saucelabs โปรดไปที่ที่เก็บการสาธิต

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

ส่งออกการไหลเวียนของผู้ใช้ด้วยส่วนขยายที่แตกต่างกัน

นอกจากตัวเลือกเริ่มต้นแล้ว คุณยังติดตั้งส่วนขยายเพื่อส่งออกการไหลเวียนของผู้ใช้ไปยังรูปแบบต่างๆ ได้ด้วย

ส่งออกการไหลเวียนของผู้ใช้ด้วยส่วนขยายที่แตกต่างกัน

ตัวอย่างเช่น คุณสามารถบันทึกและส่งออกการไหลเวียนของผู้ใช้เป็น สคริปต์ที่กำหนดเองของ WebPageTest สคริปต์นี้จะช่วยให้คุณทดสอบประสิทธิภาพการไหลเวียนของผู้ใช้ที่มีหลายขั้นตอนผ่านแอปพลิเคชันได้ แต่บางครั้งการเขียนสคริปต์เหล่านั้นก็ทำได้ยาก

นอกจากนี้ หากคุณมีเครื่องมือทดสอบอยู่แล้ว เรามีส่วนขยายสําหรับส่งออกโฟลว์ผู้ใช้ไปยังสคริปต์การทดสอบต่างๆ เช่น Cypress, Nightwatch, WebdriverIO, คลังการทดสอบ และอื่นๆ ต่อไปนี้คือรายการทั้งหมด ซึ่งจะช่วยให้คุณและทีมเริ่มเขียนแบบทดสอบได้เร็วขึ้น

เปลี่ยนรูปแบบเป็นสคริปต์การทดสอบอื่นแบบเป็นโปรแกรม

นอกเหนือจากส่วนขยายแล้ว ผู้ให้บริการทดสอบส่วนใหญ่เหล่านี้ยังเผยแพร่ไลบรารีเพื่อช่วยให้คุณแปลงการไหลเวียนของผู้ใช้ JSON หลายรายการแบบเป็นโปรแกรมได้ด้วย

ตัวอย่างเช่น ใช้ไลบรารี @cypress/chrome-recorder เพื่อส่งออกโฟลว์ของผู้ใช้ไปยังการทดสอบ Cypress

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

แสดงการไหลเวียนของผู้ใช้ซ้ำด้วยส่วนขยาย

ตั้งแต่ Chrome 112 เป็นต้นไป คุณเพิ่มประสิทธิภาพประสบการณ์การใช้งานได้โดยใช้ส่วนขยายเพื่อเล่นไฟล์บันทึกเสียงซ้ำ ส่วนขยายเหล่านี้ช่วยให้คุณผสานรวมบริการและโครงสร้างพื้นฐานของบุคคลที่สามอย่างราบรื่นสำหรับการเล่นไฟล์บันทึกซ้ำโดยไม่ต้องออกจากเครื่องมือสำหรับนักพัฒนาเว็บ

ส่วนขยายการเล่นซ้ำช่วยให้ส่วนขยายเพิ่มแผงลงในเครื่องมือสำหรับนักพัฒนาเว็บเพื่อกำหนดค่าการเล่นซ้ำและแสดงผลการค้นหาการเล่นซ้ำได้

หากต้องการเริ่มต้นใช้งาน ให้สำรวจรายการส่วนขยายที่ใช้งานได้หรือเรียนรู้วิธีสร้างส่วนขยายที่กำหนดเองของคุณ

สร้างส่วนขยายหรือไลบรารีของคุณเอง

ส่วนขยายและห้องสมุดทั้งหมดสร้างขึ้นที่ด้านบนของคลัง 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.");
  }
}

โค้ดค่อนข้างชัดเจน เราขยาย PuppeteerRunnerExtension API เพื่อบันทึกภาพหน้าจอหลังทำแต่ละขั้นตอน และบันทึกข้อความหลังจากทำตามขั้นตอนทั้งหมดแล้ว

บันทึกไฟล์ จากนั้นเราจะเรียกใช้โฟลว์ผู้ใช้ด้วยส่วนขยายนี้โดยใช้คำสั่งต่อไปนี้

# 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 หรือ เบต้า เป็นเบราว์เซอร์เริ่มต้นสำหรับการพัฒนา ช่องทางพรีวิวเหล่านี้จะทำให้คุณเข้าถึงฟีเจอร์ล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ ทดสอบ API แพลตฟอร์มเว็บที่ล้ำสมัย และพบปัญหาในเว็บไซต์ก่อนผู้ใช้

ติดต่อทีม Chrome DevTools

ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์ใหม่และการเปลี่ยนแปลงในโพสต์ หรืออื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ

  • ส่งข้อเสนอแนะหรือความคิดเห็นถึงเราทาง crbug.com
  • รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม   เพิ่มเติม > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
  • ทวีตที่ @ChromeDevTools
  • แสดงความคิดเห็นว่ามีอะไรใหม่ในวิดีโอ YouTube เครื่องมือสำหรับนักพัฒนาเว็บ หรือวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ