元素物件

元素物件 (Element Object) 是一個代表遠端使用者代理程式上元素的物件，例如在瀏覽器中執行工作階段時的 DOM 節點，或是行動裝置的 行動元素。它可以透過許多元素查詢命令接收，例如 $、 custom$、 react$ 或 shadow$。

屬性

元素物件具有以下屬性

名稱	類型	詳細資訊
sessionId	字串	從遠端伺服器分配的工作階段 ID。
elementId	字串	可以透過協定層級與元素互動的關聯 網頁元素參考。
selector	字串	用於查詢元素的選取器。
parent	物件	當元素從它擷取時，會是 瀏覽器物件 (例如，const elem = browser.$('selector'))，或者當元素從元素範圍擷取時，則會是 元素物件 (例如，elem.$('selector'))。
options	物件	根據如何建立瀏覽器物件的 WebdriverIO 選項。 請參閱更多設定類型。

方法

元素物件提供協定區段中的所有方法，例如 WebDriver 協定以及元素區段中列出的命令。可用的協定命令取決於工作階段的類型。如果您執行自動化瀏覽器工作階段，則不會有任何 Appium 命令可用，反之亦然。

此外，還可以使用下列命令

名稱	參數	詳細資訊
addCommand	- commandName (類型：String) - fn (類型：Function)	允許定義可以從瀏覽器物件呼叫以進行組成的自訂命令。 請參閱自訂命令指南中的詳細資訊。
overwriteCommand	- commandName (類型：String) - fn (類型：Function)	允許使用自訂功能覆寫任何瀏覽器命令。 請謹慎使用，因為這可能會讓框架使用者感到困惑。 請參閱自訂命令指南中的詳細資訊。

備註

元素鏈

當使用元素時，WebdriverIO 提供特殊語法來簡化查詢元素並組合複雜的巢狀元素查詢。由於元素物件允許您使用常見的查詢方法在其樹狀分支中尋找元素，因此使用者可以如下擷取巢狀元素

const header = await $('#header')
const headline = await header.$('#headline')
console.log(await headline.getText()) // outputs "I am a headline"

對於深度巢狀的結構，將任何巢狀元素指定到陣列，然後再使用它可能會相當冗長。因此，WebdriverIO 有鏈式元素查詢的概念，允許擷取巢狀元素，如下所示

console.log(await $('#header').$('#headline').getText())

當擷取一組元素時，此功能也適用，例如

// get the text of the 3rd headline within the 2nd header
console.log(await $$('#header')[1].$$('#headline')[2].getText())

當使用一組元素時，當嘗試與它們互動時，這特別有用，因此可以不必執行

const elems = await $$('div')
const locations = await Promise.all(
    elems.map((el) => el.getLocation())
)

您可以直接在元素鏈上呼叫陣列方法，例如

const location = await $$('div').map((el) => el.getLocation())

與

const divs = await $$('div')
const location = await divs.map((el) => el.getLocation())

WebdriverIO 使用自訂實作，在底層支援非同步迭代器，因此其 API 中的所有命令也支援這些用例。

注意：即使您的回呼未傳回 promise，所有非同步迭代器也會傳回 promise，例如

const divs = await $$('div')
console.log(divs.map((div) => div.selector)) // ❌ returns "Promise<string>[]"
console.log(await divs.map((div) => div.selector)) // ✅ returns "string[]"

自訂命令

您可以在瀏覽器範圍設定自訂命令，以抽象化常用的工作流程。 請查看我們的自訂命令指南以取得更多資訊。