Thử nghiệm toàn diện cho Tiện ích của Chrome

Kiểm thử toàn diện bao gồm việc tạo và tải một gói tiện ích vào trình duyệt. Một công cụ kiểm thử giao tiếp với trình duyệt để tự động hoá các hoạt động tương tác và kiểm thử các quy trình tương tự mà người dùng sẽ thực hiện. Thư viện hỗ trợ kiểm thử toàn diện thường sẽ cung cấp các cách kiểm soát trình duyệt, mô phỏng dữ liệu đầu vào của người dùng và quan sát trạng thái hiện tại của mọi trang đang mở.

Hãy xem bài viết Kiểm thử tiện ích Chrome bằng Puppeteer để xem hướng dẫn và bài viết Kiểm thử đơn vị để biết thông tin chi tiết về cách viết các chương trình kiểm thử đơn vị cho tiện ích Chrome.

Sử dụng các thư viện kiểm thử trình duyệt

Tiện ích được hỗ trợ bởi nhiều thư viện kiểm thử.

Thư viện Hướng dẫn
Người điều khiển rối / Nhà soạn kịch Xem Tiện ích của Chrome (Puppeteer / Playwright).
Selen Sử dụng đối tượng ChromeOptions để tải các tiện ích. Bạn có thể xem thêm thông tin tại đây.
WebDriverIO Xem phần Kiểm thử tiện ích trên web.

Chạy các kiểm thử trong Chrome không có giao diện người dùng

Khi chạy các bài kiểm thử trong quy trình tự động hoá, bạn thường cần tải tiện ích của mình trên một máy không có màn hình. Chế độ mới cho môi trường không có giao diện người dùng của Chrome cho phép Chrome chạy trong một môi trường không có người dùng tương tác như thế này. Khởi động Chrome bằng cờ --headless=new (headless hiện mặc định là "old", không hỗ trợ tải tiện ích). Tuỳ thuộc vào công cụ tự động hoá mà bạn chọn, có thể có một chế độ cài đặt tự động thêm cờ cho bạn.

Đặt mã nhận dạng tiện ích

Bạn nên có một mã nhận dạng tiện ích cố định trong các kiểm thử. Điều này giúp nhiều tác vụ phổ biến trở nên dễ dàng hơn, chẳng hạn như đưa nguồn gốc của tiện ích vào danh sách cho phép trên một máy chủ mà tiện ích cần giao tiếp hoặc mở các trang tiện ích trong quá trình kiểm thử. Để thực hiện việc này, hãy làm theo các bước trong phần Duy trì mã nhận dạng tiện ích nhất quán.

Kiểm thử các trang tiện ích

Bạn có thể truy cập vào các trang của tiện ích bằng URL tương ứng, ví dụ: chrome-extension://<id>/index.html. Sử dụng các phương thức điều hướng thông thường có trong công cụ tự động hoá mà bạn chọn để chuyển đến các URL này.

Kiểm thử cửa sổ bật lên của tiện ích

Với một số thư viện, bạn có thể mở cửa sổ bật lên bằng API action.openPopup() rồi lấy thông tin tham chiếu đến ngữ cảnh mới. Ví dụ: Puppeteer có tài liệu hướng dẫn cách thực hiện việc này trong hướng dẫn về Tiện ích của Chrome.

Nếu không thể thực hiện việc này trong thư viện bạn chọn, hãy mở URL của cửa sổ bật lên trong một thẻ mới. Nếu cửa sổ bật lên của bạn sử dụng thẻ đang hoạt động, hãy cân nhắc việc triển khai một chế độ ghi đè trong đó bạn có thể truyền mã nhận dạng thẻ một cách rõ ràng đến cửa sổ bật lên. Ví dụ:

const URL_PARAMS = new URLSearchParams(window.location.search);

async function getActiveTab() {
  // Open popup.html?tab=5 to use tab ID 5, etc.
  if (URL_PARAMS.has("tab")) {
    return await chrome.tabs.get(parseInt(URL_PARAMS.get("tab")));
  }

  const tabs = await chrome.tabs.query({
    active: true,
    currentWindow: true
  });

  return tabs[0];
}

Kiểm tra trạng thái của tiện ích

Để tránh lỗi kiểm thử khi bạn thay đổi hành vi nội bộ của tiện ích, thông thường, bạn nên tránh truy cập vào trạng thái nội bộ trong một kiểm thử tích hợp. Thay vào đó, bạn nên dựa vào những gì người dùng nhìn thấy để thực hiện các kiểm thử. Tuy nhiên, đôi khi bạn nên truy cập trực tiếp vào dữ liệu từ tiện ích. Trong những trường hợp này, hãy cân nhắc việc thực thi mã trong bối cảnh của một trang tiện ích.

Trong Puppeteer:

const workerTarget = await browser.waitForTarget(
  target => target.type() === 'service_worker'
);
const worker = await workerTarget.worker();

const value = await worker.evaluate(() => {
  chrome.storage.local.get('foo');
});

Trong Selenium:

// Selenium doesn't allow us to access the service worker, so we need to open an extension page where we can execute the code
await driver.get('chrome-extension://<id>/popup.html');
await driver.executeAsyncScript(
  'const callback = arguments[arguments.length - 1];' +
  'chrome.storage.local.get(\'foo\').then(callback);'
);

Kiểm thử việc chấm dứt trình thực thi dịch vụ

Để tìm hiểu về việc kiểm thử quá trình chấm dứt trình chạy dịch vụ, hãy xem bài viết kiểm thử quá trình chấm dứt trình chạy dịch vụ bằng Puppeteer. Chúng tôi cũng có một mẫu cho Puppeteer và Selenium.

Xin lưu ý rằng khi sử dụng một số khung kiểm thử, các worker dịch vụ có thể không tự động kết thúc như khi sử dụng bình thường. Đây là trường hợp trong Selenium. Công cụ này dựa vào ChromeDriver, công cụ này sẽ đính kèm một trình gỡ lỗi vào tất cả các worker dịch vụ để ngăn chúng bị dừng.