CloudWatch canary GUI Workflow Builder で使用する DOM セレクターまたは XPath を特定する方法を教えてください。

簡単な説明

GUI Workflow Builder でcanaryを作成するときに、間違った DOM 要素を選択した場合、次のエラーが発生する可能性があります。

• 「Error: Node is either not visible or not an HTMLElement.」
• 「No test result returned.Error: Navigation failed because browser has disconnected!」
• 「TimeoutError: Waiting for selector」
• 「TimeoutError: Waiting for XPath」

解決策

正しいセレクタータイプを決定する

GUI Workflow Builder には 5 つのアクションがあります。必要なセレクタータイプは、使用するアクションとランタイムバージョンによって異なります。

ランタイムバージョンは Node.js と Puppeteer を使用し、テキスト検証アクションは XPath セレクターを使用します。次のアクションは DOM セレクターを使用します。

• クリックする
• セレクターを確認する
• テキストを入力する
• ナビゲーションでクリックする

Python と Selenium WebDriver を使用するランタイムバージョンでは、すべてのアクションが XPath セレクターを使用します。

正しいセレクターを特定する

**DOM セレクター **

DOM に固有の属性を見つけるには:

1. 要素 (ボタン、入力フィールド、div、span、h1 など) の「コンテキスト 」 (右クリック) メニューを開きます。
2. **[要素を検査] ** (Mozilla Firefox) または ** [検査] ** (Google Chrome) を選択します。
3. エレメントの識別に使用できる固有の DOM 属性 (ID、クラス、名前など) に注意してください。

DOM に固有の属性がない場合は、次の方法のいずれかを使用して要素を検索してください。

• 子孫セレクターを使用して、指定されたパスまたは属性に基づいて要素を照合します。正確なパスを使用する必要があります。例えば、検索するには <div class='new' id='newId'> <a href="/test1">テスト 1 </a> <a href="/test2">テスト 2 </a> <a href="/test3">テスト 3 </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. 要素の「コンテキスト 」 (右クリック) メニューを開き、**[検査]**を選択します。
2. **[要素] **タブで、強調表示された行の「コンテキスト 」 (右クリック) メニューを開きます。
3. **[コピー] を選択し、[セレクターのコピー] **を選択します。

Firefox:

1. 要素の「コンテキスト 」(右クリック) メニューを開き、**[要素を検査]**を選択します。
2. **[Inspector]**タブで、強調表示された行の「コンテキスト」 (右クリック) メニューを開きます。
3. **[コピー]を選択し、[CSS セレクター]**を選択します。

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

**XPath セレクター **

インターネットブラウザの開発者モードを使用して、DOM 要素用の固有の XPath セレクターを入手してください。

Chrome:

1. 要素の「コンテキスト 」 (右クリック) メニューを開き、**[検査]**を選択します。
2. **[要素] **タブで、強調表示された行の「コンテキスト 」 (右クリック) メニューを開きます。
3. [コピー]を選択し、[XPath をコピー] を選択します。

Firefox:

1. 要素の「コンテキスト 」(右クリック) メニューを開き、**[要素を検査]**を選択します。
2. **[Inspector]**タブで、強調表示された行の「コンテキスト」 (右クリック) メニューを開きます。
3. [コピー] を選択し、次に** [XPath]**を選択します。

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

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

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

Chrome:

1. ブラウザの右上にある**[カスタマイズ]**を選択します。
2. **[その他のツール]オプションを展開し、[開発者ツール]**を選択します。
3. ブラウザで DevTools を開いた状態で、**[コンソールパネル]**を選択します。

Firefox:

1. ブラウザの右上にある**[メニューを開く]**を選択します。
2. [Web 開発者]を選択し、[Web コンソール]を選択します。
   注:Firefox の一部のバージョンでは、「ウェブデベロッパー」 メニューは「ツール」 メニューにあります。

**DOM セレクターのテスト **

ブラウザーコンソールで DOM セレクタークエリをテストする構文は、**document.querySelectorAll("[AttributeName='AttributeValue']")**です。例えば、**id='username'**を持つ div 要素がある場合は、次のパターンを使用します： document.querySelectorAll("[name='username']")。

**XPath セレクターをテストする **

ブラウザコンソールで XPath クエリをテストするための構文は、 $x("XPATH_QUERY")です。例えば、 id='welcome' を持つ div 要素に h1要素が含まれている場合は、次のパターンを使用します：$x (「//div\ [@id ='welcome'] //h1)。このパスをcanaryに追加する場合には、「//」 プレフィックスを省略してください。

新しいセレクターを CloudWatch canaryに追加する

1. CloudWatch コンソールを開きます。
2. **[Synthetics] に対して[Canaries]**を選択します。
3. **[Canaryを作成]**を選択します。
4. **[ブループリントを使用]を選択し、次に [GUI Workflow Builder] **を選択します。
5. GUI Workflow Builderの例を参照して、新しく作成したセレクターを使用するブループリントを完成させてください。