元素選擇器 ?

元素選擇器用于告訴工作流要操作哪個頁面元素。例如，當使用表單塊填充特定表單輸入時，需要指定目標輸入元素。使用 input.form-name 選擇器，工作流將填充具有 form-name 類的 <input /> 元素。

在 MakAgent 中，您可以使用 CSS 選擇器 或 XPath 表達式 來定位元素。

塊選擇器選項 ?

在編輯需要元素選擇器的組件時（如點擊元素和獲取文本），您會看到以下選項：

多選 ?

選擇與選擇器匹配的所有元素。默認情況下，MakAgent 僅選擇匹配的第一個元素。

例如，使用選擇器 p 的獲取文本塊將檢索所有匹配 <p> 元素的文本內(nèi)容，而不僅僅是第一個。

標記元素 ?

標記已選擇的元素。 這意味著如果該元素之前已被同一個塊選擇過，則該元素將不會被選擇。

例如，當你有這樣的工作流程時

以及使用 .text 作為元素選擇器的 獲取文本塊，以及網(wǎng)站 DOM 樹。

<div>
  <p class="text" id="1">Text</p>
  <p class="text" id="2">Text</p>
  <p class="text" id="3">Text</p>
  <p class="text" id="4">Text</p>
</div>

<div>
  <p class="text" id="1">Text</p>
  <p class="text" id="2">Text</p>
  <p class="text" id="3">Text</p>
  <p class="text" id="4">Text</p>
</div>

當執(zhí)行獲取文本塊時，它會獲取與選擇器匹配的第一個元素，即<p class="text" id="1">Text</p > 并且由于啟用了標記元素選項，因此它將標記元素并看起來像這樣 <p class="text" id="1" block--block-id>Text</p>。

<div>
  <p class="text" id="1" block--block-id>Text</p>
  <p class="text" id="2">Text</p>
  <p class="text" id="3">Text</p>
  <p class="text" id="4">Text</p>
</div>

<div>
  <p class="text" id="1" block--block-id>Text</p>
  <p class="text" id="2">Text</p>
  <p class="text" id="3">Text</p>
  <p class="text" id="4">Text</p>
</div>

當?shù)诙螆?zhí)行 獲取文本塊時，它將重復執(zhí)行相同的操作，但不會選擇 <p class="text" id="1" block--block-id>Text</p> 它將選擇 <p class="text" id="2">Text</p> 元素，因為第一個元素已被標記。

等待選擇器 ?

等待選擇器匹配的元素出現(xiàn)在頁面上。如果元素已存在，組件立即執(zhí)行；如果在設(shè)定的超時時間內(nèi)元素未出現(xiàn)，工作流將拋出錯誤。

生成選擇器 ?

如果您不熟悉選擇器語法，可以使用以下方法自動生成：

MakAgent 元素選擇器 ?

在 MakAgent 儀表板中，點擊側(cè)邊欄的 按鈕，頁面將注入元素選擇器工具。點擊或按空格鍵選擇元素，系統(tǒng)會自動生成對應的選擇器。

選擇元素按鈕 ?

編輯組件時點擊"選擇元素"按鈕，系統(tǒng)會注入元素選擇器工具，選擇元素后點擊"選擇元素"按鈕確認。

自定義選擇器語法 ?

除了標準的 CSS 選擇器 和 XPath 表達式，MakAgent 還支持以下擴展語法：

• iframe 內(nèi)元素選擇：iframe.result |> button.primary-btn（選擇 iframe 內(nèi)的按鈕）
• 文本內(nèi)容選擇：p.description:contains("cat")（選擇包含"cat"文本的描述段落）
• Shadow DOM 選擇：div.app-container >> h1.title（選擇 Shadow DOM 內(nèi)的標題元素）