Elementオブジェクト

Elementオブジェクトは、リモートユーザーエージェント上の要素を表すオブジェクトです。例えば、ブラウザ内でセッションを実行する場合はDOMノード、モバイルの場合はモバイル要素です。これは、$、custom$、react$、shadow$など、多くの要素クエリコマンドのいずれかを使用して受信できます。

プロパティ

Elementオブジェクトには、次のプロパティがあります。

名前	タイプ	詳細
sessionId	String	リモートサーバーから割り当てられたセッションID。
elementId	String	プロトコルレベルで要素を操作するために使用できる関連するWeb要素参照。
selector	String	要素のクエリに使用されるセレクター。
parent	Object	要素が取得された場所に応じて、ブラウザオブジェクト（例：const elem = browser.$('selector')）または要素スコープから取得された場合は要素オブジェクト（例：elem.$('selector')）。
options	Object	ブラウザオブジェクトが作成された方法に応じて、WebdriverIOのオプション。詳細については、セットアップタイプをご覧ください。

メソッド

Elementオブジェクトは、WebDriverプロトコルや、elementセクションにリストされているコマンドなど、プロトコルセクションのすべてのメソッドを提供します。利用可能なプロトコルコマンドは、セッションの種類によって異なります。自動化されたブラウザセッションを実行する場合、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())
)

要素チェーンで直接Arrayメソッドを呼び出すことができます。例：

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[]"

カスタムコマンド

ブラウザスコープにカスタムコマンドを設定して、よく使用されるワークフローを抽象化できます。詳細については、カスタムコマンドのガイドをご覧ください。