国产chinesehdxxxx野外,国产av无码专区亚洲av琪琪,播放男人添女人下边视频,成人国产精品一区二区免费看,chinese丰满人妻videos

MCP 教程：實(shí)現(xiàn)網(wǎng)頁自動(dòng)化測試

2025-06-17 10:24 更新

在現(xiàn)代化的 Web 開發(fā)中，自動(dòng)化測試已成為確保應(yīng)用質(zhì)量、加速迭代周期的關(guān)鍵環(huán)節(jié)。Playwright 憑借其跨瀏覽器支持、強(qiáng)大的自動(dòng)化能力以及靈活的 API，成為自動(dòng)化端到端測試的理想選擇。本最佳實(shí)踐將詳細(xì)介紹如何在 Trae IDE 中高效集成 Playwright 這一 MCP Server，構(gòu)建自動(dòng)化測試解決方案，幫助你快速驗(yàn)證網(wǎng)頁的交互邏輯，減少人工測試成本，提升整體開發(fā)效率。

效果展示

以下為部分使用 Trae IDE 自動(dòng)化測試網(wǎng)頁的效果展示：

  • 打開網(wǎng)頁：該示例中，Trae IDE 自動(dòng)打開了 https://docs.trae.com.cn/ide/model-context-protocol 頁面。

  • 打開網(wǎng)頁并點(diǎn)擊頁面上的超鏈接：該示例中，Trae IDE 自動(dòng)打開了 https://docs.trae.com.cn/ide/model-context-protocol 頁面，并點(diǎn)擊了 “MCP 官方文檔” 這一添加了超鏈接的文字。

演示環(huán)境

本教程中，小編使用的系統(tǒng)環(huán)境如下：

  • Trae IDE 版本：0.5.5
  • macOS 版本：14.7
  • Node.js 版本：20.19.1
  • npx 版本：10.9.2
  • Python 版本：3.13.3
  • uvx 版本：0.6.16

操作步驟

跟隨教程，在項(xiàng)目中集成 MCP Server - Playwright，配置智能體，然后使用指令來測試網(wǎng)頁。

第一步：安裝 Trae IDE

Trae IDE 與 AI 深度集成，提供智能問答、代碼自動(dòng)補(bǔ)全以及基于 Agent 的 AI 自動(dòng)編程能力。使用 Trae 開發(fā)項(xiàng)目時(shí)，你可以與 AI 靈活協(xié)作，提升開發(fā)效率。前往 Trae CN 官網(wǎng)，下載 Trae IDE 的安裝包，然后將其安裝至你的計(jì)算機(jī)。

第二步：配置 MCP Sever 的運(yùn)行環(huán)境

為確保正常啟動(dòng) MCP Server，你需要安裝以下依賴：

  • npx：依賴于 Node.js，版本需大于等于 18。
  • uvx：命令行工具，用于快速運(yùn)行 Python 腳本。

首先，為便于后續(xù)通過命令行安裝依賴，讓我們在 Trae IDE 中打開終端。步驟如下：

  1. 啟動(dòng) Trae IDE。

  2. 在頂部菜單欄中，點(diǎn)擊 終端 > 新建終端。

    界面底部顯示 終端 面板。

打開終端后，使用以下步驟安裝 uvx：

  1. 前往 Python 官網(wǎng)，下載并安裝 Python 3.8 或更高版本。

  2. 安裝完成后，在終端中執(zhí)行以下命令確認(rèn)是否安裝成功。 

    python3 --version

    若安裝成功，終端中會(huì)輸出已安裝的 Python 的版本號(hào)。

  3. 執(zhí)行以下命令，安裝 uv（包含 uvx）。

    • macOS / Linux 安裝命令： 

    curl -LsSf https://astral.sh/uv/install.sh | sh

    • Windows 安裝命令（PowerShell）： 

    powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

  4. 執(zhí)行 source $HOME/.local/bin/env 命令，加載 uvx 所需的運(yùn)行時(shí)環(huán)境變量和初始化配置。

  5. 執(zhí)行以下命令，驗(yàn)證是否安裝成功。 

    uvx --version

    若安裝成功，終端中會(huì)輸出已安裝的 uvx 的版本號(hào)。

    uvx 安裝完成后，使用以下步驟安裝 Node.js：

  1. 請前往 Node.js 官網(wǎng)，下載并安裝 Node.js 18 或更高版本。

  2. 安裝完成后，在終端中運(yùn)行以下命令確認(rèn)是否安裝成功。 

    node -v
npx -v

    若安裝成功，終端中會(huì)輸出已安裝的 Node.js 的版本號(hào)，例如： 

    v18.19.0
10.2.0

  3. 重啟 Trae IDE 以使 Node.js 生效。

第三步：安裝 Playwright

若想在 Trae IDE 中使用 Playwright 進(jìn)行網(wǎng)頁自動(dòng)化測試，需要先在本地計(jì)算機(jī)上完成 Playwright 的安裝。步驟如下：

  1. 運(yùn)行 `pip3 install playwright 命令，安裝 Playwright 的 Python 客戶端庫，使其可以在 Python 代碼中使用playwright` 模塊。開始安裝后，終端會(huì)展示以下內(nèi)容：

    xxxxxxxxxxx ~ % pip3 install playwright
Collecting playwright
Obtaining dependency information for playwright from https://files.pythonhosted.org/packages/32/4a/5f2ff6866bdf88e86147930b0be86b227f3691f4eb01daad5198302a8cbe/playwright-1.51.0-py3-none-macosx_11_0_arm64.whl.metadata
Downloading playwright-1.51.0-py3-none-macosx_11_0_arm64.whl.metadata (3.5 kB)
Collecting pyee<13,>=12 (from playwright)
Obtaining dependency information for pyee<13,>=12 from https://files.pythonhosted.org/packages/25/68/7e150cba9eeffdeb3c5cecdb6896d70c8edd46ce41c0491e12fb2b2256ff/pyee-12.1.1-py3-none-any.whl.metadata
Downloading pyee-12.1.1-py3-none-any.whl.metadata (2.9 kB)
...

  2. 運(yùn)行 python3 -m playwright install 命令，安裝 Playwright 所需的瀏覽器（Chromium/Firefox/WebKit）。開始安裝后，終端會(huì)展示以下內(nèi)容：

    xxxxxxxxxxx ~ % python3 -m playwright install
Downloading Chromium 134.0.6998.35 (playwright build v1161) from https://cdn.playwright.dev/dbazure/download/playwright/builds/chromium/1161/chromium-mac-arm64.zip
124.1 MiB [==================  ] 89% 3.5sError: Request to https://cdn.playwright.dev/dbazure/download/playwright/builds/chromium/1161/chromium-mac-arm64.zip timed out after 30000ms
at ClientRequest.rejectOnTimeout (/Library/Frameworks/Python.framework/Versions/3.12/lib/python3.12/site-packages/playwright/driver/package/lib/server/utils/network.js:76:15)
...

第四步：添加 MCP Server - Playwright

  1. 打開 Trae IDE。

  2. 在 AI 對(duì)話框的右上角，點(diǎn)擊 設(shè)置 圖標(biāo)，然后在菜單中選擇 MCP。

    界面上顯示 MCP 頁簽。

  3. 在 MCP 頁簽中，點(diǎn)擊 + 添加 MCP Servers 按鈕。若你已添加過 MCP Server，則點(diǎn)擊右側(cè)區(qū)域的 + 添加 按鈕。

    你已進(jìn)入 MCP Server 市場。

  4. 搜索關(guān)鍵詞，找到 Playwright，然后點(diǎn)擊右側(cè)的 + 按鈕。

    界面上顯示 添加 MCP Server 彈窗。

  5. 點(diǎn)擊 介紹頁面。

    預(yù)覽 窗口出現(xiàn)并展示 MCP Server - Playwright 在 GitHub 上的介紹頁面。

  6. 滾動(dòng)頁面至 Configuration to use Playwright Server 部分，復(fù)制 JSON 配置內(nèi)容，然后將其粘貼至 添加 MCP Server 彈窗中的配置內(nèi)容輸入框，

  7. 點(diǎn)擊底部的 確認(rèn) 按鈕。

    MCP Server - Playwright 配置完成，并已自動(dòng)添加至內(nèi)置智能體 - Builder with MCP。

    你可以回到 AI 對(duì)話框，直接使用 Builder with MCP 來體驗(yàn) Playwright（參考“第七步”）。若你希望創(chuàng)建一個(gè)自定義智能體，通過配置提示詞和工具來使其更好地處理你的需求，請繼續(xù)往下操作。

第五步：開啟 “自動(dòng)運(yùn)行” 功能

為使測試過程最大限度自動(dòng)化，我們可以使用 Trae IDE 的 “自動(dòng)運(yùn)行”（Auto-Run）功能。開啟后，智能體會(huì)自動(dòng)運(yùn)行模型認(rèn)為安全且不在黑名單中的命令和 MCP 服務(wù)器。智能體提出建議執(zhí)行的命令時(shí)，如果命令前綴在黑名單中，執(zhí)行命令前會(huì)請求用戶確認(rèn)。創(chuàng)建自定義智能體前，先為其開啟該功能，步驟如下：

  1. 在 AI 對(duì)話框的右上角，點(diǎn)擊 設(shè)置 圖標(biāo)，然后在菜單中選擇 智能體。

    界面上顯示 智能體 頁簽。

  2. 滾動(dòng)至 自動(dòng)運(yùn)行 部分，打開開關(guān)，然后在彈窗中點(diǎn)擊 確認(rèn)。

    “自動(dòng)運(yùn)行” 功能已開啟。勿關(guān)閉 智能體 頁簽，我們將繼續(xù)在該頁簽上創(chuàng)建智能體。

第六步：創(chuàng)建自定義智能體并為其配置 Playwright

智能體（Agent）是你面向不同開發(fā)場景的編程助手。你可以創(chuàng)建自定義智能體，通過靈活配置提示詞和工具集，使其更高效地幫你完成復(fù)雜任務(wù)。

  1. 在 智能體 頁簽右側(cè)區(qū)域，點(diǎn)擊 + 創(chuàng)建智能體 按鈕。

    智能體配置面板已打開。

  2. 配置該智能體：

    a. (可選) 上傳智能體的頭像。

    b. 輸入智能體的名稱（例如：網(wǎng)頁測試助手）。

    c. (可選) 配置智能體的提示詞。參考提示詞如下，你可以直接使用或根據(jù)需求制訂提示詞。

    你是一個(gè)專業(yè)的網(wǎng)頁自動(dòng)化測試專家，精通 Playwright 自動(dòng)化測試工具。你的任務(wù)是根據(jù)用戶的指令幫助其測試網(wǎng)頁。

    d. 在 工具-MCP 部分，僅勾選 Playwright。

    e. 在 工具-內(nèi)置 部分，勾選 文件系統(tǒng)（File System）、終端（Terminal）、聯(lián)網(wǎng)搜索（Web Search）。三個(gè)內(nèi)置工具的作用如下：

    • 文件系統(tǒng)：對(duì)文件進(jìn)行增刪改查。
    • 終端：在終端運(yùn)行命令，并獲取命令的運(yùn)行狀態(tài)和結(jié)果。
    • 聯(lián)網(wǎng)搜索：搜索和用戶任務(wù)相關(guān)的網(wǎng)頁內(nèi)容。

    配置完成后的面板如下：

  3. 點(diǎn)擊底部的 創(chuàng)建 按鈕。

    配置了 MCP Server - Playwright 的智能體創(chuàng)建成功。點(diǎn)擊 立即使用 按鈕，開啟與智能體的對(duì)話。

第七步：開啟對(duì)話，自動(dòng)測試網(wǎng)頁

在上一環(huán)節(jié)中，點(diǎn)擊 立即使用 按鈕后，系統(tǒng)會(huì)自動(dòng)跳轉(zhuǎn)至 AI 對(duì)話框，并默認(rèn)選用 網(wǎng)頁測試助手 智能體（若未創(chuàng)建自定義智能體，則使用 Builder with MCP）。你可以與該智能體對(duì)話，描述你的測試需求，智能體會(huì)調(diào)用 Playwright 提供的工具和服務(wù)來自動(dòng)執(zhí)行任務(wù)。步驟如下：

  1. 在本地新建一個(gè)文件夾，然后在 Trae IDE 中打開它。
  2. 在 AI 對(duì)話輸入框右下角，選擇你想使用的模型（本教程使用 DeepSeek-V3-0324）。
  3. 在輸入框中粘貼待測試頁面的 URL（例如：https://docs.trae.com.cn/ide/model-context-protocol）。

  4. 輸入測試指令并發(fā)送。例如：打開該頁面、打開該頁面并截圖、打開該頁面并點(diǎn)擊頁面上的超鏈接，等等。

    提示
    你可以根據(jù) “參考信息：Playwright 支持的能力” 部分來設(shè)計(jì)指令。

    Trae IDE 將調(diào)用 Playwright MCP Server 中的工具和服務(wù)完成相應(yīng)操作。以下輸出過程供參考：

參考信息：Playwright 支持的能力

Playwright MCP Server 支持的能力如下：

API 方法 能力
start_codegen_session 開始一個(gè)新的代碼生成會(huì)話來記錄 Playwright 操作。
end_codegen_session 結(jié)束代碼生成會(huì)話并生成測試文件。
get_codegen_session 獲取關(guān)于代碼生成會(huì)話的信息。
clear_codegen_session 清除代碼生成會(huì)話而不生成測試文件。
playwright_navigate 導(dǎo)航到一個(gè) URL。
playwright_screenshot 對(duì)當(dāng)前頁面或特定元素進(jìn)行截圖。
playwright_click 點(diǎn)擊頁面上的元素。
playwright_iframe_click 點(diǎn)擊 iframe 中的元素。
playwright_fill 填寫輸入字段。
playwright_select 使用 Select 標(biāo)簽選擇頁面上的元素。
playwright_hover 懸停在頁面的元素上。
playwright_evaluate 在瀏覽器控制臺(tái)執(zhí)行 JavaScript。
playwright_console_logs 檢索瀏覽器的控制臺(tái)日志（帶過濾選項(xiàng)）。
playwright_close 關(guān)閉瀏覽器并釋放所有資源。
playwright_get 執(zhí)行 HTTP GET 請求。
playwright_post 執(zhí)行 HTTP POST 請求。
playwright_put 執(zhí)行 HTTP PUT 請求。
playwright_patch 執(zhí)行 HTTP PATCH 請求。
playwright_delete 執(zhí)行 HTTP DELETE 請求。
playwright_expect_response 要求 Playwright 開始等待 HTTP 響應(yīng)。
playwright_assert_response 等待并驗(yàn)證先前初始化的 HTTP 響應(yīng)等待操作。
playwright_custom_user_agent 為瀏覽器設(shè)置自定義 User Agent。
playwright_get_visible_text 獲取當(dāng)前頁面的可見文本內(nèi)容。
playwright_get_visible_html 獲取當(dāng)前頁面的 HTML 內(nèi)容。
playwright_go_back 在瀏覽器歷史中后退。
playwright_go_forward 在瀏覽器歷史中前進(jìn)。
playwright_drag 將元素拖動(dòng)到目標(biāo)位置。
playwright_press_key 按下鍵盤鍵。
playwright_save_as_pdf 將當(dāng)前頁面保存為 PDF 文件。

了解更多

若想了解更多模型上下文協(xié)議（MCP）和智能體的相關(guān)信息，參閱以下文檔：

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)