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 の一意の属性を検索するには、以下の手順を実行します。

  1. 要素 (ボタン、入力フィールド、div、span、h1 など) のコンテキストメニューを開きます (右クリック)。
  2. [Inspect element] (Mozilla Firefox) または [Inspect] (Google Chrome) を選択します。
  3. 要素の識別に使用する一意の 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:

  1. 要素のコンテキストメニューを開き (右クリック)、[Inspect] を選択します。
  2. [Elements] タブで、ハイライト表示された行のコンテキストメニューを開きます (右クリック)。
  3. [Copy] を選択し、[Copy selector] をクリックします。

Firefox:

  1. 要素のコンテキストメニューを開き (右クリック)、[Inspect Elements] を選択します。
  2. [Inspector] タブで、ハイライト表示された行のコンテキストメニューを開きます (右クリック)。
  3. [Copy] を選択し、[CSS Selector] をクリックします。

注意: HTML 文書内に複数のインスタンスのセレクターがある場合、Canary は、返された配列から最初の要素を選択します。display:none; CSS 属性を含む要素を選択しないでください。これらの要素は非表示で、セレクターが失敗する原因になります。

XPath セレクター

インターネットブラウザのデベロッパーモードを使用して、DOM 要素の一意の XPath セレクターを取得します。

Chrome:

  1. 要素のコンテキストメニューを開き (右クリック)、[Inspect] を選択します。
  2. [Elements] タブで、ハイライト表示された行のコンテキストメニューを開きます (右クリック)。
  3. [Copy] を選択してから、[Copy XPath] を選択します。

Firefox:

  1. 要素のコンテキストメニューを開き (右クリック)、[Inspect Elements] を選択します。
  2. [Inspector] タブで、ハイライト表示された行のコンテキストメニューを開きます (右クリック)。
  3. [Copy] を選択してから、[XPath] を選択します。

注: Canary にコピーした XPath セレクターを追加する前に、「//」プレフィックスを削除してください。Canary はデフォルトでコードに「//」プレフィックスを追加します。

新しいセレクターをテストし、正しいことを確認します

インターネットブラウザでコンソールモードを開く

Chrome:

  1. ブラウザの右上にある [Customize] を選択します。
  2. [More tools] オプションを展開してから、[Developer tools] を選択します。
  3. ブラウザで DevTools を開いた状態で、[Console] パネルを選択します。

Firefox:

  1. ブラウザの右上で、[Open menu] を選択します。
  2. [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 に新しいセレクターを追加する

  1. CloudWatch コンソールを開きます。
  2. [Synthetics] で [Canaries] を選択します。
  3. [Canary の作成] を選択します。
  4. [設計図を使用する] を選択し、[GUI ワークフロービルダー] をクリックします。
  5. GUI ワークフロービルダーの例を参照して、新しく作成したセレクターを使用する設計図を完成させます。
  6. </ol

この記事は役に立ちましたか?


請求に関するサポートまたは技術サポートが必要ですか?