how use firebug creating selenium scripts selenium tutorial 4
の中に 前のチュートリアル 、SeleniumIDEとその記録機能を使用して自動テストスクリプトを作成する方法を学びました。人口の多い人もめくりました SeleniumIDEの機能 。私たちは、SeleniumIDEの最も重要な機能とコマンドで読者を魅了することを目指しました。
念のため–これは無料の4番目のチュートリアルです Seleniumトレーニングシリーズ 。
Selenium IDEの記録モードを使用して自動スクリプトを作成することに慣れ、使用できるようになったので、「Firebug」と呼ばれる効果的なテストスクリプトの作成を支援する上で非常に重要な役割を果たす別のツールに進みましょう。 Firebugは、Web要素とWebページのプロパティを検査するのに役立ちます。
したがって、このチュートリアルはFirebugのインストールとその使いやすさで構成されています。
このチュートリアルの内容は、SeleniumIDEのコンテキストにのみ適用できるわけではないことに注意してください。むしろ、Seleniumスイートのすべてのツールに適用できます。したがって、SeleniumIDEの代わりにSeleniumという用語を使用することが望ましいでしょう。
このチュートリアルでは、Firebugアドオンを使用してSeleniumスクリプトを作成する方法を学びましょう。その過程で、Firebugのインストール方法も学びます。
学習内容:
Firebugの紹介
FirebugはMozillaFirefoxアドオンです。このツールは、Webページ上のHTML、CSS、およびJavaScript要素を識別したり、より具体的に検査したりするのに役立ちます。これは、Webページ上で要素を一意に識別するのに役立ちます。要素は、このチュートリアルの後半で説明するロケータータイプに基づいて一意に見つけることができます。
Firebugをインストールする方法は?
理解しやすいように、インストールプロセスを次の手順に分けます。
ステップ1: Mozilla Firefoxブラウザを起動し、これに移動します Firebugアドオンのダウンロードページ 。 URLはFirefoxアドオンセクションに移動します。
ステップ2: Webページにある「Firefoxに追加」ボタンをクリックします。同じことについては、次の図を参照してください。
ステップ-3: 「Firefoxに追加」ボタンをクリックするとすぐにセキュリティアラートボックスが表示されますので、今すぐ「許可」ボタンをクリックしてください。
ステップ-4: これで、Firefoxが背景にアドオンをダウンロードし、プログレスバーが表示されます。
ステップ-5: プロセスが完了するとすぐに、ソフトウェアのインストールウィンドウが表示されます。次に、「今すぐインストール」ボタンをクリックします。
ステップ-6: インストールが完了するとすぐに、firebugが正常にインストールされたことを示すポップアップが表示されます。次に、このポップアップを閉じることを選択します。
注意 :Selenium IDEとは異なり、Firebugのインストールを反映するためにFirefoxを再起動する必要はありません。
ステップ-7: Firebugを起動するために、次のいずれかの方法を選択できます。
- F12を押します
- Firefoxウィンドウの右上隅にあるFirebugアイコンをクリックします。
- Firefoxメニューバー-> Web Developer-> firebug-> OpenFirebugをクリックします。
ステップ-8 :Firefoxウィンドウの下部にFirebugが表示されるようになりました。
Firebugをダウンロードしてインストールしたので、firebugを使用して作成するロケーターのタイプに進みましょう。
Firebugを使用したSeleniumスクリプトの作成
Selenium IDEとは異なり、Firebugでは、複数のテストステップを追加して論理的で一貫性のあるテストスクリプトを作成することにより、自動テストスクリプトを手動で作成します。
プログレッシブアプローチに従い、プロセスを段階的に理解しましょう。
シナリオ:
- 「https://accounts.google.com」を開きます。
- アプリケーションのタイトルをアサートします
- 無効なユーザー名と無効なパスワードを入力し、詳細を送信してログインしてください。
ステップ1 - Firefoxを起動し、メニューバーからSeleniumIDEを開きます。
ステップ2 - [ベースURL]テキストボックスにテスト対象のアプリケーションのアドレス(「https://accounts.google.com」)を入力します。
ステップ3– デフォルトでは、録音ボタンはオン状態です。録音モードを無効にするために、オフ状態に調整することを忘れないでください。記録モードがオン状態の場合、Webブラウザとの対話が記録される可能性があることに注意してください。
ステップ4– Firefoxでテスト対象のアプリケーション(https://accounts.google.com)を開きます。
ステップ5– WebブラウザでFirebugを起動します。
ステップ6– エディタ内で空のテストステップを選択します。
ステップ7– エディタペインにあるコマンドテキストボックスに「open」と入力します。 「open」コマンドは、指定されたURLをWebブラウザで開きます。
推奨事項:コマンドテキストボックスにコマンドを入力している間、ユーザーは自動選択の機能を利用できます。したがって、ユーザーが一連の文字を入力するとすぐに、一致する候補が自動的に入力されます。
ユーザーは、コマンドテキストボックス内のドロップダウンをクリックして、SeleniumIDEが提供するすべてのコマンドを確認することもできます。
ステップ8– 次に、Webブラウザ内のFirebugセクションに向かって移動し、HTMLコードの「head」セクションを展開します。 HTMLタグに注目してください。したがって、Webページのタイトルをアサートするには、タグの値が必要になります。
この場合、「サインイン–Googleアカウント」であるWebページのタイトルをコピーします。
ステップ9– エディタ内で2番目の空のテストステップを選択します。
ステップ10– エディタペインにあるコマンドテキストボックスに「assertTitle」と入力します。 「assertTitle」コマンドは、現在のページタイトルを返し、指定されたタイトルと比較します。
ルーターのネットワークキーとは
ステップ11– 手順8でコピーしたタイトルを2番目の[ターゲット]フィールドに貼り付けます。
ステップ12– 次に、エディタペインで3番目の空のテストステップを選択します
ステップ13 - コマンドテキストボックスに「type」コマンドを入力します。 「type」コマンドは、指定されたWeb要素の値をGUIに入力します。
ステップ14– 次に、Webブラウザーに切り替え、マウスカーソルをログインフォーム内の[電子メール]テキストボックスに移動して、右クリックを押します。
「Firebugで要素を検査する」オプションを選択します。 Firebugは、Web要素に対応するHTMLコード(「Eメールテキストボックス」)を自動的に強調表示することに注意してください。
ステップ15– 上の図のHTMLコードは、「Eメール」テキストボックスに属する個別のプロパティ属性を示しています。 Webページ上のWeb要素を一意に識別する4つのプロパティ(ID、タイプ、プレースホルダー、および名前)があることに注意してください。したがって、Web要素を識別するために1つまたは複数のプロパティを選択するのはユーザーの責任です。
したがって、この場合、ロケーターとしてIDを選択します。 ID値をコピーし、接頭辞「id =」を付けた3番目のテストステップのターゲットフィールドに貼り付けて、SeleniumIDEがIDを「Email」として持つWeb要素を見つけることを示します。
(クリックすると拡大画像が表示されます)
Selenium IDEでは大文字と小文字が区別されるため、HTMLコードで表示されるのと同じように、属性値を慎重かつ正確に入力してください。
ステップ16– [検索]ボタンをクリックして、選択したロケーターがWebページ上の指定されたUI要素を検索して検索するかどうかを確認します。
ステップ17– 次のステップは、エディターペイン内の3番目のテストステップの[値]テキストボックスにテストデータを入力することです。 [値]テキストボックスに「InvalidEmailID」と入力します。ユーザーは、必要に応じてテストデータを変更できます。
ステップ18 - 次に、エディタペインで4番目の空のテストステップを選択します
ステップ19 - コマンドテキストボックスに「type」コマンドを入力します。
ステップ20– 次に、Webブラウザーに切り替え、マウスカーソルをログインフォーム内の[パスワード]テキストボックスに移動して、右クリックします。
「Firebugで要素を検査する」オプションを選択します。
ステップ21– 以下のHTMLコードは、「パスワード」テキストボックスに属する個別のプロパティ属性を示しています。 Webページ上のWeb要素を一意に識別する4つのプロパティ(ID、タイプ、プレースホルダー、および名前)があることに注意してください。したがって、Web要素を識別するために1つまたは複数のプロパティを選択するのはユーザーの責任です。
したがって、この場合、ロケーターとしてIDを選択します。 ID値をコピーして、接頭辞「id =」を付けた3番目のテストステップの[ターゲット]フィールドに貼り付けます。
(クリックすると拡大画像が表示されます)
ステップ22– [検索]ボタンをクリックして、タブ付きのロケーターがWebページ上の指定されたUI要素を検索して見つけるかどうかを確認します。
ステップ23– 次のステップは、エディターペイン内の4番目のテストステップの[値]テキストボックスにテストデータを入力することです。 [値]テキストボックスに「InvalidPassword」と入力します。ユーザーは、必要に応じてテストデータを変更できます。
ステップ24 - 次に、エディタペインで5番目の空のテストステップを選択します
ステップ25 - コマンドテキストボックスに「クリック」コマンドを入力します。 「クリック」コマンドは、Webページ内の指定されたWeb要素をクリックします。
ステップ26– 次に、Webブラウザーに切り替え、マウスカーソルをログインフォーム内の[サインイン]ボタンに移動して、右クリックを押します。
「Firebugで要素を検査する」オプションを選択します。
ステップ27– 以下のHTMLコードは、「サインイン」ボタンに属する個別のプロパティ属性を示しています。
ロケーターとしてIDを選択します。 ID値をコピーして、接頭辞「id =」を付けた3番目のテストステップの[ターゲット]フィールドに貼り付けます。
(クリックすると拡大画像が表示されます)
ステップ28– [検索]ボタンをクリックして、選択したロケーターがWebページ上の指定されたUI要素を検索して検索するかどうかを確認します。
これでテストスクリプトは完了です。完成したテストスクリプトを表示するには、次の図を参照してください。
ステップ29– 作成したテストスクリプトを再生し、前のチュートリアルで行ったのと同じ方法で保存します。
結論
このチュートリアルでは、さらに別のスクリプト作成ツール、つまりスクリプト作成を支援するツールを紹介しました。
Firebugは、驚くべきことに、Webページ上のWeb要素を見つける大きな可能性を秘めています。したがって、ユーザーはツールの機能を活用して、効果的かつ効率的な自動化テストスクリプトを手動で作成できます。
次のチュートリアル#5 : 次のチュートリアルに進むと、 Seleniumのさまざまなタイプのロケーターとテストスクリプトを構築するためのそれらのアクセシビリティ技術 。それまでの間、読者はFirebugを使用して自動化テストスクリプトの作成を開始できます。
HTML要素の検査やスクリプトの作成にFirebugを使用しましたか?便利だと思いますか? コメントであなたの経験を共有してください
推奨読書
- Seleniumスクリプトを作成するためのTestNGフレームワークの使用方法-TestNGSeleniumチュートリアル#12
- Cucumber Seleniumチュートリアル:Cucumber Java SeleniumWebDriverの統合
- Seleniumスクリプトを構築するためにChromeおよびIEブラウザーで要素を見つける方法– Seleniumチュートリアル#7
- ジェネリックとテストスイートの作成– Seleniumチュートリアル#22
- Selenium WebDriverの概要– Seleniumチュートリアル#8
- JenkinsとSeleniumWebDriverの統合:ステップバイステップのチュートリアル
- 初心者向けの詳細なEclipseチュートリアル
- 効率的なSeleniumスクリプティングとトラブルシューティングシナリオ– Seleniumチュートリアル#27