Kiểm thử tiện ích Chrome bằng Puppeteer

Puppeteer cung cấp một khung để tạo các bài kiểm thử tự động cho trang web, trong đó cũng bao gồm khả năng kiểm thử Tiện ích Chrome. Đây là các kiểm thử toàn diện cấp cao, kiểm thử chức năng của một trang web hoặc tiện ích sau khi được tích hợp vào sản phẩm cuối cùng. Trong hướng dẫn này, chúng tôi minh hoạ cách viết một chương trình kiểm thử cơ bản cho một tiện ích trong kho lưu trữ mẫu của chúng tôi.

Trước khi bắt đầu

Sao chép hoặc tải kho lưu trữ chrome-extensions-samples xuống. Chúng ta sẽ sử dụng bản minh hoạ history API trong api-samples/history/showHistory làm tiện ích kiểm thử.

Bạn cũng cần cài đặt Node.JS. Đây là thời gian chạy mà Puppeteer được xây dựng trên đó.

Viết bài kiểm thử

Bước 1: Bắt đầu dự án Node.JS

Chúng ta cần thiết lập một dự án Node.JS cơ bản. Trong một thư mục mới, hãy tạo tệp package.json có nội dung sau:

package.json:

{
  "name": "puppeteer-demo",
  "version": "1.0"
}

Tương tự như tệp manifest.json của tiện ích, tất cả dự án Node đều phải có tệp này.

Bước 2: Cài đặt Puppeteer và Jest

Chạy npm install puppeteer jest để thêm Puppeteer và Jest làm phần phụ thuộc. Các tệp này sẽ tự động được thêm vào tệp package.json của bạn.

Bạn có thể viết các kiểm thử Puppeteer độc lập, nhưng chúng ta sẽ sử dụng Jest làm trình chạy kiểm thử để cung cấp thêm một số cấu trúc cho mã của mình.

Bước 3: Tạo một điểm truy cập

Tạo một tệp mới có tên là index.test.js rồi thêm đoạn mã sau:

index.test.js:

const puppeteer = require('puppeteer');

const EXTENSION_PATH = '../../api-samples/history/showHistory';

let browser;
let worker;

beforeEach(async () => {
  // TODO: Launch the browser.
});

afterEach(async () => {
  // TODO: Close the browser.
});

Bước 4: Khởi chạy trình duyệt

Cập nhật beforeEach và afterEach để khởi chạy và đóng trình duyệt. Khi chạy nhiều kiểm thử, bạn nên cân nhắc sử dụng cùng một trình duyệt. Tuy nhiên, bạn không nên làm như vậy vì việc này sẽ làm giảm khả năng tách biệt giữa các kiểm thử và có thể khiến một kiểm thử ảnh hưởng đến kết quả của một kiểm thử khác.

index.test.js:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });
});

afterEach(async () => {
  await browser.close();
  browser = undefined;
});

Bước 5: Chờ trình chạy dịch vụ của tiện ích

Chúng ta cần đợi trình chạy dịch vụ của tiện ích bắt đầu để có thể sử dụng trình chạy này sau đó để mở cửa sổ bật lên. Cập nhật hàm beforeEach bằng đoạn mã sau:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });

  const workerTarget = await browser.waitForTarget(
    // Assumes that there is only one service worker created by the extension
    // and its URL ends with service-worker.js.
    (target) =>
      target.type() === 'service_worker' &&
      target.url().endsWith('service-worker.js')
  );

  worker = await workerTarget.worker();
});

Bước 6: Thêm email đại diện

Để chạy các kiểm thử dễ dàng hơn, hãy thêm một bí danh vào tệp package.json:

package.json:

{
  "name": "puppeteer-demo",
  "version": "1.0",
  "dependencies": {
    "puppeteer": "^24.8.1"
  },
  "scripts": {
    "start": "jest ."
  }
}

Thao tác này sẽ chạy tất cả các tệp có đuôi .test.js trong thư mục hiện tại.

Bước 7: Mở cửa sổ bật lên

Thêm một bài kiểm tra cơ bản. Trước tiên, chúng ta sẽ mở một trang mới để có một mục trong nhật ký trình duyệt. Sau đó, chúng ta sẽ mở cửa sổ bật lên để xem nội dung nhật ký. Thêm mã sau:

index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );
});

Bước 8: Xác nhận trạng thái hiện tại

Xác nhận điều gì đó để kiểm thử có thể không thành công nếu tiện ích không hoạt động như mong đợi. Chúng ta biết rằng cửa sổ bật lên của chúng ta sẽ hiển thị các trang đã truy cập gần đây, vì vậy, hãy kiểm tra để đảm bảo rằng chúng ta thấy một trang:

index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );

  const popup = await popupTarget.asPage();

  const list = await page.$('ul');
  const children = await list.$$('li');

  expect(children.length).toBe(1);
});

Bước 9: Chạy kiểm thử

Để chạy kiểm thử, hãy sử dụng npm start. Bạn sẽ thấy kết quả cho biết kiểm thử đã thành công.

Bạn có thể xem toàn bộ dự án trong kho lưu trữ chrome-extensions-samples của chúng tôi.

Các bước tiếp theo

Sau khi nắm vững các kiến thức cơ bản, hãy thử tạo một bộ kiểm thử cho tiện ích của riêng bạn. Tài liệu tham khảo về API của Puppeteer chứa thêm thông tin về những điều có thể thực hiện – có nhiều chức năng không được mô tả ở đây.