Thử nghiệm tiện ích của 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 có 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 tra 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ã 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ạ API nhật ký trong api-samples/history/showHistory làm phần mở rộng kiểm thử.

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

Viết mã 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 một tệp package.json với nội dung sau:

pacakge.json:

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

Tương tự như tệp manifest.json của một tiện ích, tất cả dự án Node đều bắt buộc 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ẽ được thêm vào tệp package.json một cách tự động.

Bạn có thể viết các chương trình 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 điểm truy cập

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

index.test.js:

const puppeteer = require('puppeteer');

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

let browser;

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

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

Bước 4: Chạy trình duyệt

Cập nhật beforeEach và afterEach để chạy và đóng trình duyệt. Khi chạy nhiều chương trình 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 làm giảm tính tách biệt giữa các bài kiểm thử và có thể khiến một bài kiểm thử ảnh hưởng đến kết quả của một bài kiểm thử khác.

index.test.js:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    args: [
      `--disable-extensions-except=${EXTENSION_PATH}`,
      `--load-extension=${EXTENSION_PATH}`
    ]
  });
});

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

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

Để chạy các chương trình 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": "^21.3.6"
  },
  "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 6: Mở cửa sổ bật lên

Hãy thêm một kiểm thử cơ bản để mở cửa sổ bật lên trong một trang mới. Chúng ta cần làm việc này vì Puppeteer không hỗ trợ truy cập vào cửa sổ bật lên của tiện ích từ cửa sổ bật lên. Thêm mã sau:

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);
});

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

Hãy xác nhận một điều gì đó để kiểm thử của chúng ta 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 sẽ hiển thị các trang đã truy cập gần đây, vì vậy, hãy kiểm tra để đảm bảo chúng ta thấy một trang như vậy:

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);

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

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

Bước 8: Chạy chương trình 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 dự án đầy đủ trong kho lưu trữ chrome-extensions-samples.

Các bước tiếp theo

Sau khi nắm vững 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 API của Puppeteer chứa thêm thông tin về những gì có thể thực hiện được – có nhiều tính năng không được mô tả ở đây.