元素選擇器 ?

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

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

塊選擇器選項(xiàng) ?

在編輯需要元素選擇器的組件時(shí)（如點(diǎn)擊元素和獲取文本），您會(huì)看到以下選項(xiàng)：

多選 ?

選擇與選擇器匹配的所有元素。默認(rèn)情況下，MakAgent 僅選擇匹配的第一個(gè)元素。

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

標(biāo)記元素 ?

標(biāo)記已選擇的元素。這意味著如果該元素之前已被同一個(gè)塊選擇過，則該元素將不會(huì)被選擇。

例如，當(dāng)你有這樣的工作流程時(shí)

工作流程示例

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

html

<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>

當(dāng)執(zhí)行獲取文本塊時(shí)，它會(huì)獲取與選擇器匹配的第一個(gè)元素，即Text 并且由于啟用了標(biāo)記元素選項(xiàng)，因此它將標(biāo)記元素并看起來(lái)像這樣 Text。

html

<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>

當(dāng)?shù)诙螆?zhí)行獲取文本塊時(shí)，它將重復(fù)執(zhí)行相同的操作，但不會(huì)選擇 Text 它將選擇 Text 元素，因?yàn)榈谝粋€(gè)元素已被標(biāo)記。

等待選擇器 ?

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

生成選擇器 ?

如果您不熟悉選擇器語(yǔ)法，可以使用以下方法自動(dòng)生成：

MakAgent 元素選擇器 ?

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

元素選擇器

選擇元素按鈕 ?

編輯組件時(shí)點(diǎn)擊"選擇元素"按鈕，系統(tǒng)會(huì)注入元素選擇器工具，選擇元素后點(diǎn)擊"選擇元素"按鈕確認(rèn)。

選擇元素按鈕

自定義選擇器語(yǔ)法 ?

除了標(biāo)準(zhǔn)的 CSS 選擇器和 XPath 表達(dá)式，MakAgent 還支持以下擴(kuò)展語(yǔ)法：

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)的標(biāo)題元素）