Kiểm tra trình duyệt không đầu: Làm thế nào để thực hiện nó bằng Puppeteer và Browserless?

Kiểm tra trình duyệt Headless là gì?

Kiểm tra trình duyệt Headless nói chung đề cập đến một đối tượng hoặc vật thể không có đầu, và trong ngữ cảnh của trình duyệt, nó đề cập đến một mô phỏng trình duyệt không có giao diện người dùng. Tự động hóa trình duyệt Headless sử dụng trình duyệt web để kiểm tra đầu cuối mà không cần tải giao diện người dùng của trình duyệt.

• Chế độ Headless là một tính năng cho phép thực thi một phiên bản đầy đủ của trình duyệt trong khi điều khiển nó theo chương trình.
• Chúng được thực thi thông qua giao diện dòng lệnh hoặc sử dụng giao tiếp mạng. Điều này có nghĩa là nó có thể được sử dụng trên máy chủ mà không có đồ họa hoặc hiển thị, và các thử nghiệm Selenium vẫn sẽ chạy!
• Khi trang web không được hiển thị trên màn hình và các thử nghiệm được thực thi mà không có tương tác giao diện người dùng, tốc độ thực thi sẽ nhanh hơn so với tự động hóa trình duyệt thực.

Chức năng của Puppeteer

Một số tính năng chính của Puppeteer bao gồm:

1. Duyệt Headless: Puppeteer có thể điều khiển phiên bản Headless của Chrome hoặc Chromium, có nghĩa là trình duyệt có thể chạy mà không có giao diện người dùng đồ họa (GUI). Điều này cho phép nó thực hiện các tác vụ nền và tự động hóa hiệu quả.
2. Các tác vụ tự động: Puppeteer cho phép bạn mô phỏng tương tác của người dùng, chẳng hạn như duyệt các trang, nhấp vào nút, điền vào biểu mẫu, v.v. Nó cũng có thể tự động truy cập các trang web và trích xuất dữ liệu, phù hợp cho việc thu thập và phân tích dữ liệu.
3. Thao tác trang: Bạn có thể sửa đổi nội dung trang web bằng cách tiêm mã JavaScript, thay đổi kiểu và thao tác DOM (Mô hình đối tượng tài liệu).
4. Tạo ảnh chụp màn hình và PDF: Puppeteer có thể chụp ảnh màn hình hoặc xuất các trang web sang định dạng PDF. Điều này rất hữu ích để tạo báo cáo và tài liệu trực quan.
5. Giám sát mạng: Puppeteer có thể chặn và sửa đổi các yêu cầu và phản hồi mạng để gỡ lỗi hoặc kiểm tra các kịch bản mạng khác nhau.
6. Phân tích hiệu suất: Nhận các chỉ số hiệu suất như thời gian tải trang và sử dụng tài nguyên để giúp tối ưu hóa hiệu suất trang web.
7. Trích xuất dữ liệu web: Puppeteer thường được sử dụng cho các tác vụ trích xuất dữ liệu web vì nó có thể tương tác với các trang web như người dùng thực, do đó trích xuất dữ liệu từ các trang động và nặng JavaScript.
8. Kiểm tra: Puppeteer thường được sử dụng để tự động hóa kiểm tra đầu cuối của các ứng dụng web. Nó có thể mô phỏng hành vi và tương tác của người dùng để đảm bảo ứng dụng web của bạn chạy như mong đợi.
9. Chế độ Headless và Head: Nó có thể chạy ở chế độ Headless hoặc gỡ lỗi ở chế độ Head, điều này thuận tiện cho việc phát triển và kiểm tra.

Headless có nghĩa là gì trong Puppeteer？

Puppeteer là một thư viện Node.js để điều khiển trình duyệt Chrome hoặc Chromium, chủ yếu cho các tác vụ như kiểm tra tự động, trích xuất dữ liệu web và tạo PDF. "Headless" trong Puppeteer đề cập đến một phiên bản trình duyệt có thể chạy mà không có giao diện người dùng.

Nói cách khác, trình duyệt chạy ở chế độ nền và không hiển thị cửa sổ mà bạn có thể tương tác trực quan. Thay vào đó, nó thực hiện các tác vụ theo chương trình và có thể được điều khiển bởi các kịch bản hoặc mã.

Puppeteer cho phép bạn điều khiển một phiên bản trình duyệt thông thường có giao diện người dùng trực quan và một phiên bản trình duyệt Headless. Chế độ Headless đặc biệt hữu ích cho các tác vụ như trích xuất dữ liệu web, kiểm tra tự động và tạo ảnh chụp màn hình hoặc PDF, vì nó cho phép các tác vụ này được thực hiện hiệu quả mà không cần hiển thị cửa sổ trình duyệt.

Một số lợi ích của việc sử dụng chế độ Headless của Puppeteer:

1. Hiệu suất: Trình duyệt ở chế độ Headless thường chạy nhanh hơn trình duyệt đồ họa vì chúng không phải hiển thị và hiển thị các phần tử trực quan của một trang web.
2. Hiệu quả tài nguyên: Vì không có giao diện người dùng đồ họa nào được hiển thị, trình duyệt Headless chiếm ít bộ nhớ và tài nguyên CPU hơn so với việc chạy một trình duyệt đầy đủ với giao diện người dùng, khiến chúng phù hợp để chạy trên máy chủ hoặc trong môi trường CI/CD.
3. Tác vụ nền: Trình duyệt Headless rất phù hợp cho các tác vụ tự động không yêu cầu tương tác người dùng hoặc phản hồi trực quan, chẳng hạn như trích xuất dữ liệu web và kiểm tra tự động.
4. Hoạt động phía máy chủ: Trình duyệt Headless có thể được sử dụng trong môi trường máy chủ để tự động hóa các tác vụ mà không cần hiển thị vật lý.
5. Tự động hóa: Các kịch bản có thể được viết để mô phỏng các hoạt động trình duyệt của người dùng như nhấp, nhập, ảnh chụp màn hình, v.v. mà không cần can thiệp thủ công.

Trình duyệt Headless đặc biệt mạnh mẽ cho các tác vụ yêu cầu tương tác tự động với các trang web, trích xuất dữ liệu, kiểm tra và các hoạt động khác không yêu cầu hiển thị trực quan.

Bạn có bất kỳ ý tưởng tuyệt vời hay nghi ngờ nào về trích xuất dữ liệu web và Browserless?
Hãy xem những gì các nhà phát triển khác đang chia sẻ trên Discord và Telegram!

Làm cách nào để thực hiện kiểm tra trình duyệt Headless với Puppeteer và Browserless?

Hãy tìm hiểu nó trong nội dung sau!

Chạy kiểm tra Headless trong Puppeteer với Browserless

Khởi tạo môi trường

Trước khi kiểm tra, chúng ta cần có dịch vụ Browserless. Browserless có thể giúp chúng ta giải quyết các tác vụ thu thập dữ liệu web phức tạp và tự động hóa quy mô lớn. Với việc triển khai đám mây của thành tích được quản lý đầy đủ, Browserless có chức năng mạnh mẽ hơn.

Browserless áp dụng chiến lược tập trung vào trình duyệt, cung cấp khả năng triển khai Headless mạnh mẽ và mang lại hiệu suất và độ tin cậy cao hơn. Vui lòng nhấp vào đây để tìm hiểu thêm về cấu hình của dịch vụ Browserless.

• Chúng ta cần lấy API KEY của Nstbrowser trước. Bạn có thể truy cập trang menu Browserless của khách hàng Nstbrowser, hoặc chỉ cần nhấp vào đây để truy cập:

Xác định mục tiêu trường hợp kiểm tra

Sau khi hoàn thành việc khởi tạo môi trường, chúng ta cần xác định thêm mục tiêu kiểm tra của mình.

Chúng ta sẽ chỉ tìm hiểu một ví dụ về cách sử dụng Puppeteer với Browserless mà không có trang web cụ thể nào. Vui lòng chỉ định mẫu cho các trang web và yêu cầu mục tiêu của bạn.

Ở đây, hãy sử dụng Puppeteer để lấy tiêu đề của trang và tạo ảnh chụp màn hình. Sau đó, chúng ta sẽ kết hợp nó với Jest để viết các trường hợp kiểm tra.

Dưới đây là nội dung kiểm tra chính của chúng tôi:

1. Tiêu đề của trang có phải là tiêu đề mục tiêu hay không
2. Ảnh chụp màn hình có chứa phần tử mục tiêu hay không

Khởi tạo dự án

Tiếp theo, vui lòng làm theo các bước dưới đây để cài đặt Puppeteer và chạy kịch bản kiểm tra:

Bước 1: Tạo một thư mục mới trong Vs code

Bước 2: Mở thiết bị đầu cuối Vs code và chạy các lệnh sau để cài đặt các phụ thuộc liên quan

npm init -y
pnpm add jest jest-html-reporter puppeteer-core

Bước 3: Hoàn thành các tệp liên quan

1. Tạo tệp cấu hình jest.config.js để thực hiện cấu hình liên quan:

module.exports = {
  testTimeout: 10000, // 10 giây
  reporters: [
    'default',
    [
      'jest-html-reporter',
      {
        pageTitle: 'Báo cáo kiểm tra',
        outputPath: './test-report.html',
        includeFailureMsg: true,
        includeConsoleLog: true,
      },
    ],
  ],
};

2. Tạo kịch bản kiểm tra __tests__/puppeteer.spec.js

Để khởi chạy trình duyệt, bạn cần truyền cấu hình liên quan (để biết cấu hình đầy đủ, hãy tham khảo LaunchNewBrowser

const puppeteer = require('puppeteer-core');

describe('Kiểm tra Puppeteer đầu tiên của tôi', () => {
  it('nên tải trang và kiểm tra tiêu đề', async () => {
    const browserWSEndpoint = await launchAndConnectToBrowser();
    const browser = await puppeteer.connect({
      browserWSEndpoint: browserWSEndpoint,
      defaultViewport: null,
    });
    const page = await browser.newPage();
    await page.goto('https://example.com');

    const title = await page.title();
    expect(title).toBe('Ví dụ miền');

    await browser.close();
  });

  // chụp ảnh màn hình của trang
  it('nên chụp ảnh màn hình của trang', async () => {
    const browserWSEndpoint = await launchAndConnectToBrowser();
    const browser = await puppeteer.connect({
      browserWSEndpoint: browserWSEndpoint,
      defaultViewport: null,
    });
    const page = await browser.newPage();
    await page.goto('https://example.com');

    await page.screenshot({ path: 'example.png' });

    await browser.close();
  });
});

async function launchAndConnectToBrowser() {
  const token = ''; // mã thông báo api của bạn từ nstbrowser
  const config = {
    proxy:
      '', // bắt buộc; định dạng đầu vào: schema://user:password@host:port ví dụ: http://user:password@localhost:8080
    // platform: 'windows', // hỗ trợ: windows, mac, linux
    // kernel: 'chromium', // chỉ hỗ trợ: chromium
    // kernelMilestone: '128', // hỗ trợ: 128
    // args: {
    //     "--proxy-bypass-list": "detect.nstbrowser.io"
    // }, // đối số trình duyệt
    // fingerprint: {
    //     userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.6613.85 Safari/537.36', // userAgent được hỗ trợ kể từ phiên bản 0.15.0
    // },
  };
  const query = new URLSearchParams({
    token: token, // bắt buộc
    config: JSON.stringify(config),
  });

  const browserWSEndpoint = `ws://less.nstbrowser.io/connect?${query.toString()}`;
  return browserWSEndpoint;
}

Chạy dự án

Bây giờ chúng ta chỉ cần mở bảng điều khiển và chạy lệnh kịch bản sau:

npx jest --detectOpenHandles

Các lệnh ở đây có thể được phân chia thành:

• Sử dụng lệnh npx để thực thi lệnh jest.
• Jest sẽ tìm tệp cấu hình jest.config.js của dự án hiện tại và lấy thông tin cấu hình cơ bản.
• Theo nội dung của tệp cấu hình, tìm tệp kiểm tra phù hợp trong thư mục dự án hiện tại và bắt đầu thực thi.

Đầu ra kết quả

Sau khi thực thi lệnh trên, chúng ta sẽ thấy đầu ra sau. Ở đây, mỗi kết quả quan trọng của quy trình thực thi kiểm tra sẽ được xuất ra và nó cho chúng ta thấy rằng trường hợp kiểm tra của chúng ta đã vượt qua.

Cùng lúc đó, chúng ta có thể mở tệp test-report.html để xem báo cáo cụ thể được tạo:

Cấu trúc tệp của dự án như sau. Chúng ta cũng có thể thấy nội dung tệp ảnh chụp màn hình đầu ra, có nghĩa là trường hợp kiểm tra của chúng ta đã được vượt qua hoàn toàn.

Lợi ích của kiểm tra trình duyệt Headless Puppeteer

1. Kiểm tra trình duyệt Headless nhanh hơn so với trình duyệt thực vì nó tiêu thụ ít tài nguyên hệ thống hơn.
2. Nó cải thiện hiệu suất thực thi kiểm tra vì nó thường thực thi nhanh hơn 2 lần so với kiểm tra trình duyệt thực.
3. Nó hoàn hảo cho việc trích xuất dữ liệu web. Giả sử bạn cần lấy rất nhiều dữ liệu (dữ liệu thể thao, dữ liệu chứng khoán, v.v.) từ một trang web thông qua tự động hóa Puppeteer và lưu trữ nó trong bất kỳ bảng tính Excel hoặc cơ sở dữ liệu nào. Trong trường hợp này, chế độ Headless của Puppeteer là tốt nhất vì không cần phải khởi chạy trình duyệt thực để xác minh giao diện người dùng và trọng tâm chính là lấy dữ liệu.
4. Nó giúp mô phỏng nhiều trình duyệt trên một hệ thống duy nhất mà không có chi phí tài nguyên quá mức.
5. Nó phù hợp cho kiểm tra song song. Trình duyệt dựa trên giao diện người dùng tiêu thụ rất nhiều bộ nhớ và tài nguyên. Vì vậy, trình duyệt Headless của Puppeteer là lựa chọn tốt hơn ở đây.

7 thực tiễn tốt nhất khi sử dụng Headless Puppeteer

1. Quản lý sử dụng tài nguyên: Vì Puppeteer ở chế độ Headless chạy mà không có giao diện đồ họa, nên nó nhanh hơn và sử dụng ít tài nguyên hơn. Tuy nhiên, vẫn cần quản lý bộ nhớ và sử dụng CPU, đặc biệt là khi chạy nhiều phiên bản. Sử dụng các tính năng tích hợp sẵn của Puppeteer như nhóm trang và quản lý tab hiệu quả để giảm tiêu thụ tài nguyên.
2. Xử lý thời gian chờ và thử lại: Trích xuất dữ liệu web hoặc các tác vụ tự động có thể gặp phải sự chậm trễ mạng hoặc thời gian chờ. Thiết lập giá trị thời gian chờ thích hợp và triển khai logic thử lại đảm bảo các kịch bản của bạn có thể xử lý các lỗi ngắt quãng mà không bị sập.
3. Chờ các phần tử một cách khôn ngoan: Luôn chờ các phần tử cần thiết tải xong trước khi thực hiện hành động. Thay vì sử dụng độ trễ tĩnh (ví dụ: page.waitForTimeout), hãy ưu tiên chờ các sự kiện hoặc phần tử cụ thể (page.waitForSelector), điều này làm cho tự động hóa của bạn hiệu quả hơn và phục hồi hơn đối với các thời gian tải khác nhau.
4. Sử dụng ngữ cảnh ẩn danh để cô lập: Để tránh rò rỉ dữ liệu và đảm bảo mỗi thử nghiệm hoặc trích xuất chạy trong một môi trường sạch, hãy sử dụng ngữ cảnh ẩn danh (browser.createIncognitoBrowserContext). Điều này ngăn dữ liệu được lưu trong bộ nhớ cache, cookie hoặc lưu trữ cục bộ ảnh hưởng đến các phiên sau.
5. Tận dụng việc bỏ qua phát hiện Headless: Nhiều trang web phát hiện trình duyệt Headless và có thể chặn hoặc phục vụ nội dung hạn chế cho các yêu cầu này. Sử dụng các kỹ thuật như sửa đổi cờ trình duyệt, ghi đè tác nhân người dùng và giả mạo các tính năng web (ví dụ: loại bỏ navigator.webdriver) có thể giúp bỏ qua phát hiện Headless.
6. Giám sát hiệu suất và nhật ký: Sử dụng các công cụ nhật ký hiệu suất và bảng điều khiển của Puppeteer để gỡ lỗi và tối ưu hóa các kịch bản. Giám sát các số liệu hiệu suất trang và xử lý nhật ký trình duyệt có thể giúp chẩn đoán các điểm nghẽn và các vấn đề khác.
7. Tối ưu hóa cho khả năng mở rộng: Nếu bạn có kế hoạch chạy Puppeteer ở quy mô lớn, hãy xem xét việc đóng gói container với Docker, sử dụng bộ cân bằng tải và chạy nhiều phiên bản trình duyệt song song. Các bước này giúp đảm bảo khả năng mở rộng và giảm thời gian chết trong môi trường sản xuất.

Phần kết luận

Trình duyệt Headless Puppeteer làm cho mọi thứ trở nên dễ dàng. Trong bài đăng này, chúng tôi nhắm đến việc chia sẻ với bạn:

• các chức năng mạnh mẽ
• và các bước hiệu quả để sử dụng chế độ Headless của Puppeteer với Browserless

Browserless của Nstbrowser đơn giản hóa cấu hình và hoạt động của Puppeteer. Cũng giống như trước đây, đã đến lúc tiếp cận: cách Browserless hoạt động với Playwright và Puppeteer!