Tuỳ chỉnh và tự động hoá luồng người dùng bên ngoài Trình ghi công cụ của Chrome cho nhà phát triển

Ergün Erdogmus

Twitter

Jecelyn Yeen

Twitter GitHub Trang chủ

Lưu ý: Bạn muốn giúp cải thiện Công cụ cho nhà phát triển? Hãy đăng ký tham gia Nghiên cứu về người dùng của Google tại đây.

Hãy phải công nhận rằng, viết kiểm thử tự động không phải là điều thú vị nhất trong cuộc sống của một nhà phát triển. Là nhà phát triển, chúng tôi muốn viết các tính năng, sửa lỗi và cải thiện thế giới! Tuy nhiên, khi không có kiểm thử tự động trong quy trình công việc của mình thì về lâu dài, mọi thứ có thể trở nên "không ổn định". Vì vậy, chúng tôi cũng nghĩ rằng việc viết kiểm thử tự động là rất quan trọng.

Với bảng điều khiển Trình ghi trong Công cụ của Chrome cho nhà phát triển, bạn có thể ghi và phát lại luồng người dùng, xuất chúng sang nhiều định dạng khác nhau (ví dụ: tập lệnh thử nghiệm) thông qua các tiện ích và thư viện khác nhau của bên thứ ba, tùy chỉnh luồng người dùng bằng thư viện Puppeteer Replay và tích hợp chúng với quy trình làm việc hiện tại của bạn.

Trong bài đăng trên blog này, chúng ta sẽ thảo luận về:

• Cách xuất và phát lại luồng người dùng theo phương thức lập trình.
• Cách tuỳ chỉnh luồng người dùng nhờ sự trợ giúp của công cụ Puppeteer Replay.
• Cách tích hợp với quy trình làm việc trong CI/CD.

Bài đăng này trên blog giả định rằng bạn đã biết thông tin cơ bản về Máy ghi âm. Nếu bạn mới sử dụng Máy ghi âm, hãy làm theo video hướng dẫn ngắn và hướng dẫn này để bắt đầu.

Xuất luồng người dùng và phát lại theo phương thức lập trình

Theo mặc định, ứng dụng Máy ghi âm cho phép bạn xuất những bản ghi âm này dưới dạng tập lệnh Puppeteer hoặc Puppeteer Replay (Phát lại bằng nội dung của Pupeteer) hoặc dưới dạng tệp JSON thuần.

Sau khi xuất luồng người dùng dưới dạng tệp JSON, bạn có thể nhập lại luồng đó vào bảng điều khiển Máy ghi âm rồi phát lại hoặc sử dụng các thư viện bên ngoài để phát lại. Thư viện Puppeteer Replay là một trong những thư viện hiện có.

Chơi lại bằng Puppeteer Replay

Làm theo hướng dẫn trên kho lưu trữ để cài đặt Chơi lại Puppeteer.

Giả sử bạn lưu luồng người dùng JSON vào thư mục recordings (ví dụ: dự án minh hoạ), bạn có thể dùng lệnh sau để thực thi một hoặc nhiều luồng người dùng:

# replay one user flow
npx @puppeteer/replay ./recordings/order-a-coffee.json

# replay all user flows under recordings folder
npx @puppeteer/replay ./recordings/*.json

Nếu muốn, bạn có thể thêm tập lệnh npm để chạy bản ghi; thêm dòng này vào trường scripts trong package.json:

"replay-all": "replay recordings"

Bằng cách đó, bạn có thể chạy npm run replay-all trong dòng lệnh để phát lại tất cả bản ghi.

Theo mặc định, luồng người dùng sẽ phát lại mà không cần giao diện người dùng (còn được gọi là chế độ không có giao diện người dùng). Nếu bạn muốn xem giao diện người dùng, hãy đặt biến môi trường PUPPETEER_HEADLESS thành false trước khi chạy lệnh.

PUPPETEER_HEADLESS=false npm run replay-all

Phát lại bằng các thư viện của bên thứ ba

Bạn có thể sử dụng một số thư viện của bên thứ ba để phát lại ngoài trình duyệt Chrome. Dưới đây là danh sách đầy đủ các thư viện.

Ví dụ: TestCafe là một khung kiểm thử toàn diện. Tính năng này hỗ trợ việc phát lại luồng người dùng JSON với Safari và nhiều tính năng khác!

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

Mặt khác, Saucelabs là một nền tảng kiểm thử trên đám mây. Tính năng này hỗ trợ việc phát lại luồng người dùng JSON với nhiều trình duyệt và phiên bản trên đám mây.

Dưới đây là một tệp cấu hình mẫu trong Saucelabs. Hãy xem kho lưu trữ bản minh hoạ.

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

Xuất luồng người dùng có nhiều tiện ích

Ngoài các lựa chọn mặc định, bạn cũng có thể cài đặt tiện ích để xuất luồng người dùng sang nhiều định dạng.

Ví dụ: bạn có thể ghi lại và xuất luồng người dùng dưới dạng tập lệnh tuỳ chỉnh WebPageTest. Với tập lệnh, bạn có thể kiểm thử hiệu suất của luồng người dùng nhiều bước thông qua ứng dụng của bạn. Tuy nhiên, đôi khi việc viết những tập lệnh đó có thể rất khó khăn.

Ngoài ra, nếu đã có sẵn công cụ kiểm thử, bạn cũng có thể dùng các tiện ích để xuất luồng người dùng sang các tập lệnh kiểm thử khác nhau, chẳng hạn như Cypress, Nightwatch, WebdriverIO, Thư viện kiểm thử, v.v. Sau đây là danh sách đầy đủ. Việc này có thể giúp bạn và nhóm của bạn bắt đầu viết chương trình kiểm thử nhanh hơn.

Chuyển đổi sang các tập lệnh kiểm thử khác nhau theo phương thức lập trình

Ngoài tiện ích, hầu hết các nhà cung cấp dịch vụ kiểm thử này cũng phát hành thư viện để giúp bạn chuyển đổi nhiều luồng người dùng JSON theo phương thức lập trình.

Ví dụ: sử dụng thư viện @cypress/chrome-recorder để xuất luồng người dùng sang kiểm thử Cypress.

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

Phát lại luồng người dùng bằng tiện ích

Kể từ Chrome 112, giờ đây bạn có thể nâng cao trải nghiệm của mình bằng cách sử dụng các tiện ích để phát lại các bản ghi. Các tiện ích này cho phép bạn tích hợp liền mạch các dịch vụ và cơ sở hạ tầng của bên thứ ba để phát lại bản ghi mà không cần rời khỏi Công cụ cho nhà phát triển.

Để bắt đầu, hãy khám phá danh sách các tiện ích có sẵn hoặc tìm hiểu cách tạo tiện ích tuỳ chỉnh của riêng bạn.

Tạo tiện ích hoặc thư viện của riêng bạn

Trên thực tế, tất cả các tiện ích và thư viện đều được xây dựng dựa trên thư viện Puppeteer Replay. Ngoài việc cho phép bạn phát lại luồng người dùng, tính năng Phát lại luồng người dùng còn cung cấp các API cho phép bạn tuỳ chỉnh hoặc biến đổi phát lại luồng người dùng.

Tuỳ chỉnh bản phát lại luồng người dùng

Hãy tạo một trình bổ trợ ảnh chụp màn hình. Đối với mỗi luồng người dùng, chúng ta muốn:

• Để chụp ảnh màn hình ở cuối mỗi bước và lưu ảnh đó vào thư mục _screenshots.
• Để xuất thông báo khi quá trình thực thi luồng người dùng hoàn tất.

Dưới đây là đoạn mã. Bạn có thể tải bản minh hoạ này xuống rồi dùng thử.

/* 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.");
  }
}

Bản thân mã này cũng khá rõ ràng. Chúng ta mở rộng API PuppeteerRunnerExtension để lưu ảnh chụp màn hình sau mỗi bước, cũng như để ghi lại một thông báo sau tất cả các bước.

Lưu tệp, sau đó, chúng ta có thể chạy luồng người dùng với tiện ích này bằng lệnh sau:

# 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

Sau đây là kết quả:

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.

Chuyển đổi luồng người dùng

Một cách khác để tuỳ chỉnh luồng người dùng là chuyển đổi luồng đó thành nhiều định dạng (ví dụ: tập lệnh thử nghiệm Cypress hoặc Nightwatch).

Ví dụ: luồng người dùng của bạn chứa một bước để điều hướng đến một URL. Tệp JSON có dạng như sau:

{
  "title": "order-a-coffee",
  "steps": [
    {
      "type": "navigate",
      "url": "https://coffee-cart.netlify.app/"
    },
    …
  ]
}

Bạn có thể tạo một trình bổ trợ tạo chuỗi để chuyển đổi bước này sang JavaScript. Bạn cũng có thể xem các thư viện hiện có khác để tìm hiểu cách thực hiện.

Ví dụ: đoạn mã sau đây cho thấy cách WebdriverIO chuyển đổi bước điều hướng:

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)})`)
        …
  }

Khi bạn chạy trình bổ trợ với luồng người dùng, dòng điều hướng sẽ dịch thành await browser.url(‘https://coffee-cart.netlify.app/’).

Tuỳ chỉnh trải nghiệm phát lại Công cụ cho nhà phát triển

Tiện ích phát lại cung cấp cách phát lại bản ghi bằng dịch vụ và cơ sở hạ tầng của bên thứ ba mà không cần rời khỏi Trình ghi cho nhà phát triển.

Để tạo tiện ích phát lại của riêng bạn, hãy tham khảo tài liệu về tiện ích phát lại và xem ví dụ về tiện ích phát lại để được hướng dẫn.

Phát hành tiện ích của Chrome

Sau khi tuỳ chỉnh và chuyển đổi luồng người dùng, bạn có thể đóng gói chúng dưới dạng tiện ích của Chrome và xuất bản lên Cửa hàng Chrome trực tuyến.

Hãy xem bản minh hoạ này và hướng dẫn để tìm hiểu cách gỡ lỗi cục bộ và xuất bản tiện ích của Chrome.

Tích hợp với quy trình CI/CD

Có nhiều cách để làm việc này và cũng có rất nhiều công cụ. Dưới đây là ví dụ về cách tự động hoá quy trình này bằng 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

Trong ví dụ này, chúng tôi sẽ phát lại luồng người dùng khi:

• các thay đổi mới đẩy đến nhánh main
• lúc 12:30 trưa hằng ngày

Ngoài GitHub Actions (Thao tác trên GitHub), bạn cũng có thể tích hợp với các nhà cung cấp dịch vụ đám mây mà mình yêu thích. Hãy xem bản minh hoạ này để xem cách bạn có thể dùng Google Cloud Run Job để thực thi song song tối đa 10.000 luồng người dùng!

Kết luận

Trong bài đăng trên blog này, chúng ta đã thảo luận về các tuỳ chọn để xuất luồng người dùng dưới dạng tệp JSON, tuỳ chỉnh bản phát lại bằng PuppeteerReplayExtension, biến đổi luồng người dùng bằng PuppeteerStringifyExtension và tích hợp chúng vào quy trình CI.

Tôi hy vọng bài đăng trên blog này đã mang đến cho bạn một vài ý tưởng về cách sử dụng bảng điều khiển Máy ghi âm cũng như các công cụ được cung cấp để giúp bạn dễ dàng tích hợp quy trình kiểm thử vào các dự án của mình hơn. Rất mong được xem thành quả của bạn!

Tải các kênh xem trước xuống

Hãy cân nhắc sử dụng Chrome Canary, Dev hoặc Beta làm trình duyệt phát triển mặc định. Những kênh xem trước này cung cấp cho bạn quyền truy cập vào các tính năng mới nhất của Công cụ cho nhà phát triển, kiểm thử API nền tảng web tiên tiến và tìm ra các sự cố trên trang web của bạn trước khi người dùng làm việc đó!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất kỳ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

• Gửi đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
• Báo cáo sự cố Công cụ cho nhà phát triển bằng cách sử dụng mục Tuỳ chọn khác     > Trợ giúp > Báo cáo sự cố Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Tweet tại @ChromeDevTools.
• Để lại nhận xét về Video trên YouTube của chúng tôi về Tính năng mới trong Video trên YouTube của Công cụ cho nhà phát triển hoặc mẹo Công cụ cho nhà phát triển.