元素選擇頁面 ?

頁面概述 ?

元素選擇頁面是MakAgent工具的核心功能之一，提供多種元素定位方式和詳細元素信息展示，幫助用戶精準(zhǔn)選擇和操作網(wǎng)頁元素，實現(xiàn)自動化流程的精確控制。

核心功能 ?

啟動或關(guān)閉元素選擇 ?

通過右上角眼睛圖標(biāo)控制元素選擇功能的啟用狀態(tài)：

• 啟用狀態(tài)：眼睛圖標(biāo)顯示，可進行元素選擇和操作
• 關(guān)閉狀態(tài)：眼睛圖標(biāo)隱藏，無法進行元素選擇

選擇器類型配置 ?

提供多種元素定位方式，滿足不同場景需求：

選擇器模式切換 ?

• CSS選擇器：使用標(biāo)準(zhǔn)的CSS選擇器語法定位元素
• XPath：支持XPath語法進行元素定位
• 元素路徑：直觀顯示元素的路徑表達式，支持上下切換顯示不同層級的元素

單選或多選模式 ?

通過右上角菜單圖標(biāo)控制元素選擇模式：

• 單選模式：每次只能選擇一個元素
• 多選模式：支持同時選擇多個元素進行批量操作

選擇器設(shè)置優(yōu)化 ?

點擊右上角設(shè)置按鈕進入配置頁面，靈活定制元素選擇器的生成規(guī)則：

選擇器生成選項 ?

• 包含元素ID：在選擇器中包含元素的ID屬性
• 包含標(biāo)簽名：包含HTML標(biāo)簽名稱
• 包含類名：包含CSS類名信息
• 包含屬性：包含指定的元素屬性

屬性配置管理 ?

• 屬性名稱：自定義要包含的屬性名（如data-testid）
• 多屬性支持：使用逗號分隔多個屬性名稱

元素信息展示 ?

通過三種視圖模式展示元素的詳細信息：

屬性視圖 ?

顯示元素的完整屬性信息：

• 角色屬性：元素的ARIA角色（如button）
• 狀態(tài)屬性：如aria-disabled等狀態(tài)信息
• 類名信息：完整的CSS類名列表
• 交互屬性：tabindex等交互相關(guān)屬性
• 樣式信息：元素的內(nèi)聯(lián)樣式定義

坐標(biāo)視圖 ?

提供元素的精確位置和尺寸信息：

• 中心點坐標(biāo)：元素中心在頁面中的X、Y坐標(biāo)
• 左上角坐標(biāo)：元素左上角在頁面中的坐標(biāo)位置
• 元素尺寸：元素的寬度和高度像素值

模塊視圖 ?

提供可應(yīng)用于當(dāng)前元素的操作模塊選擇：

操作模塊分類 ?

• 選擇操作模塊：選擇需要執(zhí)行的具體動作
  • 處理表單：自動化表單填寫和提交
  • 獲取文本：提取元素中的文本內(nèi)容
  • 點擊元素：模擬鼠標(biāo)點擊操作
  • 觸發(fā)器事件：觸發(fā)特定DOM事件
  • 滾動元素：控制頁面滾動行為
• 執(zhí)行模塊：標(biāo)記為已選中的待執(zhí)行模塊

操作指南 ?

元素選擇方式 ?

1. 點擊選擇：直接點擊目標(biāo)元素進行選擇
2. 快捷鍵選擇：按Space空格鍵快速選擇當(dāng)前高亮元素
3. 路徑切換：在元素路徑顯示區(qū)域上下切換選擇不同層級的元素

視圖切換操作 ?

在屬性、坐標(biāo)、模塊三種視圖間自由切換，獲取不同類型的元素信息

選擇器優(yōu)化策略 ?

根據(jù)實際自動化需求配置選擇器設(shè)置，生成更穩(wěn)定、更精確的元素定位器

應(yīng)用場景 ?

• 網(wǎng)頁自動化：精確選擇需要操作的表單元素、按鈕等交互組件
• 數(shù)據(jù)采集：定位需要提取數(shù)據(jù)的具體頁面元素和內(nèi)容區(qū)域
• 測試腳本：為自動化測試生成可靠的元素定位器
• 流程錄制：在錄制工作流時準(zhǔn)確捕捉用戶操作目標(biāo)元素
• 批量操作：多選模式下對多個相似元素執(zhí)行相同操作