how locate elements chrome
これは、Seleniumオンライントレーニングシリーズのチュートリアル＃7です。このシリーズのすべてのSeleniumチュートリアルを確認したい場合は、確認してください。 このページ 。
前のチュートリアルでは、Seleniumのさまざまなタイプのロケーターと、テストスクリプトを作成するためのそれらのロケーティングメカニズムに光を当てようとしました。チュートリアルは主に、次のようなさまざまなロケータータイプの簡単な紹介で構成されていました。 ID、クラス、Xpath、リンクテキスト 、 CSSセレクター などとその識別。
次のチュートリアルに進むと、ロケーティング戦略の拡張機能を紹介する機会があります。したがって、 次のチュートリアル、 GoogleChromeとInternetExplorerでWeb要素を見つけるメカニズムを研究します。
インターネットユーザーベースが急速に成長しているという事実を私たち全員がよく知っているので、利害関係者とプログラマーは、ほとんどのブラウザーで動作する可能性が高いWebアプリケーションを構築しています。
したがって、WebアプリケーションがFirefoxをサポートしていないが、ChromeとInternetExplorerではうまく機能する状況を想像してみてください。
では、Seleniumを使用してこのようなアプリケーションをどのように自動化するのでしょうか。または、具体的には、ChromeとInternetExplorerでWeb要素をどのように検索しますか。したがって、答えはこのチュートリアルの先にあります。
ウェブサイトのペネトレーションテストの方法
学習内容：
GoogleChromeでのWeb要素の検索
GoogleChromeでの検索戦略を理解することから始めましょう。
FirefoxのFirebugのように、GoogleChromeには 独自の開発者ツール これは、Webページ上のWeb要素を識別および検索するために使用できます。 Firebugとは異なり、ユーザーは個別のプラグインをダウンロードまたはインストールする必要はありません。開発者ツールは、GoogleChromeに簡単にバンドルされています。
Chromeのデベロッパーツールを使用してウェブ要素を見つけるには、次の手順に従います。
ステップ1： 主なステップは、GoogleChromeの開発者ツールを起動することです。 F12を押してツールを起動します。ユーザーは以下の画面のようなものを見ることができます。
上のスクリーンショットでは、「要素」タブが強調表示されていることに注意してください。したがって、要素タブは、現在のWebページに属するすべてのHTMLプロパティを表示するタブです。起動時にデフォルトで開かれていない場合は、「要素」タブに移動します。
また、Webページ内の任意の場所を右クリックし、Firebugの検査と非常によく似た(要素の検査)を選択して、開発者ツールを起動することもできます。
ステップ2： 次のステップは、Webページ内で目的のオブジェクトを見つけることです。同じことを行う1つの方法は、目的のWeb要素を右クリックして検査することです。そのWeb要素に属するHTMLプロパティは、開発者ツールで強調表示されます。もう1つの方法は、HTMLプロパティにカーソルを合わせると、一致するWeb要素が強調表示されます。したがって、このようにして、ユーザーはID、クラス、リンクなどを見つけることができます。
開発者ツールでXpathを作成する
Xpathについては、前回のチュートリアルですでに説明しました。また、その作成戦略についても説明しました。ここでは、Chromeの開発者ツールで作成されたXPathの有効性を確認するためのディスカッションを行います。
ステップ1： 開発者ツールでXPathを作成するには、コンソールタブを開きます。
ステップ2： 作成したXpathを入力し、$ x（“ // input (@ id = ’Email’)”）で囲みます。
ステップ3： Enterキーを押すと、指定したXpathと一致するすべてのHTML要素が表示されます。この場合、一致するHTML要素は1つだけです。そのHTML要素にカーソルを合わせると、対応するWeb要素がWebページで強調表示されます。
このようにして、すべてのXpathを作成し、コンソール内でそれらの有効性を確認できます。
Web要素に対応するCSSに関連する情報は、Chromeの開発者ツール内にあります。以下のスクリーンショットを参照してください。
InternetExplorerでのWeb要素の検索
Google Chromeのように、 Internet Explorerには、独自の開発者ツールもあります これは、Webページ内のプロパティに基づいてWeb要素を識別するために使用できます。ユーザーは個別のプラグインをダウンロードまたはインストールする必要はありません。開発者ツールはInternetExplorerに簡単にバンドルされています。
IE Developerツールを使用してWeb要素を見つけるには、以下の手順に従います。
ステップ1： 主なステップは、IE開発者ツールを起動することです。 F12を押してツールを起動します。ユーザーは以下の画面のようなものを見ることができます。
上のスクリーンショットでは、「HTML」タブが強調表示されていることに注意してください。したがって、(HTML)タブは、現在のWebページに属するすべてのHTMLプロパティを表示するタブです。 (HTML)タブを展開して、現在のWebページに属するすべてのWeb要素のプロパティを表示します。
ステップ2： 次のステップは、Webページ内で目的のオブジェクトを見つけることです。これを行う1つの方法は、HTML要素を選択することで、一致するWeb要素が強調表示されます。したがって、このようにして、ユーザーはID、クラス、リンクなどを見つけることができます。以下のスクリーンショットで、対応するHTMLプロパティを選択するとすぐにEメールテキストボックスが強調表示されることを確認してください。
Web要素を見つける別の方法は、トップメニューにある(検索)ボタンをクリックし、Webページ内の目的のWeb要素をクリックすることです。その結果、対応するHTMLプロパティが強調表示されます。
したがって、開発者ツールを使用することにより、ユーザーはID、クラス、タグ名を検索し、Xpathを作成してWeb要素を見つけることができます。
Chromeの開発者ツールと同様に、IE開発者ツールにはCSS関連の情報を表示する別のセクションがあります。以下のスクリーンショットをご覧ください。
結論
このチュートリアルでは、GoogleChromeとInternetExplorer用のデベロッパーツールを使用して、基本的な要素検索戦略に光を当てます。
次のチュートリアル＃8 ： 次のチュートリアルに進むと、WebDriverという名前のより高度なツールを紹介できることをうれしく思います。 WebDriverは、最も魅力的な自動化テストツールの1つです。したがって、次のチュートリアル以降では、WebDriverとそのすべての要点を中心にディスカッションをルーティングしてベースにします。
推奨読書
- さまざまなタイプのWebDriverコマンドを使用してWeb要素の可視性を確認する– Seleniumチュートリアル＃14
- Selenium WebDriverの概要– Seleniumチュートリアル＃8
- SeleniumスクリプトのWeb要素を識別するためのCSSセレクターの使用方法– Seleniumチュートリアル＃6
- 効率的なSeleniumスクリプティングとトラブルシューティングシナリオ– Seleniumチュートリアル＃27
- ログを使用したSeleniumスクリプトのデバッグ（Log4jチュートリアル）– Seleniumチュートリアル＃26
- 30以上の最高のSeleniumチュートリアル：実際の例でSeleniumを学ぶ
- Cucumber Seleniumチュートリアル：Cucumber Java SeleniumWebDriverの統合
- Webページ上のドロップダウン要素を処理するためのSeleniumSelectクラスの使用– Seleniumチュートリアル＃13