どのように Selenium ツリー内の要素を見つける？

WebDriverはロケーターをブラウザに送信し、ブラウザは解析されたツリーを走査して一致する要素を見つけ、WebElementハンドルを返します。id、name、CSSセレクタ、XPathなどのロケーターは、同じノードに対して異なる検索ルールを記述するものです。

GitHub CopilotはDOM操作コードを作成できますか？

Copilotはコメントからイベントリスナー、querySelectorチェーン、トラバーサルループを生成し、一般的なパターンに基づいて信頼性の高いコードを作成します。ただし、Copilotはあなたのマークアップを認識できないため、必ず実際のページで提案内容をテストしてください。

DOMとは何ですか Selenium WebDriverとは？構造と正式名称

⚡ スマートサマリー

ドキュメントオブジェクトモデルは、HTMLページを公開します Javaスクリプトをオブジェクトのツリーとして扱い、スクリプトと Selenium WebDriverは、ブラウザの実行中にページ上のあらゆる要素を読み取り、特定し、変更します。

🔘 完全形： DOMはDocument Object Modelの略で、HTMLおよびXMLドキュメントのためのW3C標準化インターフェースです。
☑️ ツリー構造: すべてのタグがノードとなるため、html、head、body、article、pは親子関係の階層構造を形成します。
✅ 3つの物体： Windowはタブを囲み、Documentはツリーのルートを示し、Elementは個々のタグを表します。
🧪 コアメソッド： getElementById、querySelector、querySelectorAllはノードを取得し、innerHTMLはそれらのコンテンツを読み込んで書き換えます。
🛠️ デバッグ： ブラウザの開発者ツールは解析されたツリー構造を公開しますが、そこで行われた編集はページが再読み込みされるまでしか保持されません。
📊 イベント： クリックや読み込みなどのアクションは、onclick属性やaddEventListenerによって傍受されるブロードキャストメッセージです。

プロフィール

DOMとは何ですか Selenium ウェブドライバー？

DOM in Selenium WebDriverはウェブ開発に不可欠な要素 HTML5 と Javaスクリプト。DOMの完全な形式は、ドキュメントオブジェクトモデルです。DOMはコンピュータサイエンスの概念ではありません。Web開発者の間で標準化された、HTMLまたはXMLのドキュメントにアクセスして操作するためのシンプルなインターフェイスのセットです。 Java脚本。

これらの標準は、開発者が実装の詳細を気にせずにウェブページを構築するのに役立ちます。これらのインターフェースの標準化に関与している組織には、Mozilla、Appleなどがあります。 Microsoft, GoogleAdobe など。ただし、標準を正式に定めて公開するのは W3C です。こちらを参照してください (https://dom.spec.whatwg.org/).

以下のセクションでは、ドキュメントの構造、DOM が公開するオブジェクト、およびそれらを検査する方法について説明します。Mozilla は最新の API リファレンスを次の場所に掲載しています。 MDNドキュメントオブジェクトモデルページ.

あらゆる Selenium ロケーターはこの同じツリーに対して解決されるため、以下の構造は findElement() 検索します。

DOM 構造を理解する

スクリプトを使用するウェブサイトを構築する場合は、DOM構造を理解する必要があります。 Javaスクリプト。ウェブサイトで以下の複雑なタスクのいずれかまたはすべてを実行する場合、DOM を理解することはさらに重要になります。

開発ping ページ全体を更新することなく継続的に更新されるコンテンツ（ユーザーのポートフォリオに含まれるすべての株式の現在の価格など）
開発ping コンテンツの動的な追加や変更など、高度なユーザーインタラクション – 例えば、ポートフォリオに株式を追加する機能
開発ping ユーザーがカスタマイズ可能なコンテンツ – 例えば、投資信託ポートフォリオを株式ポートフォリオより前に表示するようにレイアウトを変更できる機能など
開発ping ウェブサイトにレスポンシブコンテンツを導入することで、iPhone、デスクトップ、タブレットなど、さまざまなメディア画面に自動的に適応させることができます。

基本的な HTML ページ

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
         <head>
            <title>my page title</title>
          </head>
<body>
         <article>
                  <p>
                         my first article
                   </p>
         </article>
        <aside>side bar content</aside>
</body>
</html>

ブラウザの DOM パーサーにはどのように見えるのでしょうか?

html    >     head    >    title
    >    body    >    aside
            >    article    >    p

body要素にどうやってアクセスするのでしょうか？

<script>
    var body = window.document.body;
</script>

「ハローワールド」ってなんて言うの？

<script>
    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>

最終的に HTML ファイル全体は次のようになります。

店は開いています Windows メモ帳に次の内容を貼り付けます。次に、ファイルを「MyFileNewFile.html」として保存します (ファイル名が .html で終わることを確認してください)。

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<article><p>my first article</p></article>
<aside>side bar content</aside>
<script>

    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>
</body>
</html>

最後に、任意のブラウザを使用してファイルを開くと、「Hello World!」が表示されます。

DOM のコンポーネント Selenium

DOM の主なコンポーネントは次のとおりです。 Selenium ウェブドライバー:

ウィンドウ
ドキュメント
素子

各構成要素は、最も外側の階層から順に、ツリーの異なる階層に配置されます。

ウィンドウ

Window は、DOM 内のドキュメントオブジェクトを含むオブジェクトです。それはすべての上に座っています。

指定されたドキュメントからウィンドウオブジェクトにアクセスするには

<script>
      var window = document.defaultView;
</script>

タブ環境では、各タブに独自のウィンドウオブジェクトがあります。ただし、window.resizeTo や window.resizeBy などのイベントをキャッチして実装したい場合、これらのイベントはタブだけに適用されるのではなく、ウィンドウ全体に適用されます。

DOM の Window オブジェクトのプロパティ

window.localStorage – ブラウザのローカルストレージへのアクセスを許可します。ローカルストレージは、セッションのデータの保存と取得に使用できます。

<script>
    window.localStorage.setItem('name','xyz');
	var name = window.localStorage.getItem('name');
</script>

ウィンドウオープナー – このウィンドウを開いたウィンドウオブジェクトへの参照を取得します (リンクをクリックするか、window.open メソッドを使用します)。

Windowオブジェクトの便利なメソッド

window.alert() – メッセージを含む警告ダイアログを表示します。

<script>
		window.alert('say hello');
</script>

window オブジェクトが公開する便利なイベントが多数あります。詳細トピックの「イベント」セクションで説明します。

ドキュメント

ドキュメントはDOMツリーの開始を示します。ドキュメントはDOMの最初のノードです。ドキュメントには、スコープがドキュメント全体に適用されるいくつかのメソッドとプロパティがあります。 URLgetElementById、querySelectorなど。

DOM のドキュメントオブジェクトのプロパティ

Document.documentURI (NAIST) と 資料。URL – どちらもドキュメントの現在の位置を返します。ただし、ドキュメントが HTML ドキュメントのタイプでない場合。URL 動作しないでしょう。

Document.activeElement – このメソッドは、DOM 内でフォーカスされている要素を返します。つまり、ユーザーが ty の場合ping テキストボックス内では、Document.activeElement はそのテキストボックスへの参照を返します。

ドキュメントのタイトル – これは、特定のドキュメントのタイトルを読み取ったり、設定したりするために使用されます。

Document オブジェクトの便利なメソッド

Document.getElementById(文字列ID) これはDOM操作において最も関連性が高く有用な方法です。DOMツリー内の要素を検索するために使用されます。固有識別子を使用して検索では大文字と小文字が区別されます。つまり、次の例では「「」要素は、IntroDiv、introdiv、iNtrodivなどの単語を使用して検索することはできません。

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head></head>
<body>
<div id='introDiv'></div>
<script>
		var label = Document.getElementById('introDiv');
		label.setInnerHTML('say hello again');
	</script>
</body>
</html>

Document.querySelectorAll(文字列セレクター) – これは、1つ以上の要素を選択するために広く使用されているもう1つの方法です。 CSSセレクタのルール（jQueryの$表記法をご存知であれば、それ自体がこの方法を使用していることがわかります。）CSSセレクタについてはあまり深く掘り下げません。CSSセレクタは、セレクタルールに基づいて類似の要素のリストを取得できる一連のルールです。この方法は、「Hello World」セクションですでに使用しました。

素子

下の図は、DOMツリー内でElementオブジェクトがドキュメントノードの下に位置する様子を示しています。

DOM の要素オブジェクト

要素とは、ドキュメントの DOM ツリー内のノードによって表されるあらゆるオブジェクトのことです。いつものように、要素オブジェクト自体は単なる概念です。tracブラウザと HTML ドキュメント間のプロパティ、メソッド、イベントのやり取り。HTMLElement、SVGElement、XULElement など、特殊な種類の要素があります。このチュートリアルでは HTMLElement のみに焦点を当てます。

DOM の要素オブジェクトのプロパティ

要素.id – このプロパティは、HTML 要素の「ID」（一意の識別子）を設定または読み取るために使用できます。 ID は、DOM ツリー内の要素間で一意である必要があります。前述したように、ID は DOM ツリー内の特定の Element オブジェクトを選択するために Document.getElementById メソッドでも使用されます。

HTMLElement.contentEditable – 要素の contentEditable プロパティは、その要素のコンテンツが編集可能/変更可能かどうかを決定します。このプロパティは、以下のスクリプトに示すように設定できます。このプロパティは、特定の要素が編集可能かどうかを判断するためにも使用できます。任意の HTML 本文内で次のスクリプトを試してみれば、本文の任意のコンテンツを編集できることがわかります。

<script>
		document.body.contentEditable = true;
</script>

Element.innerHTML – innerHTML は、要素内の HTML コンテンツにアクセスするために使用するもう 1 つの重要なプロパティです。要素の新しい HTML コンテンツを設定するためにも使用されます。データフィールドのコンテンツの設定/変更に広く使用されています。たとえば、Web ページでムンバイ市の気温を 1 時間ごとに更新する場合は、次の例のスクリプトを 1 時間ごとに実行します。

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<section>
<h1>Mumbai</h1>
<h2>Temperature</h2>
<span id='tempValue'></span><sup>o</sup>C
</section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
			</script>
</body>
</html>

要素オブジェクトの便利なメソッド

HTMLElement.blur() & HTMLElement.focus() – blur メソッドと focus メソッドは、それぞれ HTML 要素からフォーカスを削除したり、HTML 要素にフォーカスを当てたりするために使用されます。これらのメソッドは、データ入力 Web ページのテキストボックス間でカーソルのフォーカスを移動するために最も広く使用されています。

Element.querySelectorAll – このメソッドは、すでに説明したドキュメントオブジェクトの querySelector メソッドに似ています。ただし、このメソッドでは、要素自体の子孫内での検索が制限されます。

精度に関する注記: 上記のブロックは公開されたとおりに再現されています。動作するコードでは ドキュメント 小文字の d と innerHTML setInnerHTML()ではなく、プロパティです。

DOM でのデバッグ

の開発者ツール Google Chrome、Mozilla Firefox, Internet Explorer (10 以降) または Safari を使用すると、ブラウザ内で簡単にデバッグできます。異なるブラウザでは同じ HTML マークアップが異なる方法で解釈されることがあります。その場合、デバッグは、特定のブラウザの DOM エンジンによって解釈された DOM を検査するのに役立ちます。

ブラウザに関する注意: Internet Explorerは2022年にサポートが終了したため、そのDevToolsは現在 Microsoft Edge以下の手順は変更ありません。DevToolsはF12キーで開きます。

ここで、温度値を 26 から変更したいとします。^o32にC^o最後の例では C です。そのためにいくつかの簡単な手順を実行します。ここに示されているスクリーンショットは Mozilla のものです。 Firefox– ただし、他のすべてのブラウザでも手順は同じです。

ブラウザを使用して MyFileNewFile.html (または上記のチュートリアルで HTML ファイルに指定した名前) を開きます。
マウスを使用して温度値 26 を右クリックします。^oC をクリックし、「要素を検査」をクリックします。
「要素の検査」を選択した要素がブラウザで強調表示されていることに注目してください (デバッガーウィンドウは通常、画面の下部に表示されます)。
要素の横にある傾いた三角形をクリックして要素を開きます
編集したいものを選択してダブルクリックします。テキストを変更するオプションが表示されます。下のアニメーション画像の指示に従ってください。
HTML ページのコンテンツが変化していることに注目してください。ここでデバッグウィンドウを閉じても構いません。

変更はこのセッションでのみ保持されることに注意してください。ページをリロードまたは更新すると (F5 キーを押すと)、変更はすぐに元に戻ります。これは、実際の HTML ソースを変更したのではなく、ブラウザのローカル解釈を変更しただけであることを示します。

楽しい練習として、次のことをやってみてください。 www.facebook.com ブラウザでデバッガーツールを使用して次の結果を取得します。「Facebook をハッキングしました」と表示されることに注意してください。

その演習の結果は、以下のスクリーンショットのようになります。

ノードの読み取りと編集は静的ページを対象としています。インタラクティブページは、ユーザーの操作にも反応します。

DOM Events

DOM のイベントとは何ですか?

イベントは、ユーザーがトリガーした (またはブラウザーページのライフサイクルがトリガーした) インシデントがメッセージとしてブロードキャストされるプログラミングモデルです。たとえば、ページの読み込みが完了すると window.load イベントがトリガーされ、同様にユーザーがボタンをクリックすると window.load イベントがトリガーされます。要素のクリックイベントがトリガーされます。

これらのメッセージは、何者かによって傍受される可能性があります。 Javaスクリプトコード、そして開発者定義アクション例えば、ウェブページ上の数値をユーザーがボタンをクリックしたときだけ更新したいとします。これは、以下のいずれかの方法で実現できます。

HTML要素のonclickイベントにアクションを割り当てる
addEventListener メソッドを使用してクリックイベントにアクションを割り当てる

方法1

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button onclick='onRefreshClick()'>Refresh</button>
    </section>
<script>
    	document.getElementById('tempValue').innerHTML = '26';

 function onRefreshClick(e) {
   document.getElementById('tempValue').innerHTML = '32';
}
			</script>
</body>
</html>

方法2

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button id='btnRefresh'>Refresh</button>
    </section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
    document.getElementById('btnRefresh').addEventListener('click', function(event) {
    document.getElementById('tempValue').innerHTML = '32' },false);
			</script>
</body>
</html>

DOM でのトラブルシューティング

旧APIに関する注記： 以下の2つの回答ではdocument.write()を使用していますが、それでも実行はされるものの、ページ読み込み後に呼び出すとドキュメントの内容が消去されてしまいます。console.log()またはinnerHTMLを使用することをお勧めします。

Q. 要素が存在するかどうかを確認するにはどうすればよいですか?

A. いずれかのセレクターを使用して要素を検索し、返された要素が null かどうかを確認してください。以下の例を参照してください –

if(document.getElementById("elementIDWhichIsNotPresentInDOM") === null)
{
    //do something
}

Q. TypeError が表示されます: document.getElementByID は関数ではありません…

A. メソッド名が API メソッドと正確に一致していることを確認してください。上の質問と同様に、これは getElementByID ではなく getElementById です。

Q.children と childNodes の違いは何ですか?

A. children メソッドは、呼び出し要素内のすべての要素のコレクションを取得します。返されるコレクションは HTMLCollection 型です。ただし、childNodes メソッドは、呼び出し要素内のすべてのノードのコレクションを取得します。次のスクリプトを例に追加して、違いを確認してください。

childNodes メソッドは 14 個の項目を返します

document.write("Using childNodes method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].childNodes.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].childNodes[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].childNodes.length);

Children メソッドは 7 つの項目だけを返しますが、

document.write("Using children method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].children.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].children[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].children.length);

Q. 「Uncaught TypeError: Cannot read property 'innerHTML' of unknown…」というメッセージが表示されます。

A. innerHTML プロパティを呼び出す HTMLElement のインスタンスが、初期宣言後に設定されていることを確認してください。このエラーは通常、次のシナリオで発生します。次のコードブロックでエラーを回避する方法を確認してください...

var element;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
element.innerHTML = '32';

var element = null;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
if(element != null)
{
    element.innerHTML = '32';
}

よくあるご質問

Shadow DOMは、コンポーネントに独自の独立したサブツリーを与えるブラウザの機能であり、スタイルやスクリプトが外部に漏れるのを防ぎます。Virtual DOMは、ReactやVueで使用されるライブラリ技術で、メモリ上のコピーの差分を比較することで、実際の更新を最小限に抑えます。

WebDriverはロケーターをブラウザに送信し、ブラウザは解析されたツリーを走査して一致する要素を見つけ、WebElementハンドルを返します。ロケーター id、name、CSSセレクタ、XPathなどは、同じノードに対する異なる検索ルールを記述するものです。

対象要素に一意のIDがある場合は、getElementByIdを使用してください。これは最も高速な検索方法で、1つのノードを返します。クラス、属性、または親子パスに基づいてマッチングを行う場合は、querySelectorまたはquerySelectorAllを使用してください。

それでも実行されますが、ブラウザはそれを推奨しません。ページが読み込まれた後に document.write() を呼び出すと、ドキュメント全体が置き換えられ、読み込み中に解析がブロックされます。console.log() を使用してください。 tracing、またはinnerHTMLを使用してコンテンツを挿入します。

DOMはページのコンテンツ（head、body、およびすべてのタグ）をモデル化します。ブラウザオブジェクトモデルは、ナビゲーター、画面、ロケーション、履歴など、ブラウザを取り巻く要素を網羅します。ウィンドウオブジェクトは、この2つが交わる部分です。

Internet Explorerは2022年にサポートが終了したため、開発者ツールは現在、 Microsoft Edgeワークフローは変更ありません。F12 キーを押すか、要素を右クリックして「検査」を選択し、開いたパネルでノードを編集します。

機械学習ツールは複数のノード属性を一度に評価するため、クラスやIDが変更されても、失敗するのではなく同じ要素を再照合します。自己修復型テストプラットフォームは、通常のDOMクエリの上にこの機能を構築しています。

副操縦士コメントからイベントリスナー、querySelectorチェーン、トラバーサルループのドラフトを作成し、一般的なパターンに基づいて信頼性の高いコードを生成します。ただし、この提案は実際のページでテストする必要があります。なぜなら、提案はあなたのマークアップを直接参照できないからです。

DOMとは何ですか Selenium WebDriverとは？構造と正式名称

DOMとは何ですか Selenium ウェブドライバー？

DOM 構造を理解する

基本的な HTML ページ

ブラウザの DOM パーサーにはどのように見えるのでしょうか?

body要素にどうやってアクセスするのでしょうか？

「ハローワールド」ってなんて言うの？

最終的に HTML ファイル全体は次のようになります。

DOM のコンポーネント Selenium

ウィンドウ

DOM の Window オブジェクトのプロパティ

Windowオブジェクトの便利なメソッド

ドキュメント

DOM のドキュメントオブジェクトのプロパティ

Document オブジェクトの便利なメソッド

素子

DOM の要素オブジェクトのプロパティ

要素オブジェクトの便利なメソッド

DOM でのデバッグ

DOM Events

DOM のイベントとは何ですか?

方法1

方法2

DOM でのトラブルシューティング

よくあるご質問

この投稿を要約すると次のようになります:

ニュースレターに登録する

DOMとは何ですか Selenium ウェブドライバー？

DOM 構造を理解する

基本的な HTML ページ

ブラウザの DOM パーサーにはどのように見えるのでしょうか?

body要素にどうやってアクセスするのでしょうか？

「ハローワールド」ってなんて言うの？

最終的に HTML ファイル全体は次のようになります。

DOM のコンポーネント Selenium

ウィンドウ

DOM の Window オブジェクトのプロパティ

Windowオブジェクトの便利なメソッド

関連記事

ドキュメント

DOM のドキュメント オブジェクトのプロパティ

Document オブジェクトの便利なメソッド

素子

DOM の要素オブジェクトのプロパティ

要素オブジェクトの便利なメソッド

DOM でのデバッグ

DOM Events

DOM のイベントとは何ですか?

方法1

方法2

DOM でのトラブルシューティング

よくあるご質問

この投稿を要約すると次のようになります:

ニュースレターに登録する

DOM のドキュメントオブジェクトのプロパティ