Cách chạy thử nghiệm tự động với Puppeteer và Browserless?

Puppeteer: Nó là gì & Các tính năng

Puppeteer là một thư viện Node.js. Với Puppeteer, bạn có thể kiểm tra trang web của mình trên tất cả các trình duyệt dựa trên Chromium, bao gồm Chrome, Microsoft Edge Chrome và Chromium. Ngoài ra, Puppeteer có thể được sử dụng cho mục đích thu thập dữ liệu web, tự động hóa và kiểm tra.

Vì Puppeteer chỉ giao tiếp qua giao thức DevTools, nên chỉ các trình duyệt thực hiện giao thức này được hỗ trợ. Do đó, Safari (WebKit), Firefox và IE hiện chưa được hỗ trợ.

Kiểm tra trình duyệt không có giao diện đồ họa là gì?

Kiểm tra trình duyệt không có giao diện đồ họa cho phép kiểm soát tự động các trang web mà không cần sử dụng giao diện người dùng đồ họa (GUI).

Điều này cho phép các nhà kiểm tra, người dùng, nhóm QA hoặc nhà phát triển thực hiện kiểm tra tự động trên các ứng dụng web mà không cần tương tác thủ công với trình duyệt được hiển thị trên màn hình.

Về cơ bản, kiểm tra trình duyệt không có giao diện đồ họa hoạt động như vậy, mặc dù nó thường được thực hiện thông qua một kịch bản đơn giản. Nó giúp tăng tốc quá trình kiểm tra và cung cấp phản hồi nhanh chóng trong quá trình phát triển.

Browserless là gì?

Browserless là một giải pháp dựa trên đám mây mạnh mẽ cho việc tự động hóa trình duyệt, thu thập dữ liệu web và kiểm tra liền mạch. Nó tận dụng thư viện dấu vân tay nâng cao của Nstbrowser để chuyển đổi dấu vân tay ngẫu nhiên, đảm bảo thu thập dữ liệu và tự động hóa không bị gián đoạn.

Với cơ sở hạ tầng đám mây mạnh mẽ, Browserless cho phép truy cập dễ dàng vào nhiều phiên bản trình duyệt, đơn giản hóa việc quản lý các tác vụ tự động hóa.

Bạn có bất kỳ ý tưởng tuyệt vời và nghi ngờ nào về thu thập 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!

Tại sao Puppeteer tốt hơn các nền tảng kiểm tra tương tự?

• Bộ tính năng mạnh mẽ: Puppeteer cung cấp quyền kiểm soát đầy đủ đối với trình duyệt Chrome và Chromium, hỗ trợ các tác vụ tự động như điều hướng trang, điền biểu mẫu, chụp ảnh màn hình, tạo PDF, v.v. Nó có thể mô phỏng các hoạt động của người dùng trong trình duyệt để kiểm tra phức tạp.
• Chế độ không có giao diện đồ họa: Puppeteer hỗ trợ chế độ trình duyệt không có giao diện đồ họa, điều này giúp nó hiệu quả hơn và nhẹ hơn khi thực hiện các tác vụ tự động ở chế độ nền, mà không cần tải giao diện đồ họa, cải thiện tốc độ và sử dụng tài nguyên.
• Hỗ trợ đa trình duyệt: Ngoài Chromium, Puppeteer cũng hỗ trợ kiểm tra đa trình duyệt thông qua giao thức WebDriver, với khả năng tương thích và khả năng thích nghi mạnh mẽ với nhiều môi trường trình duyệt.
• Hỗ trợ cộng đồng và tài liệu đầy đủ: Puppeteer có một cộng đồng nhà phát triển năng động và tài liệu chi tiết, cho phép các nhà phát triển bắt đầu nhanh chóng và nhận được hỗ trợ từ cộng đồng.
• Tích hợp chặt chẽ với Chrome: Tích hợp sâu của Puppeteer với Chrome/Chromium giúp nó vượt trội trong các tác vụ tự động hóa trình duyệt, đặc biệt là trong việc giám sát hiệu suất trang và độ chính xác thu thập dữ liệu.

Kiểm tra tự động Puppeteer với Browserless

Hãy kiểm tra chức năng đăng nhập của bảng điều khiển của Nstbrowser. Chúng ta cần

• truy cập Nstbrowser Client
• sau đó điền tài khoản và mật khẩu thông qua chương trình tự động hóa của puppeteer
• và cuối cùng, nhấp vào nút đăng nhập để đăng nhập

Bước 1: Cài đặt Puppeteer.

Ở đây chúng ta chọn puppeteer-core nhẹ hơn:

pnpm install puppeteer-core

Bước 2: Nhận API Key của bạn.

Chúng ta có thể tìm thấy API Key của bạn trong bảng điều khiển Browserless:

Bước 3: Kết nối với Browserless

import puppeteer from "puppeteer-core";

const token = "your api key";

const config = {
    proxy: 'your proxy', // required; input format: schema://user:password@host:port eg: http://user:password@localhost:8080
    // platform: 'windows', // support: windows, mac, linux
    // kernel: 'chromium', // only support: chromium
    // kernelMilestone: '128', // support: 128
    // args: {
    //     "--proxy-bypass-list": "detect.nstbrowser.io"
    // }, // browser args
    // 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 supportted since v0.15.0
    // },
};

const query = new URLSearchParams({
  token: token, // required
  config: JSON.stringify(config),
});

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

const getBrowser = async () =>
  puppeteer.connect({
    browserWSEndpoint,
    defaultViewport: null,
  });

const main = async (req, res) => {
  try {
    const browser = await getBrowser();
    const page = await browser.newPage();
    await page.goto("https://app.nstbrowser.io/login");
  } catch (error) {
    console.error(error);
  }
};

main();

Bây giờ, chúng ta đã kết nối thành công Browserless và truy cập trang web mục tiêu của mình, hãy hoàn thành luồng kiểm tra và xác minh kết quả bằng cách chụp ảnh màn hình.

await page.waitForSelector('input');

const inputs = await page.$$('input');

await inputs[0].type('*****', { delay: 100 }); // your email 
await inputs[1].type('*****', { delay: 100 }); // your password

const buttons = await page.$$('button');
await buttons[1].click();

await page.waitForResponse((req) => {
  const url = "https://api.nstbrowser.io/api/v1/passport/login";
  if (req.url() === url) {
    return true;
  }
});

await page.screenshot({ fullPage: true, path: "./nstbrowser.png" });

Chúng ta có thể thấy rằng chúng ta đã đăng nhập thành công vào Nstbrowser và được chuyển hướng đến bảng điều khiển, cho thấy kiểm tra của chúng ta đã thành công.

Sự khác biệt giữa Puppeteer và các nền tảng khác

Đây là một so sánh chi tiết giữa Puppeteer và các nền tảng kiểm tra khác:

1. Puppeteer so với WebKit/Blink:

• Puppeteer là một thư viện Node.js cung cấp API cấp cao để kiểm soát trình duyệt Chrome hoặc Chromium không có giao diện đồ họa.

• WebKit và Blink là các công cụ bố cục được sử dụng bởi trình duyệt Safari và Chromium. Chúng chịu trách nhiệm hiển thị các trang web, trong khi Puppeteer kiểm soát trình duyệt cho các tác vụ tự động hóa.

2. Puppeteer so với Selenium:

• Puppeteer giao tiếp trực tiếp với Chrome/Chromium thông qua giao thức gỡ lỗi, giúp nó tích hợp chặt chẽ với các trình duyệt này.

• Selenium sử dụng Chromedriver để quản lý và kiểm soát các trình duyệt, cho phép nó hỗ trợ nhiều trình duyệt (ví dụ: Firefox, Safari, Edge). Puppeteer, mặt khác, tập trung vào Chrome/Chromium.

3. Puppeteer so với PhantomJS:

• Puppeteer là một thư viện dựa trên Node.js hiện đại điều khiển Chrome/Chromium không có giao diện đồ họa.

• PhantomJS là một trình duyệt không có giao diện đồ họa dựa trên WebKit/Blink. Tuy nhiên, PhantomJS đã lỗi thời và không còn được duy trì tích cực, điều này khiến Puppeteer trở thành lựa chọn đáng tin cậy và hiệu quả hơn cho hầu hết các tác vụ tự động hóa.

4. Puppeteer so với Nightmare.js:

• Puppeteer sử dụng Giao thức DevTools của Chrome để kiểm soát Chrome/Chromium, cung cấp cho nó quyền truy cập sâu vào chức năng của trình duyệt.

• Nightmare.js là một thư viện JavaScript sử dụng Electron để hiển thị các trang web. Nó được xây dựng để dễ sử dụng nhưng thiếu hiệu suất và hỗ trợ trình duyệt hiện đại mà Puppeteer cung cấp.

5. Puppeteer so với Cypress:

• Puppeteer là một thư viện Node.js tự động hóa các tác vụ trình duyệt như thu thập dữ liệu web, tạo PDF và chụp ảnh màn hình.

• Cypress là một khung kiểm tra đầu cuối đến đầu cuối dựa trên JavaScript được thiết kế để kiểm tra các ứng dụng web. Nó cung cấp một giao diện thân thiện với người dùng để viết các bài kiểm tra và xử lý các hoạt động bất đồng bộ tự động, giúp nó lý tưởng cho việc kiểm tra đầu cuối.

Kết thúc

Puppeteer là một công cụ mạnh mẽ và tuyệt vời để hoàn thành kiểm tra web. Với Browserless, bạn có thể sử dụng Puppeteer để thực hiện mọi tác vụ tự động hóa.

Tôi hy vọng bài viết này mở ra một thế giới mới về tự động hóa kiểm tra trang web cho bạn. Như thường lệ, hãy chắc chắn kiểm tra blog của Nstbrowser và hướng dẫn tài liệu để có thêm nội dung tự động hóa trình duyệt web thú vị! Chúc bạn mã hóa vui vẻ!