Kiểm thử E2E hỗ trợ AI với Midscene.js và Playwright

Kiểm thử E2E mà không cần viết selector. Trong bài viết này, chúng ta sẽ thử sử dụng Midscene.js để điều khiển UI với các lệnh Ngôn ngữ tự nhiên cùng với Playwright, framework phổ biến cho kiểm thử tự động trình duyệt.

Midscene.js là gì?

Midscene.js là một JavaScript SDK sử dụng các mô hình LLM (như GPT-4o hoặc Qwen) để diễn giải các lệnh của chúng ta, chẳng hạn như:

"Nhập art toy và tìm kiếm" "Trích xuất tất cả tên sản phẩm và giá"

Và chuyển đổi chúng thành các tương tác trình duyệt thực tế mà không cần viết bất kỳ mã DOM/selector nào.

Tích hợp với Playwright

Đối với những người muốn xem cấu hình playwright đầy đủ bao gồm mã e2e, bạn có thể xem Dự án Ví dụ mà midscenejs đã tạo https://github.com/web-infra-dev/midscene-example/blob/main/playwright-demo https://midscenejs.com/integrate-with-playwright.html

Ở đây chúng ta sẽ thử tìm kiếm chaka trên popmart

./e2e/popmart-search.ts

import { expect } from "@playwright/test";
import { test } from "./fixture";

test.beforeEach(async ({ page, aiTap }) => {
  page.setViewportSize({ width: 1280, height: 768 });
  await page.goto("https://www.popmart.com/th");
  await page.waitForLoadState("load");
  await aiTap('click the "ยอมรับ" (accept) button for privacy policy at the bottom of the page');
});

test("search chaka on popmart", async ({
  ai,
  aiQuery,
  aiAssert,
  aiWaitFor,
  aiNumber,
  aiBoolean,
  aiString,
  aiLocate,
}) => {
  // 👀 type keywords, perform a search
  await ai('type "chaka" in search box located in the top appbar, hit Enter');

  // 👀 wait for the loading
  await aiWaitFor("there is at least one item item on page");

  // 👀 find the items
  const items = await aiQuery(
    "{itemTitle: string, price: Number}[], find item in list and price"
  );
  console.log("items", items);
  expect(items?.length).toBeGreaterThan(0);

});

Từng bước

1. Đi đến https://www.popmart.com/th và đợi cho đến khi hoàn thành
2. Chúng ta sẽ sử dụng aiTap để nhấp vào nút chấp nhận trong phần cookie

Một ưu điểm khác của việc sử dụng midscene là nó báo cáo mỗi hành động một cách trực quan

3. ai('type "chaka" in search box located in the top appbar, hit Enter') Yêu cầu AI tìm hộp tìm kiếm ở thanh ứng dụng trên cùng, nhập chaka và nhấn enter

Nếu bạn thử nhấp vào trang web thực tế, bạn sẽ thấy nó không chỉ nhấp và nhập vào hộp đó mà UI hiển thị một phần tử giống như drawer, và nó cũng có thể xử lý điều này

4.await aiWaitFor("there is at least one item item on page") Đợi cho đến khi các mục xuất hiện

5. aiQuery chúng ta yêu cầu nó giúp truy vấn các mục và giá {itemTitle: string, price: Number}[], find item in list and price

Mong đợi các mục tồn tại. Trên thực tế, chúng ta cũng có thể thêm điều kiện rằng các mục phải liên quan đến từ khóa chúng ta đang tìm kiếm (trong trường hợp này là Chaka)

Nhưng chúng ta nên lưu ý rằng nó là từ góc độ hình ảnh hóa dưới dạng hình ảnh, nghĩa là nó chỉ nhìn thấy những gì được hiển thị trên màn hình.

items [
  { itemTitle: 'CHAKA Candle Whisper Series Figures', price: 380 },
  { itemTitle: 'CHAKA Candle Whisper Series Figures', price: 380 },
  {
    itemTitle: 'MEGA SPACE MOLLY 400% Sanrio Characters Series',
    price: 6290
  }
]

Báo cáo

Sau khi chạy, chúng ta có thể xem báo cáo cho từng hành động, cho biết liệu đó có phải là hành động AI không, đã sử dụng bao nhiêu token và mất bao lâu.

Caching

Tôi tin rằng nhiều người sẽ hỏi "Điều này sẽ không tốn kém và chậm nếu chúng ta phải gọi AI mỗi lần sao?"

Midscene hỗ trợ lưu cache các bước lập kế hoạch và DOM XPath để giảm các cuộc gọi đến mô hình AI. Sau lần chạy kiểm thử đầu tiên, nó sẽ tạo caching dưới dạng .yaml

midscene_run/cache/popmart.spec.ts(search-chaka-on-popmart).cache

midsceneVersion: 0.17.0
cacheId: popmart.spec.ts(search-chaka-on-popmart)
caches:
  - type: locate
    prompt: >-
      click the "ยอมรับ" (accept) button for privacy policy at the bottom of the
      page
    xpaths:
      - //*[@id="__next"]/div[1]/div[1]/div[4]/div[1]/div[2]/text()
  - type: locate
    prompt: The search box in the top appbar
    xpaths:
      - >-
        //*[@id="__next"]/div[1]/div[1]/div[1]/div[1]/div[2]/div[2]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/img[1]
  - type: plan
    prompt: type "chaka" in search box located in the top appbar, hit Enter
    yamlWorkflow: |
      tasks:
        - name: type "chaka" in search box located in the top appbar, hit Enter
          flow:
            - aiInput: chaka
              locate: The search box located in the top appbar
            - aiKeyboardPress: Enter
  - type: locate
    prompt: The search box located in the top appbar
    xpaths:
      - >-
        //*[@id="__next"]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/div[1]/text()

Đây là một ví dụ sau khi chạy kiểm thử tìm kiếm popmart. Bạn sẽ thấy nó đã tạo planning và xpaths.

Vì vậy, lần sau nếu chúng ta chạy với cache, nó sẽ chạy với các lệnh này thay vì gọi AI.

Ngoại trừ aiBoolean, aiQuery, aiAssert sẽ không được cache vì chúng là truy vấn, không phải hành động.

Mô hình AI

Vì midscenejs là một dự án mã nguồn mở tách biệt với bất kỳ nhà cung cấp đám mây hoặc mô hình nào, chúng ta có thể chọn triển khai công khai hoặc riêng tư.

Ưu điểm của việc Sử dụng AI cho Kiểm thử E2E So với Kiểm thử Truyền thống

1. Hiểu UI mà không gắn liền với DOM selector

• Nếu UI thay đổi loại phần tử (ví dụ: <button> → <a>), script kiểm thử truyền thống sẽ bị hỏng
• Nhưng AI nhìn vào ngữ cảnh UI như văn bản, màu sắc, vị trí thay thế Hoặc đôi khi mong đợi nó có phải là hình tròn không? nó có màu đỏ không?

2. Giao tiếp dễ dàng với các thành viên trong nhóm không phải dev

• PM, Designer có thể đọc các kiểm thử
• Hoặc tự viết prompt cơ bản mà không cần biết JavaScript
• Ví dụ "mở trang cài đặt và kiểm tra xem có toggle cho chế độ tối không"

3. Phù hợp để kiểm thử logic nghiệp vụ / các tình huống cấp cao

4. Dễ dàng hơn để viết kiểm thử cho UI động

• Ví dụ "nhấp xác nhận và sẽ có hộp thoại thành công ở góc trên bên phải"
• Kiểm thử truyền thống có thể cần nhiều nhánh, nhưng AI hiểu ngữ cảnh tốt hơn

Tuy nhiên, chúng ta vẫn không nên kết hợp tất cả các hành động AI thành một lệnh. Chúng ta vẫn nên tách các hành động một cách rõ ràng vì đây là Kiểm thử và chúng ta không muốn hành vi không xác định mỗi lần khi chạy trong hệ thống kiểm thử https://midscenejs.com/blog-programming-practice-using-structured-api.html

Kết luận

Theo quan điểm của tôi, việc sử dụng kiểm thử dựa trên AI giống như có một "trợ lý hiểu UI" để giúp viết kiểm thử — nó không thay thế mọi thứ và chúng ta cần hiểu khía cạnh này. Nhưng nó giúp giải quyết các vấn đề trong luồng tương tác người dùng thực tế. Chúng ta có thể nghĩ về nó từ góc độ hình ảnh hóa, giống như khi người dùng làm điều này, điều này sẽ xảy ra trên màn hình. Đôi khi việc bắt các phần tử có thể rất khó khăn, nhưng từ góc độ người dùng thực tế, nó có thể thực sự rất đơn giản.