Nhà viết kịch-MCP Deep Dive: Sự kết hợp hoàn hảo giữa mô hình ngôn ngữ lớn và tự động hóa trình duyệt

Khi xây dựng một thành phần và cần kiểm tra chức năng của nó, bạn thường viết một số lượng lớn tập lệnh tự động hóa để mô phỏng hành vi của người dùng và đảm bảo nó hoạt động như mong đợi. Tuy nhiên, khi dự án ngày càng phức tạp hơn, các tập lệnh thử nghiệm này cũng trở nên lớn hơn và khó bảo trì hơn.

Lúc này, bạn có thể thắc mắc:

“Tôi có thể nói với công cụ này bằng ngôn ngữ tự nhiên không - 'vui lòng kiểm tra hiệu ứng nhấp chuột của nút này giúp tôi'?"

Trong quá khứ, ý tưởng này có thể có vẻ xa vời. Nhưng ngày nay, với sự gia tăng của các mô hình ngôn ngữ lớn (LLM) và sự đổi mới liên tục của hệ sinh thái Nhà viết kịch, điều tưởng tượng này đang trở thành hiện thực.
Công cụ hỗ trợ chính là những gì chúng ta sẽ khám phá hôm nay - nhà viết kịch-mcp.

Phần 1: Hướng dẫn đăng ký

Vị trí cốt lõi của nhà viết kịch-mcp (Giao thức bối cảnh mô hình) là hành động như một cầu.
Nó chạy như một dịch vụ cục bộ, cho phép trợ lý AI của bạn kết nối và giành quyền kiểm soát trình duyệt.

Bước 1: Cài đặt và cấu hình

Bạn không cần cài đặt toàn cầu phức tạp.

Triết lý thiết kế của nhà viết kịch-mcp là khởi động theo yêu cầu - cách đơn giản nhất là sử dụng npx.

• Phương pháp cấu hình chung:

Hầu hết các công cụ AI hỗ trợ MCP (chẳng hạn như Con trỏ) đều cho phép bạn thêm trường mcpServers vào cấu hình JSON của chúng. Ví dụ:

{
  “Máy chủ mcp”: {
    “nhà viết kịch”: {
      “lệnh”: “npx”,
      “args”: [
        “@playwright/mcp@latest”
      ]
    }
  }
}

• Cấu hình một cú nhấp chuột của VS Code:

Nếu bạn là người dùng Mã VS hoặc Con trỏ, chỉ cần chạy lệnh sau trong thiết bị đầu cuối của bạn:

code –add-mcp ‘{“name”:”playwright”,”command”:”npx”,”args”:[“@playwright/mcp@latest”]}’

Sau khi thực thi, VS Code sẽ tự động thêm thông tin dịch vụ này vào cấu hình.

Sau khi hoàn tất, bạn sẽ thấy mục cấu hình MCP này trong Công cụ MCP con trỏ.

Công cụ MCP

Bước 2: Tùy chỉnh môi trường tự động hóa của bạn

nhà viết kịch-mcp cung cấp các tham số dòng lệnh phong phú, cho phép bạn tinh chỉnh quyền kiểm soát môi trường tự động hóa thông qua mảng args.

• –nguồn gốc được phép <nguồn gốc>
  Nguồn gốc yêu cầu được phép, phân tách bằng dấu chấm phẩy. Theo mặc định, tất cả nguồn gốc đều được cho phép.
• –blocked-origins <nguồn gốc>
  Nguồn gốc yêu cầu bị chặn, được phân tách bằng dấu chấm phẩy. Danh sách chặn được ưu tiên hơn danh sách cho phép.
  Nếu không có danh sách cho phép nào được chỉ định thì mọi yêu cầu không có trong danh sách chặn vẫn được cho phép.
• –block-service-workers
  Khối nhân viên dịch vụ.
• –trình duyệt <trình duyệt>
  Chỉ định trình duyệt hoặc kênh Chrome sẽ sử dụng. Các giá trị có thể có: chrome, firefox, webkit, msedge.
• –mũ <mũ>
  Cho phép các khả năng bổ sung, được cung cấp dưới dạng danh sách được phân tách bằng dấu phẩy. Các giá trị có thể có: tầm nhìn, pdf.
• –cdp-điểm cuối <điểm cuối>
  Chỉ định điểm cuối CDP (Giao thức DevTools của Chrome) để kết nối.
• –cdp-tiêu đề <tiêu đề…>
  Chỉ định các tiêu đề tùy chỉnh cần đưa vào khi kết nối với điểm cuối CDP. Nhiều tiêu đề có thể được xác định.
• –config <đường dẫn>
  Chỉ định đường dẫn đến tệp cấu hình.
• –thiết bị <thiết bị>
  Mô phỏng một thiết bị, ví dụ: “iPhone 15”.
• –đường dẫn thực thi <path>
  Chỉ định đường dẫn đến tệp thực thi của trình duyệt.
• –phần mở rộng
  Kết nối với một phiên bản trình duyệt đang chạy (chỉ Edge/Chrome).
  Yêu cầu cài đặt các Nhà soạn kịch MCP Bridge phần mở rộng trình duyệt.
• –không đầu
  Chạy trình duyệt ở chế độ không đầu (mặc định là với GUI).
• –máy chủ <máy chủ>
  Chỉ định tên máy chủ của máy chủ để liên kết. Mặc định là localhost.
  Sử dụng 0.0.0.0 để liên kết với tất cả các giao diện mạng có sẵn.
• –bỏ qua-https-lỗi
  Bỏ qua các lỗi HTTPS.
• –bị cô lập
  Chỉ lưu trữ dữ liệu hồ sơ trình duyệt trong bộ nhớ mà không ghi nó vào đĩa.
• –phản hồi hình ảnh <mode>
  Chỉ định có gửi phản hồi hình ảnh cho khách hàng hay không.
  Các giá trị có thể: cho phép hoặc bỏ qua. Mặc định là cho phép.
• –không có hộp cát
  Vô hiệu hóa hộp cát cho tất cả các quy trình thường bị cô lập bởi hộp cát.
• –output-dir <đường dẫn>
  Chỉ định đường dẫn thư mục nơi các tập tin đầu ra sẽ được lưu trữ.
• –cảng <cảng>
  Chỉ định cổng cho SSE (Sự kiện do máy chủ gửi) vận chuyển lắng nghe.
• –bỏ qua proxy <bỏ qua>
  Danh sách các tên miền được phân tách bằng dấu phẩy sẽ bỏ qua proxy.
  Ví dụ: .com,chromium.org,.domain.com.
• –máy chủ proxy <proxy>
  Chỉ định máy chủ proxy để sử dụng.
  Ví dụ:
  http://myproxy:3128 or socks5://myproxy:8080.
• – phiên lưu
  Xác định xem có lưu dữ liệu hay không Phiên MCP của nhà viết kịch vào thư mục đầu ra.
• –lưu-dấu vết
  Xác định xem có lưu dữ liệu hay không Nhà viết kịch Trace (dấu vết gỡ lỗi) vào thư mục đầu ra.
• –bí mật <đường dẫn>
  Chỉ định đường dẫn đến tệp dotenv chứa khóa bí mật.
• –trạng thái lưu trữ <đường dẫn>
  Chỉ định đường dẫn đến tệp trạng thái lưu trữ, được sử dụng để cách ly phiên.
• –timeout-hành động <hết thời gian>
  Chỉ định thời gian chờ hành động tính bằng mili giây. Mặc định: 5000 mili giây.
• –timeout-navigation <thời gian chờ>
  Chỉ định thời gian chờ điều hướng trang tính bằng mili giây. Mặc định: 60000 mili giây.
• –tác nhân người dùng <ua string>
  Chỉ định một tùy chỉnh Tác nhân người dùng chuỗi.
• –user-data-dir <đường dẫn>
  Chỉ định đường dẫn cho thư mục dữ liệu người dùng.
  Nếu không được chỉ định, một thư mục tạm thời sẽ được tạo tự động.
• –kích thước khung nhìn <size>
  Chỉ định kích thước khung nhìn của trình duyệt bằng pixel, ví dụ: “1280.720”.

Bước 3: Bắt đầu nói chuyện với AI

Sau khi định cấu hình, bạn có thể bắt đầu tương tác!
Trong cửa sổ trò chuyện với trợ lý AI của bạn, chỉ cần sử dụng ngôn ngữ tự nhiên để ra lệnh.

Ví dụ:

➡ Bạn:

Sử dụng playwright để mở github.com, nhập microsoft/playwright-mcp vào thanh tìm kiếm và tìm kiếm, sau đó nhấp vào kết quả đầu tiên.”

➡ Trợ lý AI (ở chế độ nền):

• Runs npx @playwright/mcp@latest to start service and browser.
• Gọi browser_navigate để mở https://github.com.
• Sử dụng browser_snapshot để “xem” trang và tìm hộp tìm kiếm.
• Sử dụng browser_type để nhập văn bản.
• Sử dụng browser_snapshot khác để phát hiện kết quả.
• Gọi browser_click để nhấp vào kết quả phù hợp đầu tiên.
• Trả lời: “Hoạt động đã hoàn tất. Đã điều hướng đến trang kho lưu trữ microsoft/playwright-mcp.”

Lúc này, Cursor đã mở trình duyệt thành công và điều hướng đến đó.

microsoft/nhà viết kịch-mcp

Đồng thời, chúng ta có thể thấy đầu ra từ Cursor và toàn bộ lệnh gọi MCP.

Đầu ra con trỏ

Bây giờ, bạn đã nắm vững quy trình cộng tác cơ bản với AI. Tiếp theo, hãy cùng lặn xuống bên dưới bề mặt và xem tất cả những thứ này thực sự hoạt động như thế nào.

Phần 2: Nguyên tắc lặn

Sự thành công của nhà viết kịch-mcp nằm ở việc từ bỏ khả năng phân tích trực quan dựa trên ảnh chụp màn hình dễ vỡ và thay vào đó áp dụng một sự hiểu biết có cấu trúc cách tiếp cận - ổn định và hiệu quả hơn.

Công nghệ cốt lõi 1: AOM là “Nguyên liệu thô”

Đây là nhà viết kịch-mcpvũ khí bí mật của - phần mang tính cách mạng nhất.
Khi AI cần “xem” một trang, nó không sử dụng ảnh chụp màn hình mà gọi Nhà viết kịch
trang.accessibility.snapshot().

Mã ví dụ trong
nhà viết kịch/gói/playwright-core/src/server/dispatchers/pageDispatcher.ts:

async accessibilitySnapshot(params:channels.PageAccessibilitySnapshotParams, progress: Progress): Promise<channels.PageAccessibilitySnapshotResult> {
    const rootAXNode = đang chờ progress.race(this._page.accessibility.snapshot({
    thú vịChỉ: params.interestingOnly,
    gốc: params.root ? (params.root dưới dạng ElementHandleDispatcher)._elementHandle : không xác định
  }));
  trả về { rootAXNode: rootAXNode || không xác định };
}

Cây AOM là gì?

Đó là cây ngữ nghĩa mà trình duyệt tạo ra cho các công nghệ hỗ trợ (như trình đọc màn hình).
Nó chỉ bao gồm các yếu tố có ý nghĩa - vai trò (ví dụ: nút, liên kết, tiêu đề), tên (văn bản nút) và tiểu bang (đã chọn, bị vô hiệu hóa), v.v.

Dữ liệu có cấu trúc so với dữ liệu pixel

Hãy tưởng tượng đưa cho AI một ảnh chụp màn hình của trang đăng nhập - những gì nó nhìn thấy chỉ là một cụm pixel, yêu cầu nhận dạng hình ảnh phức tạp để đoán hộp nhập liệu ở đâu.

Ngược lại, page.accessibility.snapshot() cung cấp cho AI một đoạn JSON như thế này:

{
  “vai trò”: “hộp văn bản”,
  “tên”: “Tên người dùng hoặc địa chỉ email”
},
{
  “vai trò”: “nút”,
  “tên”: “Đăng nhập”
}

Công nghệ cốt lõi 2: Công cụ tuần tự hóa tùy chỉnh – snapshotter.ts

Tuy nhiên, nếu dữ liệu AOM được chuyển trực tiếp đến LLM thì bối cảnh sẽ rất lớn.

Do đó, playwright-mcp không trực tiếp cung cấp đối tượng JSON thô, khổng lồ được API này trả về cho LLM.

Thay vào đó, trước tiên nó thực hiện tuần tự hóa - đây chính xác là bước khéo léo nhất trong thiết kế của nhà viết kịch-mcp.

Sau khi có được cây khả năng truy cập thô, nó chạy một trình tuần tự hóa tùy chỉnh (Serializer) để chuyển đổi dữ liệu thành định dạng văn bản kiểu YAML, được thiết kế riêng và được tối ưu hóa cao cho LLM.

Ví dụ: trong thao tác chúng ta vừa thực hiện, khi Cursor cố gắng gọi công cụ browser_snapshot, Playwright đã trả về nội dung sau cho Cursor:

### Trạng thái trang
– URL trang: https://github.com/search?q=microsoft%2Fplaywright-mcp&type=repositories
– Tiêu đề trang: Kho lưu trữ kết quả tìm kiếm · GitHub
– Ảnh chụp nhanh trang:
“`yaml
– chung [ref=e1]:
  – chung [ref=e2]:
    – chung [ref=e3]:
      – liên kết “Chuyển đến nội dung” [ref=e4] [cursor=pointer]:
        – /url: “#bắt đầu nội dung”
      – biểu ngữ [ref=e6]:
        – tiêu đề “Menu điều hướng” [level=2] [ref=e7]
        – chung [ref=e8]:
          – liên kết “Trang chủ” [ref=e10] [cursor=pointer]:
            – /url: /
            – img [ref=e11]
          – chung [ref=e13]:
            – điều hướng “Toàn cầu” [ref=e14]:
              – danh sách [ref=e15]:
                – danh sách [ref=e16]:
                  – nút “Nền tảng” [ref=e17] [con trỏ=con trỏ]:
                    – văn bản: Nền tảng
                    – img [ref=e18]
                – danh sách [ref=e20]:
                  – nút “Giải pháp” [ref=e21] [cursor=pointer]:
                    – văn bản: Giải pháp
                    – img [ref=e22]
                – danh sách [ref=e24]:
                  – nút “Tài nguyên” [ref=e25] [cursor=pointer]:
                    – văn bản: Tài nguyên
                    – img [ref=e26]
                – danh sách [ref=e28]:
                  – nút “Mã nguồn mở” [ref=e29] [cursor=pointer]:
                    – văn bản: Nguồn mở
                    – img [ref=e30]
                – danh sách [ref=e32]:
                  – nút “Doanh nghiệp” [ref=e33] [cursor=pointer]:
                    – văn bản: Doanh nghiệp
                    – img [ref=e34]
                – danh sách [ref=e36]:
                  – liên kết “Định giá” [ref=e37] [cursor=pointer]:
                    – /url: https://github.com/pricing
                    …

Hãy phân tích một số tính năng chính của định dạng này và hiểu lý do tại sao nó lại hiệu quả đối với LLM:

1. Thứ bậc và cấu trúc:Thông qua thụt lề đơn giản, nó tái tạo lại một cách hoàn hảo hệ thống phân cấp DOM của trang, cho phép LLM dễ dàng hiểu được mối quan hệ cha-con và lồng nhau giữa các phần tử.
2. Mô tả ngữ nghĩa:
   Mỗi dòng chỉ rõ vị trí của phần tử vai trò (chẳng hạn như liên kết, nút, tiêu đề) và tên (chẳng hạn như “Chuyển đến nội dung”). Đây là những điều quan trọng để LLM hiểu được chức năng của từng thành phần.
3. Tham chiếu duy nhất và ổn định [ref=eX]:
   Đây là cốt lõi của toàn bộ thiết kế. Trong quá trình tuần tự hóa, nhà viết kịch-mcp gán cho mỗi thành phần có ý nghĩa trên trang một ID tạm thời duy nhất, dưới dạng ref=e23. ID này duy trì ổn định trong suốt vòng đời của một ảnh chụp nhanh. Nó giải quyết một trong những vấn đề thách thức nhất trong tự động hóa — định vị phần tử.
   Trên toàn bộ chuỗi gọi công cụ chụp nhanh, chúng ta có thể thấy Con trỏ tham chiếu các giá trị tham chiếu này nhiều lần

Lệnh gọi chuỗi công cụ con trỏ

4. Mật độ thông tin và tính đơn giản:

Định dạng này chỉ giữ lại thông tin có giá trị nhất cho việc ra quyết định của LLM - chẳng hạn như vai trò, tên, URLvà ID tham chiếu — đồng thời loại bỏ một lượng lớn thuộc tính DOM không liên quan. Điều này tối ưu hóa đáng kể cả chiều dài và hiệu quả của lời nhắc.

Quy trình làm việc kỹ thuật đầy đủ

1. Khởi động & Bắt tay:
   npx ra mắt máy chủ WebSocket của nhà viết kịch-mcp, ứng dụng khách AI sẽ tìm nạp các định nghĩa công cụ (như browser_click).
2. Quan sát (Ảnh chụp nhanh):
   Đầu tiên LLM gọi browser_snapshot để “hiểu” trang.
3. Lý luận:
   Máy chủ chạy access.snapshot() và gửi lại JSON có cấu trúc.
   LLM phân tích nó, ví dụ: “tìm hộp văn bản có tên ‘Tên người dùng’, sau đó nút có tên ‘Đăng nhập’.”
4. Hành động:
   LLM gửi các yêu cầu JSON-RPC để thực thi các hành động (browser_type, browser_click).
5. Thực thi:
   Máy chủ dịch các yêu cầu sang API nhà viết kịch, thích
   getByRole('button', { name: 'Sign in' }), đạt được kết quả khớp ổn định.
6. Phản hồi:
   Kết quả thực thi (thành công/thất bại) được trả về thông qua JSON-RPC.
   LLM quyết định các bước tiếp theo dựa trên phản hồi đó.

Kết luận: Một mô hình mới cho tự động hóa

nhà viết kịch-mcp không chỉ là một công cụ — nó còn đại diện cho một mô hình tự động hóa mới.
Bằng cách kết hợp Lý luận ngôn ngữ tự nhiên của LLM với Kiểm soát trình duyệt chính xác của Playwright, nó mở khóa tự động hóa thông minh thực sự.

Nó vượt xa sự không đáng tin cậy và độ trễ của CV+AI truyền thống, mang đến “tầm nhìn AI” xác định và hiệu quả thông qua Cây tiếp cận.

Điều này sẽ thay đổi cách viết các bài kiểm tra tự động hóa, RPA, quét dữ liệu thông minh và kiểm tra khả năng truy cập - mở ra những khả năng mới to lớn.

Câu hỏi thường gặp

Hỏi: Playwright-MCP là gì và nó thay đổi cách thức hoạt động của tính năng tự động hóa trình duyệt như thế nào?

A: Nhà viết kịch-MCP là cầu nối giữa các mô hình ngôn ngữ lớn (LLM) và trình duyệt. Thay vì dựa vào khả năng nhận dạng ảnh chụp màn hình mong manh, nó cho phép AI hiểu một trang thông qua nó. Cây AOM — cấu trúc tương tự được sử dụng bởi trình đọc màn hình. Điều đó có nghĩa là AI của bạn có thể “nhìn thấy” các phần tử theo ngữ nghĩa (nút, đầu vào, liên kết) và hoạt động với các tham chiếu ổn định chứ không phải pixel. Kết quả: thử nghiệm tự động thông minh hơn, nhanh hơn và đáng tin cậy hơn nhiều.

Câu hỏi: ZStack Cloud hỗ trợ ảo hóa GPU cho khối lượng công việc AI như thế nào và nó có thể được kiểm tra thông qua Playwright-MCP không?

A: Đám mây ZStack cung cấp khả năng quản lý tài nguyên GPU đầy đủ — từ truyền SR-IOV đến các thiết bị trung gian (mdev). Những tính năng này cho phép doanh nghiệp thực hiện khối lượng công việc đào tạo, suy luận và trực quan hóa AI một cách hiệu quả. Sử dụng Playwright-MCP, người thử nghiệm có thể mô phỏng hành động của người dùng trên bảng điều khiển ZStack (như gắn GPU vào VM) và xác nhận rằng tài nguyên phụ trợ phản hồi chính xác. Nó mang lại khả năng xác thực giống như con người trong môi trường sử dụng nhiều GPU.

Hỏi: Tôi đang dự định di chuyển từ VMware. ZStack và Playwright-MCP có thể làm việc cùng nhau như thế nào trong quá trình chuyển đổi?

Trả lời: Trong các dự án thay thế VMware, các nhóm thường cần xác thực tính tương đương về chức năng giữa nền tảng cũ và nền tảng mới. Bằng cách kết hợp các tuyến đường đó với Nhà viết kịch-MCP, bạn có thể tạo tập lệnh cho các tác vụ xác thực ngôn ngữ tự nhiên liên tục kiểm tra quá trình tạo VM, gắn bộ lưu trữ hoặc hành vi HA trên cả hai môi trường. Nó rút ngắn chu kỳ thử nghiệm và giúp đảm bảo sự ổn định khi di chuyển.

Hỏi: ZStack là ai và tại sao nó lại liên quan đến tự động hóa dựa trên AI?

A: ZStack là nhà cung cấp đám mây doanh nghiệp hàng đầu Trung Quốc cung cấp các sản phẩm trọn gói — Đám mây ZStack dành cho đám mây riêng và ảo hóa, Khối lập phương ZStack để triển khai siêu hội tụ và ZStack Edge/ZStack Zaku cho tính toán vùng chứa và cạnh.

Đối với các nhóm AI và tự động hóa, ZStack cung cấp lớp cơ sở hạ tầng (VM, GPU, bộ lưu trữ, API) kết hợp hoàn hảo với các công cụ như Nhà viết kịch-MCP, cho phép các nhà phát triển xây dựng quy trình làm việc thông minh, có thể lặp lại để kiểm tra, triển khai và mở rộng quy mô tài nguyên đám mây với nỗ lực thủ công tối thiểu.