Puppeteer cung cấp một khung để xây dựng quy trình kiểm thử tự động cho các trang web, cũng bao gồm khả năng kiểm thử Tiện ích của Chrome. Đây là các chương trình 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 trang web hoặc tiện ích đó được tích hợp vào sản phẩm hoàn thiện. Trong hướng dẫn này, chúng tôi minh hoạ cách viết kiểm thử cơ bản cho một tiện ích mở rộng trong kho lưu trữ mẫu.
Trước khi bắt đầu
Sao chép hoặc tải kho lưu trữ chrome-extensions-samples xuống. Chúng tôi sẽ sử dụng bản minh hoạ API lịch sử trong api-samples/history/showHistory làm tiện ích kiểm thử.
Bạn cũng sẽ cần cài đặt Node.JS, đây là Puppeteer thời gian chạy được tạo 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 thư mục mới, hãy tạo tệp package.json có 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 Nút đề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 mô-đun này sẽ tự động được thêm vào tệp package.json.
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ã.
Bước 3: Tạo điểm truy cập
Tạo 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';
const EXTENSION_ID = 'jkomgjfbbjocikdmilgaehbfpllalmia';
let browser;
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 để chạy và đóng trình duyệt. Khi chạy nhiều thử nghiệm, bạn
nên xem xét việc sử dụng cùng một trình duyệt. Tuy nhiên, thường thì bạn không nên làm như vậy vì nó giúp giảm bớt sự tách biệt giữa các kiểm thử và có thể khiến một lượt kiểm thử ảnh hưởng đến kết quả của một lượt 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 bí danh
Để chạy các bài kiểm thử dễ dàng hơn, hãy thêm một biệt hiệu 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 kết thúc bằng .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 quy trình kiểm thử cơ bản giúp 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. 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 đ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 xem chúng ta có thấy một trang:
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 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 đoạn mã đã vượt qua bài kiểm thử.
Bạn có thể xem toàn bộ dự án trong kho lưu trữ chrome-extensions-samples.
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ử xây dựng một bộ thử nghiệm cho tiện ích của riêng bạn. Tài liệu tham khảo API của Puppeteer cung cấp thêm thông tin về những khả năng có thể thực hiện – có nhiều tính năng không được mô tả ở đây.