Kiểm tra Playwright: Cách chạy trên đám mây bằng Browserless?

Playwright là gì?

Playwright là một thư viện tự động hóa mạnh mẽ và linh hoạt được phát triển bởi Microsoft. Nó cho phép các nhà phát triển và người kiểm tra tự động hóa các ứng dụng web trên nhiều trình duyệt một cách dễ dàng.

Tự động hóa Playwright hỗ trợ Chromium, Firefox và WebKit, cho phép bạn kiểm tra trên các trình duyệt khác nhau. Nó hỗ trợ các ngôn ngữ lập trình như Java, Python, C# và NodeJS. Playwright đi kèm với giấy phép Apache 2.0 và phổ biến nhất trong NodeJS và Javascript/Typescript.

Browserless là gì?

Browserless là một giải pháp trình duyệt dựa trên đám mây được thiết kế cho tự động hóa hiệu quả, thu thập dữ liệu web và kiểm tra. Sử dụng thư viện dấu vân tay của Nstbrowser, Browserless cung cấp chuyển đổi dấu vân tay ngẫu nhiên cho quá trình thu thập và tự động hóa dữ liệu trơn tru.

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

Bạn có bất kỳ ý tưởng tuyệt vời hoặc 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 nên chọn tự động hóa Playwright?

Những lợi thế của tự động hóa Playwright bao gồm:

1. Hỗ trợ đa trình duyệt: Playwright hoạt động với Chromium, Firefox và WebKit, cho phép kiểm tra trên nhiều trình duyệt với một khung duy nhất.

2. Kiểm tra đầu cuối: Nó hỗ trợ kiểm tra toàn bộ ngăn xếp từ tương tác front-end đến API back-end.

3. Chế độ ẩn danh: Playwright có thể chạy kiểm tra ở chế độ ẩn danh để thực thi nhanh hơn và hiệu quả tài nguyên tốt hơn.

4. Điều khiển đa tab và đa trình duyệt: Nó cho phép điều khiển đồng thời nhiều tab và trình duyệt.

5. Chờ đợi tự động: Playwright tự động chờ các phần tử sẵn sàng trước khi tương tác, giảm thiểu các kiểm tra không ổn định.

6. Chặn mạng: Nó có thể chặn các yêu cầu mạng, giúp dễ dàng mô phỏng các điều kiện mạng khác nhau hoặc mô phỏng API.

7. Hỗ trợ đa nền tảng: Playwright hoạt động trên Windows, macOS và Linux, làm cho nó linh hoạt cho các môi trường khác nhau.

8. Hỗ trợ tích hợp CI/CD: Playwright hỗ trợ tích hợp CI/CD. Nó thậm chí còn cung cấp các hình ảnh docker cho một số ràng buộc ngôn ngữ.

9. Hỗ trợ Typescript ngay lập tức: Hỗ trợ ngôn ngữ Typescript không yêu cầu cấu hình nào vì nó có thể hiểu mã Typescript và JavaScript của bạn.

10. Hỗ trợ công cụ gỡ lỗi: Các thử nghiệm Playwright hỗ trợ các tùy chọn gỡ lỗi khác nhau để làm cho nó thân thiện với nhà phát triển. Một số tùy chọn gỡ lỗi bao gồm Playwright Inspector, trình gỡ lỗi VSCode, công cụ dành cho nhà phát triển trình duyệt và nhật ký bảng điều khiển trình xem theo dõi.

Khung kiểm tra tự động Playwright

Kiến trúc Playwright được thiết kế đặc biệt cho tự động hóa trình duyệt, cung cấp một khung mạnh mẽ, linh hoạt và hiệu suất cao. Nó hỗ trợ nhiều công cụ trình duyệt, môi trường trình duyệt độc lập và API mạnh mẽ, và phù hợp cho các tác vụ tự động hóa trình duyệt như thu thập dữ liệu web và kiểm tra tự động. Kiến trúc của nó đảm bảo độ tin cậy, hiệu quả và dễ bảo trì các bài kiểm tra và kịch bản.

Các thành phần và quy trình chính

1. Máy khách (Kịch bản tự động):

Playwright hỗ trợ bản địa JavaScript và TypeScript, và cũng cung cấp ràng buộc cho Java, Python và C#, cho phép người dùng viết kịch bản tự động bằng các ngôn ngữ này.
Người dùng viết kịch bản kiểm tra bằng ngôn ngữ ưa thích của họ, bao gồm các trường hợp thử nghiệm, lệnh tương tác và khẳng định. JSON thường được sử dụng để cấu hình và trao đổi dữ liệu nhằm đảm bảo truyền dữ liệu hiệu quả.

2. Kết nối WebSocket:

• Bắt tay: Khi thực thi kịch bản kiểm tra, máy khách sẽ thiết lập kết nối với máy chủ Playwright (Node.js) và thực hiện bắt tay ban đầu để đảm bảo việc thiết lập giao tiếp.

• Truyền thông song công: Sau khi kết nối được thiết lập, một kênh truyền thông hai chiều sẽ được mở giữa client và server để gửi lệnh đến trình duyệt theo thời gian thực và nhận phản hồi hoặc sự kiện.

• Kết nối mở và liên tục: Kết nối WebSocket sẽ duy trì trạng thái mở và liên tục trong suốt phiên, cho phép script kiểm tra tiếp tục tương tác với trình duyệt.

• Đóng kết nối: Khi kiểm tra hoàn tất, client hoặc server có thể đóng kết nối, đánh dấu kết thúc phiên.

3. Phía server (Node.js):

• Server Node.js: Phía server được quản lý bởi ứng dụng Node.js và điều phối sự tương tác giữa script client và trình duyệt.
• Xử lý lệnh và sự kiện: Server Node.js nhận lệnh từ client, xử lý và chuyển đổi chúng thành hướng dẫn trình duyệt, lắng nghe sự kiện từ trình duyệt và chuyển tiếp chúng đến client.

4. Tự động hóa trình duyệt (CDP và CDP+):

• CDP (Giao thức Chrome DevTools): Playwright sử dụng CDP để tương tác với trình duyệt dựa trên Chromium. CDP quản lý quá trình hiển thị, phiên và mạng của trình duyệt để đảm bảo hiển thị trang mượt mà, quản lý phiên và tương tác mạng.
• CDP+: Đối với trình duyệt như Firefox và WebKit (Safari), Playwright sử dụng một phần mở rộng giao thức tương tự CDP để đảm bảo tính nhất quán của API trên các trình duyệt khác nhau. Mỗi tiến trình trình duyệt (như hiển thị, và mạng) được quản lý chính xác để mô phỏng tương tác thực tế của người dùng.

Cách chạy tự động hóa Playwright trên Cloud sử dụng Browserless?

Cài đặt môi trường

Trước khi bắt đầu, chúng ta cần có dịch vụ Browserless. Sử dụng Browserless có thể giải quyết các nhiệm vụ thu thập dữ liệu web phức tạp và tự động hóa quy mô lớn, và hiện tại nó đã đạt được triển khai cloud được quản lý hoàn toàn.

Browserless sử dụng phương pháp tập trung vào trình duyệt, cung cấp khả năng triển khai headless mạnh mẽ và mang đến hiệu suất cũng như độ tin cậy cao hơn. Để biết thêm thông tin về Browserless, bạn có thể nhấp vào đây để tìm hiểu thêm.

1. Nhận API KEY và truy cập trang menu Browserless của ứng dụng khách Nstbrowser, hoặc bạn có thể nhấp vào đây để truy cập

Xác định mục tiêu kiểm thử

Trước khi bắt đầu, hãy xác định mục tiêu của bài kiểm thử này. Chúng ta sẽ sử dụng Playwright để thực hiện xác thực biểu mẫu và lấy thông tin lỗi do trang web cung cấp. Từ tương tác truy cập trang bình thường, chúng ta sẽ trải nghiệm:

1. Truy cập trang web mục tiêu https://www.airbnb.com/.
2. Nhấp vào "Bảng điều khiển cá nhân" ở góc trên bên phải.
3. Nhấp vào nút "Tiếp tục" trong biểu mẫu để kích hoạt việc gửi biểu mẫu.
4. Xem thông tin phản hồi lỗi.

Khởi tạo dự án

Làm theo các bước dưới đây để cài đặt Playwright và chạy tập lệnh kiểm thử

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

Bước 2: Mở terminal Vs code và chạy lệnh sau

npm init -y
npm install playwright @playwright/test

Bước 3: Tạo các tệp liên quan

1. Tệp playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  //  các tệp kiểm thử cần chạy
  testDir: './tests',

  // thời gian chờ cho mỗi bài kiểm thử
  timeout: 30 * 1000,

  // thời gian chờ cho toàn bộ quá trình chạy kiểm thử
  expect: {
    timeout: 30 * 1000,
  },

  // Trình báo cáo cần sử dụng
  reporter: 'html',

  // Các mẫu glob hoặc biểu thức chính quy để bỏ qua các tệp kiểm thử.
  testIgnore: '*test-assets',
  
  // Các mẫu glob hoặc biểu thức chính quy phù hợp với các tệp kiểm tra.
  testMatch: '*tests/*.spec.ts',
});

2. Kịch bản kiểm tra tests/browserless.spec.ts

• Khởi chạy trình duyệt yêu cầu truyền vào cấu hình liên quan (để biết cấu hình đầy đủ, hãy xem LaunchNewBrowser)
• Tham số proxy là bắt buộc

import { chromium } from 'playwright';
import { test, expect, Page } from '@playwright/test';

let page: Page;

async function createBrowser() {
  const token = 'your api token'; // bắt buộc
  const config = {
    proxy:
      'your 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: '124', // hỗ trợ: 113, 120, 124
    // 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',
    // },
  };
  const query = new URLSearchParams({
    token: token, // bắt buộc
    config: JSON.stringify(config),
  });

  const browserWSEndpoint = `ws://less.nstbrowser.io/connect?${query.toString()}`;
  const browser = await chromium.connectOverCDP(browserWSEndpoint);
  const context = await browser.newContext();
  const page = await context.newPage();

  return page;
}

function logger(text: string) {
  console.log(text);
}

test.beforeEach(async () => {
  if (!page) {
    page = await createBrowser();
  }
  await page.goto('https://www.airbnb.com/');
});

test.describe('Browserless Test', () => {
  test('Xác minh thông báo lỗi đăng nhập trang web Airbnb', async () => {
    try {
      logger(`đi đến trang đích ${await page.url()}`);

      // kiểm tra tiêu đề của trang
      const title = await page.title();
      logger(`tiêu đề trang: ${title}`);

      // chờ chọn nút aria-label="Main navigation menu"
      await page.waitForSelector('[aria-label="Main navigation menu"]');
      // nhấp vào nút aria-label="Main navigation menu"
      await page.click('[aria-label="Main navigation menu"]');

      // chờ văn bản a là Đăng ký
      await page.waitForSelector('a:has-text("Sign up")');
      // nhấp vào văn bản a là Đăng ký
      await page.click('a:has-text("Sign up")');

      await page.click('span:has-text("Continue")');

      // // lấy thông báo lỗi theo id="phone-number-error-phone-login"
      const text = await page.textContent('#phone-number-error-phone-login');
      logger(`thông báo lỗi: ${text}`);
      expect(text).toBe('Phone number is required.');

      await page.close();
      await page.context().close();
    } catch (error) {
      console.error(error);
    }
  });
});

Cấu trúc tệp dự án như sau

Thực thi dự án

Sau khi khởi tạo dự án ở trên, chúng ta có thể bắt đầu chạy dự án của mình! Bây giờ hãy mở terminal Vs code và chạy:

npx playwright test

Các lệnh ở đây chủ yếu có thể được chia thành

• Sử dụng lệnh npx để thực thi lệnh playwright
• Playwright sẽ tìm tệp cấu hình playwright.config.ts của dự án hiện tại và lấy thông tin cấu hình cơ bản
• Dựa trên nội dung của tệp cấu hình, hãy 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

Kết quả đầu ra

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

Chúng ta có thể xem báo cáo kiểm tra bằng cách chạy lệnh sau:

npx playwright show-report

Báo cáo hiển thị chi tiết từng bước của lệnh thực thi, trạng thái thực thi và kết quả đầu ra cuối cùng.

Kết thúc

Playwright cung cấp một khung kiểm tra tự động mạnh mẽ và linh hoạt, biến nó thành một công cụ có giá trị cho các nhà phát triển và kiểm tra. Khả năng xử lý nhiều trình duyệt, hỗ trợ đa nền tảng và cung cấp các API tương tác và xác minh phong phú giúp nó nổi bật trong lĩnh vực kiểm tra tự động.

Thông qua hướng dẫn từng bước toàn diện trong blog này, chúng ta đã học được:

1. Sức mạnh của Browserless
2. Cách dễ dàng thu thập dữ liệu với Browserless
3. Phân tích kết quả có ý nghĩa

Kết hợp với Browserless, người dùng có thể tận dụng sức mạnh của Playwright để tạo các bài kiểm tra tự động đáng tin cậy, hiệu quả và có khả năng mở rộng, đơn giản hóa quy trình kiểm tra, giảm khối lượng công việc thủ công và đảm bảo trải nghiệm người dùng mạnh mẽ và liền mạch hơn.

Bắt đầu trải nghiệm sức mạnh của Browserless ngay bây giờ!