Web開発ツールを使用してHTML要素を特定することによるブラウザ自動化の準備

創業の背景

別の記事で、LogicMonitorを使用して合成トランザクションを実行する概念を紹介しました。 そのプロセスの明らかに重要なステップは、実際に自動化のスクリプトを作成することです。 適切な自動化ツールをすべてインストールできますが、実際のスクリプトをどのように開始しますか? この記事は、ブラウザー自動化スクリプトの開発に必要な準備の一部を説明するのに役立ちます。

ブラウザを選択してください

Webサイトを視覚的に検査し、自動化を実行するためのブラウザーを選択する必要があります。 ほとんどの顧客と同じブラウザを使用して自動サービステストを優先することは理にかなっていますが、一般的なブラウザでWebサイトの要素を視覚的に検査することで同じ結果を得ることができるはずです。

LogicMonitorを使用した合成トランザクションの実行に関する一連の記事で使用しているブラウザー自動化ツールであるSeleniumと互換性のあるブラウザーを検討してください。 Seleniumは、最も人気のあるブラウザーのいくつかにWebドライバーを提供します。

  1. Mozilla Firefox
  2. Google Chrome
  3. Microsoft Internet Explorer

FirefoxとChromeは一般的に同様にウェブサイトをレンダリングしますが、InternetExplorerは伝統的に外れ値です。 柔軟に対応できる場合は、FirefoxまたはChromeから始めることを検討してください。

適切なウェブサイトを選択してください

ブラウザの自動化のための最初のWebサイトの選択は、最良の選択ではない場合があります。 どうやってわかりますか? 最大の要因は、Webページ要素がXPathではなくIDまたはクラス名で簡単に識別できるかどうかです。 それがあなたにとって意味をなさないのなら、それは大丈夫です。 今のところ、Webサイトを選択しますが、読み続けると、自動化に最も役立つものではないことに気付く場合があることに注意してください。

レスポンシブウェブデザインを念頭に置いてください

最近の多くのWebサイトは、デスクトップ、ラップトップ、および携帯電話などのハンドヘルドデバイスに対応するために、さまざまな画面サイズに適応または応答するように設計されています。 時々、ウェブページの要素は、より小さな画面サイズに合うように自分自身を再配置します。 場合によっては、要素が完全に消えます! 要素を識別してブラウザのアクティビティを自動化する前に、ウィンドウサイズを覚えておく必要があります。

応答性をテストする50つの方法は、Webブラウザーのサイズを変更することです。 ほとんどの場合、レスポンシブデザインをトリガーするには、ブラウザのサイズを画面の幅のXNUMX%に変更するだけで十分です。 または、ブラウザのWeb開発ツールに既に精通している場合は、これらのオプションを使用して、他のデバイスの画面サイズをシミュレートできます。

Webページ要素の検索

チャレンジ

以下に示すログインフォームを検討してください。

視覚的には、ログインフォームを使用するために実行するアクションは明らかです。ユーザー名フィールドをクリックし、ユーザー名を入力し、パスワードフィールドをクリックし、パスワードを入力して、ログインボタンをクリックします。 考えずに、使用する必要のある要素を視覚的に見つけて、アクションを実行します。 プログラム的にはどうですか?

ソリューション

HTML要素はさまざまな方法で見つけることができ、そのうちのXNUMXつは次のとおりです。

  • ID
  • クラス名
  • Xpath

最新のブラウザの開発者ツールの利点のXNUMXつは、ID、クラス、xpathなどの詳細を確認するためにHTML要素を検査できることです。 検査プロセスはほとんど視覚的であるため、学習曲線は良好です。 HTML、CSS、またはJavaScriptの専門家である必要はありません。 次のユーザーフォームをもう一度検討してください。

デフォルトのマウス構成を想定すると、ユーザー名フィールドを右クリックしてコンテキストメニューを表示し、[要素の検査]メニューオプションを左クリックすることで、ユーザー名フィールドの検査を実行できます。 下の図を参照してください。

ユーザー名フィールドを調べると、Web開発ツールが自動的に開き、ユーザー名入力フィールドを表すHTMLが青色で強調表示されます。 今のところ、青色で強調表示されているセクションにのみ注意を向けます。 以下のスクリーンショットは、FirefoxのWeb開発ツールからのものです。

あなたが見るすべてを理解する必要はありません。 「id =」を探してください。 技術的にはクラス名(「class =」)とXpath(図示せず)を使用することもできますが、要素IDはHTMLで一意であるため、IDに優先順位を付けるのが最善です。 他の方法でHTML要素を見つけると、適切な要素を見つけるリスクまたは複雑さが増します。 パスワードボタンとログインボタンの両方について検査プロセスを繰り返し、可能な場合は両方のIDを取得します。

要素のアクションと待機時間を覚えておいてください

ボタンなどの一部のHTML要素はアクションをトリガーします。 たとえば、ログインボタンは通常、情報をWebサイトに送信し、ブラウザに別のページに移動させます。 この読み込み時間は決して瞬間的ではありません。 ブラウザの自動化中に考慮すべき少なくともいくつかの遅延があります。 これらの遅延がどこにあるかを覚えておいてください。

寛大である限り、時間をボールパークすることができます(すべてのネットワーク接続が等しいわけではないことを忘れないでください)。 また、ブラウザのWeb開発ツールを使用して、ページの読み込みがいつ終了するかを測定するオプションもあります。 ページに移動する前に、開発者ツールをネットワークセクションに開いておくようにしてください。 以下のスクリーンキャプチャは、単に柔軟性を示すために、Googleのホームページの読み込み時間の測定値を示しています。クロムの Firefoxではなく開発者ツール。

なぜ「終了」時間が6秒近くになるのか不思議に思うかもしれません。 Googleホームページは、実際には1秒以内に使用可能な状態になります。 ただし、ホームページは引き続き一部の背景データを転送します。 待ち続けると、終了測定値が6秒から、ほぼ5分、最大5分に更新されます。 5秒の待機時間で十分ですが、XNUMX分はそれをやり過ぎています。 これは、目視検査と人間の識別が行われる場所です
メントは重要です。

結論

この記事では、実証済みの自動化ツールであるSeleniumと、最も人気のあるスクリプト言語のXNUMXつであるPythonを使用して、LogicMonitor内で合成トランザクションを実行するというアイデアを拡張しました。 ブラウザ開発者ツールを使用してWebコンテンツを視覚的に検査およびナビゲートすることにより、厳密な手順の記録を超えた高度なブラウザ自動化の計画を開始できます。

ビジネスにブラウザの自動化を実装することは、困難で面倒なことである必要はありません。 LogicMonitorプロフェッショナルサービスチームには才能があり、挑戦に挑んでいます! 無料のLogicMonitorプロフェッショナルサービスのスコーピングコールについて質問するか、 無料試用