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

Jecelyn Yeen

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

Với bảng điều khiển Recorder (Trình ghi lại) trong Công cụ của Chrome cho nhà phát triển, bạn có thể ghi lại và phát lại luồng người dùng, xuất các luồng người dùng sang nhiều định dạng (ví dụ: tập lệnh kiểm thử) thông qua các tiện ích và thư viện của bên thứ ba, tuỳ 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 có của bạn.

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

• 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 với sự trợ giúp của Puppeteer Replay.
• Cách tích hợp với quy trình công việc CI/CD.

Bài đăng này trên blog giả định rằng bạn đã nắm được kiến thức cơ bản về ứng dụng Máy ghi âm. Nếu bạn mới sử dụng Máy ghi âm, hãy làm theo hướng dẫn giới thiệu ngắn và video 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 các bản ghi âm này dưới dạng tập lệnh Puppeteer hoặc Puppeteer Replay (Phát lại) 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 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 có sẵn.

Chơi lại cùng Puppeteer

Làm theo hướng dẫn trên kho lưu trữ để cài đặt tính năng Phát lại Puppeteer.

Giả sử bạn lưu luồng người dùng JSON trong thư mục recordings (ví dụ: dự án minh hoạ), thì bạn có thể sử 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"

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

Theo mặc định, các luồng người dùng sẽ chạy lại mà không có giao diện người dùng (còn 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 thông qua 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. Đâ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. Hộp cát về quyền riêng tư hỗ trợ phát lại luồng người dùng JSON trên Safari và nhiều ứng dụ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 thử nghiệm trên đám mây. Dịch vụ này hỗ trợ phát lại luồng người dùng JSON trên 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. Kiểm tra kho lưu trữ 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 bằng các tiện ích khác nhau

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 tra hiệu suất của luồng người dùng nhiều bước qua các ứng dụng của mình. Tuy nhiên, đôi khi bạn có thể gặp khó khăn trong việc viết những tập lệnh đó.

Ngoài ra, nếu đã có sẵn các công cụ kiểm thử, bạn sẽ có thêm các tiện ích để xuất luồng người dùng sang nhiều tập lệnh kiểm thử, chẳng hạn như Cypress, Nightwatch, WebdriverIO, Testing Library, v.v. Sau đây là danh sách đầy đủ. Điều này có thể giúp bạn và nhóm của bạn bắt đầu viết 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 xuất bản 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 các chương trình 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, bạn hiện có thể nâng cao trải nghiệm bằng cách dùng các tiện ích để phát lại 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 các 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 hiện có 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

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

Tuỳ chỉnh chế độ phát lại luồng người dùng

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

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

Dưới đây là đoạn mã. Bạn có thể tải xuống bản minh hoạ này và cũng chơi với nó.

/* 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 khá có ý nghĩa. Chúng ta mở rộng API PuppeteerRunnerExtension để lưu ảnh chụp màn hình sau mỗi bước và để ghi nhật ký 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 cách sử dụ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 người dùng thành nhiều định dạng khác nhau (ví dụ: tập lệnh thử nghiệm Bách hoặc Đồng hồ trong đêm).

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 sẽ có dạng như sau:

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

Bạn có thể tạo trình bổ trợ stringify để chuyển đổi bước này thành JavaScript. Bạn cũng có thể xem các thư viện hiện có khác để biết cách hoạt động của các thư việ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 trong 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 các bản ghi bằng cơ sở hạ tầng và dịch vụ của bên thứ ba mà không cần rời khỏi Trình ghi trong Công cụ 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 một tiện ích mẫu để biết hướng dẫn.

Xuất bản các tiện ích của Chrome

Khi bạn tùy 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.

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

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

Có nhiều cách để thực hiện việc này và cũng có nhiều công cụ trên thị trường. Dưới đây là một 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 ta sẽ phát lại luồng người dùng khi:

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

Ngoài GitHub Actions, 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 chuyển đến bản minh hoạ này để xem cách sử dụng Google Cloud Run Job (Công việc chạy Google Cloud) để thực thi song song tối đa 10.000 luồng người dùng!

Kết luận

Trong bài đăng này trên blog, chúng ta đã thảo luận về các lựa 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 công việc CI.

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

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

Hãy cân nhắc việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. Các kênh xem trước này cho phép bạ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ử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng làm điều đó!

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

Sử dụng các lựa chọn sau để thảo luận về các tính năng và thay đổi mới trong bài đăng, hoặc bất cứ nội dung 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ố trong Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác     > Trợ giúp > Báo cáo vấn đề về 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 bình luận 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 video trên YouTube trong Công cụ cho nhà phát triển.