CloudWatch Canary の GUI ワークフロービルダーで使用する DOM セレクターまたは XPath を特定する方法を教えてください。
最終更新日: 2020 年 12 月 14 日
GUI ワークフロービルダーを使用して Amazon CloudWatch で Canary を作成しようとしています。しかし、私は間違った DOM 要素を選択したことを示すエラーを受け取っています。使用する正しい DOM セレクターまたは XPath を見つける方法を教えてください。
簡単な説明
GUI ワークフロービルダーで Canary を作成するときに間違った DOM 要素を選択すると、次のエラーが発生する可能性があります。
- 「エラー: ノードが表示されていないか、HTMLElement ではありません」
- 「テスト結果が返されませんでした。エラー: ブラウザが切断されたため、ナビゲーションに失敗しました!」
- 「TimeoutError: セレクターを待っています」
- 「TimeoutError: XPath を待っています」
解決方法
正しいセレクタータイプを決定する
GUI ワークフロービルダーには、5 つのアクションがあります。必要なセレクターの種類は、使用するアクションとランタイムバージョンによって異なります。
Node.js と Puppeteer を使用するランタイムバージョンでは、テキスト検証アクションは XPath セレクターを使用します。以下のアクションは DOM セレクターを使用します。
- クリック
- セレクターを検証
- テキストを入力
- ナビゲーションでクリック
Python と Selenium Webdriver を使用するランタイムバージョンの場合、すべてのアクションは XPath セレクターを使用します。
正しいセレクターを特定
DOM セレクター
DOM の一意の属性を検索するには、以下の手順を実行します。
- 要素 (ボタン、入力フィールド、div、span、h1 など) のコンテキストメニューを開きます (右クリック)。
- [Inspect element] (Mozilla Firefox) または [Inspect] (Google Chrome) を選択します。
- 要素の識別に使用する一意の DOM 属性 (ID、クラス、名前など) を書き留めます。
DOM に一意の属性がない場合は、次のいずれかの方法を使用して要素を見つけます。
- 子孫セレクターを使用して、指定されたパスまたは属性に基づいて要素を一致させます (正確なパスを使用する必要があります)。例えば、<div class='new' id='newId'> <a href="/test1">test1</a> <a href="/test2">test2</a> <a href="/test3">test3</a> </div> を検索するには、div.new > a:first-child を使用します。
- 属性セレクターを使用して、特定の属性の存在または値に基づいて要素を一致させます。例えば、<div class="user-panel main" id="userId"> <input name="login"/> </div> を検索するには、div.user-panel.main input[name='login'] を使用します。
インターネットブラウザのデベロッパーモードを使用して、DOM 要素のためのユニークな DOM セレクターを取得することもできます。
Chrome:
- 要素のコンテキストメニューを開き (右クリック)、[Inspect] を選択します。
- [Elements] タブで、ハイライト表示された行のコンテキストメニューを開きます (右クリック)。
- [Copy] を選択し、[Copy selector] をクリックします。
Firefox:
- 要素のコンテキストメニューを開き (右クリック)、[Inspect Elements] を選択します。
- [Inspector] タブで、ハイライト表示された行のコンテキストメニューを開きます (右クリック)。
- [Copy] を選択し、[CSS Selector] をクリックします。
注意: HTML 文書内に複数のインスタンスのセレクターがある場合、Canary は、返された配列から最初の要素を選択します。display:none; CSS 属性を含む要素を選択しないでください。これらの要素は非表示で、セレクターが失敗する原因になります。
XPath セレクター
インターネットブラウザのデベロッパーモードを使用して、DOM 要素の一意の XPath セレクターを取得します。
Chrome:
- 要素のコンテキストメニューを開き (右クリック)、[Inspect] を選択します。
- [Elements] タブで、ハイライト表示された行のコンテキストメニューを開きます (右クリック)。
- [Copy] を選択してから、[Copy XPath] を選択します。
Firefox:
- 要素のコンテキストメニューを開き (右クリック)、[Inspect Elements] を選択します。
- [Inspector] タブで、ハイライト表示された行のコンテキストメニューを開きます (右クリック)。
- [Copy] を選択してから、[XPath] を選択します。
注: Canary にコピーした XPath セレクターを追加する前に、「//」プレフィックスを削除してください。Canary はデフォルトでコードに「//」プレフィックスを追加します。
新しいセレクターをテストし、正しいことを確認します
インターネットブラウザでコンソールモードを開く
Chrome:
- ブラウザの右上にある [Customize] を選択します。
- [More tools] オプションを展開してから、[Developer tools] を選択します。
- ブラウザで DevTools を開いた状態で、[Console] パネルを選択します。
Firefox:
- ブラウザの右上で、[Open menu] を選択します。
- [Web Developer] を選択してから、[Web Console] をクリックします。
注: Firefox の一部のバージョンでは、[Web Developer] は [Tools] メニューにあります。
DOM セレクターをテストする
ブラウザコンソールで DOM セレクタークエリをテストするための構文は、document.querySelectorAll("[AttributeName='AttributeValue']") です。例えば、id='username' を持つ div 要素がある場合、document.querySelectorAll("[name='username']") というパターンを使用します。
XPath セレクターをテストする
ブラウザコンソールで XPath クエリをテストするための構文は、$x("XPATH_QUERY") です。例えば、h1 要素を含む id='welcome' を持った div 要素がある場合、$x("//div[@id='welcome']//h1) のパターンを使用します。このパスを Canary に追加する場合は、// プレフィックスを省略します。
CloudWatch Canary に新しいセレクターを追加する
- CloudWatch コンソールを開きます。
- [Synthetics] で [Canaries] を選択します。
- [Canary の作成] を選択します。
- [設計図を使用する] を選択し、[GUI ワークフロービルダー] をクリックします。
- GUI ワークフロービルダーの例を参照して、新しく作成したセレクターを使用する設計図を完成させます。 </ol