ยอมรับเถอะว่าการเขียนการทดสอบอัตโนมัติไม่ใช่สิ่งที่สนุกที่สุดในชีวิตของนักพัฒนาซอฟต์แวร์ ในฐานะนักพัฒนาซอฟต์แวร์ เราอยากเขียนฟีเจอร์ แก้ไขข้อบกพร่อง และพัฒนาโลก อย่างไรก็ตาม ในระยะยาวงานต่างๆ อาจ "มีข้อผิดพลาด" เมื่อเราไม่มีการทดสอบอัตโนมัติในเวิร์กโฟลว์ ดังนั้น เราคิดว่าการเขียนการทดสอบอัตโนมัตินั้นเป็นสิ่งสำคัญ
ด้วยแผงโปรแกรมอัดเสียงในเครื่องมือสำหรับนักพัฒนาเว็บใน 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
ในทางกลับกัน 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
แสดงขั้นตอนของผู้ใช้ซ้ำด้วยส่วนขยาย
ตั้งแต่ 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/’)
ปรับแต่งประสบการณ์การเล่นซ้ำบนเครื่องมือสำหรับนักพัฒนาเว็บ
ส่วนขยายการเล่นซ้ำช่วยให้คุณเล่นไฟล์บันทึกเสียงซ้ำได้โดยใช้บริการและโครงสร้างพื้นฐานของบุคคลที่สามโดยไม่ต้องออกจากโปรแกรมบันทึก DevTools
หากต้องการสร้างส่วนขยายการเล่นซ้ำของคุณเอง โปรดดูเอกสารเกี่ยวกับส่วนขยายการเล่นซ้ำ และดูคำแนะนำในส่วนขยายตัวอย่าง
เผยแพร่ส่วนขยาย 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
ในตัวอย่างนี้ เราจะเล่นการไหลเวียนของผู้ใช้ซ้ำในกรณีต่อไปนี้
- พุชการเปลี่ยนแปลงใหม่ไปยัง Branch
main
- ทุกวัน เวลา 12:30 น.
นอกจาก GitHub Actions แล้ว คุณยังผสานรวมกับผู้ให้บริการระบบคลาวด์ที่คุณชื่นชอบได้ด้วย ไปที่การสาธิตนี้เพื่อดูวิธีใช้งาน Google Cloud Run Job เพื่อดำเนินการโฟลว์ผู้ใช้ได้สูงสุด 10,000 รายการพร้อมกัน
บทสรุป
ในบล็อกโพสต์นี้ เราได้พูดถึงตัวเลือกต่างๆ ในการส่งออกโฟลว์ผู้ใช้เป็นไฟล์ JSON, ปรับแต่งการเล่นซ้ำด้วย PuppeteerReplayExtension
, เปลี่ยนรูปแบบโฟลว์ผู้ใช้ด้วย PuppeteerStringifyExtension
และผสานรวมเข้ากับเวิร์กโฟลว์ CI
เราหวังว่าบล็อกโพสต์นี้ให้แนวคิดบางอย่างเกี่ยวกับวิธีใช้แผงโปรแกรมอัดเสียงและเครื่องมือที่มีให้เพื่อช่วยให้ผสานรวมเวิร์กโฟลว์การทดสอบเข้ากับโปรเจ็กต์ได้ง่ายขึ้น เราหวังว่าจะได้เห็นสิ่งที่คุณจะสร้าง
ดาวน์โหลดช่องตัวอย่าง
ลองใช้ Chrome Canary, Dev หรือเบต้าเป็นเบราว์เซอร์สำหรับการพัฒนาเริ่มต้น ช่องทางแสดงตัวอย่างเหล่านี้ช่วยให้คุณได้เข้าถึงฟีเจอร์ล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ ทดสอบ API แพลตฟอร์มเว็บที่ล้ำสมัย และค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะได้ใช้งาน
ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์ใหม่ๆ และการเปลี่ยนแปลงในโพสต์ หรือเรื่องอื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ
- ส่งคำแนะนำหรือความคิดเห็นถึงเราผ่าน crbug.com
- รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
- ทวีตที่ @ChromeDevTools
- โปรดแสดงความคิดเห็นในวิดีโอ YouTube เกี่ยวกับมีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บในวิดีโอ YouTube หรือเคล็ดลับสำหรับเครื่องมือสำหรับนักพัฒนาเว็บ