3月 7, 2021

Firebugを使用してSeleniumスクリプトを作成する方法–Selenium Tutorial#4

前のチュートリアルでは、Selenium IDEとその記録機能を使用して自動テストスクリプトを作成する方法を学びました。また、Selenium IDEの人口の多い機能についても説明しました。私たちは、Selenium IDEの最も重要な機能とコマンドを読者に抱くことを目指しました。

ちょうどリマインダー–これは無料のSeleniumトレーニングシリーズの私たちの4番目のチュート

Selenium IDEの記録モードを使用して自動化されたスクリプトを作成することに慣れてきたので、”Firebug”として知られる効果的なテストスクリプトを作成するのを支援する上で非常に重要な役割を果たす別のツールを先に進めてみましょう。 Firebugは、web要素とwebページのプロパティを検査するのに役立ちます。

このチュートリアルは、Firebugのインストールとその使いやすさで構成されています。P>

Firebugを使用したSeleniumスクリプト

このチュートリアルの内容は、Selenium IDEのコンテキストでのみ適用されるわけではないことに注意してくださ; むしろ、Selenium suiteのすべてのツールに適用できます。したがって、Selenium IDEの代わりに用語Seleniumを使用することをお勧めします。

このチュートリアルでは、Firebugアドオンを使用してSeleniumスクリプトを作成する方法を学びます。このプロセスでは、Firebugのインストール方法も学習します。

Firebugの概要

FirebugはMozilla Firefoxアドオンです。このツールは、webページ上のHTML、CSS、JavaScript要素を特定したり、より特定したりするのに役立ちます。これは、webページ上の要素を一意に識別するのに役立ちます。要素は、このチュートリアルの後半で説明するロケータタイプに基づいて一意に見つけることができます。Firebugをインストールするには？

理解を容易にするために、インストールプロセスを次の手順に分岐します。ステップ-1：Mozilla Firefoxブラウザを起動し、このFirebugアドオンダウンロードページに移動します。 URLは、Firefoxのアドオンのセクションに私たちを取ります。ステップ-2：webページにある「Firefoxに追加」ボタンをクリックします。同じことについては、次の図を参照してください。/p>

firebugをインストールします

ステップ-3: 「Firefoxに追加」ボタンをクリックするとすぐに、セキュリティ警告ボックスが表示され、「許可」ボタンをクリックします。ステップ-4：Firefoxが背景にアドオンをダウンロードし、進行状況バーが表示されます。ステップ-5：プロセスが完了するとすぐに、ソフトウェアのインストールウィンドウが表示されます。今すぐ”今すぐインストール”ボタンをクリックします。ステップ-6：インストールが完了するとすぐに、firebugが正常にインストールされたことを示すポップアップが表示されます。今、このポップアップを閉じることを選択します。ノート

: Selenium IDEとは異なり、firebugのインストールを反映するためにFirefoxを再起動する必要はありません。ステップ-7：firebugを起動するには、次のいずれかの方法を選択できます。

F12を押す
Firefoxウィンドウの右上隅にあるFirebugアイコンをクリッFirefoxのメニューバーをクリックしてください->Web Developer->firebug->Firebugを開きます。

ステップ8: これで、firebugはFirefoxウィンドウの下部に表示されます。

firebugをダウンロードしてインストールしたので、firebugを使用して作成するロケータの種類を先に進めましょう。

Firebugを使用したSeleniumスクリプトの作成

Selenium IDEとは異なり、Firebugでは、論理的で一貫性のあるテストスクリプトを形成するために複数のテストステ

私たちは進歩的なアプローチに従うと、ステップバイステップのプロセスを理解してみましょう。

シナリオ:

“https://accounts.google.com”を開きます。
アプリケーションのタイトルをアサート
無効なユーザー名と無効なパスワードを入力し、ログインに詳細を送信します。ステップ1-Firefoxを起動し、メニューバーからSelenium IDEを開きます。ステップ2-ベースURLテキストボックス内にテスト対象のアプリケーションのアドレス（”https://accounts.google.com”）を入力します。Firebug1を使用したSeleniumスクリプト
ステップ3–デフォルトでは、レコードボタンはオン状態になっています。記録モードを無効にするように、状態をオフに調整することを忘れないでください。記録モードがオンの状態の場合、ウェブブラウザとのやりとりが記録される可能性があります。ステップ4-Firefoxでテスト対象のアプリケーション（https://accounts.google.com）を開きます。ステップ5-WebブラウザでFirebugを起動します。Firebug4を使用したSeleniumスクリプト

ステップ6–エディタ内で空のテストステップを選択します。ステップ7-エディタペインにあるコマンドテキストボックスに「開く」と入力します。 “開く”コマンドは、webブラウザで指定されたURLを開きます。

推奨事項：コマンドテキストボックスにコマンドを入力しながら、ユーザーは自動選択の機能を活用したがって、ユーザーが一連の文字を入力するとすぐに、一致する候補が自動的に入力されます。

ユーザーは、コマンドテキストボックス内のドロップダウンをクリックして、Selenium IDEが提供するすべてのコマンドを表示することもできます。ステップ8-今、webブラウザ内のFirebugセクションに向かって動き、HTMLコードの”head”セクションを展開します。 HTMLタグ<><title>タグの値が必要です。Firebug7を使用したSeleniumスクリプト

この場合、「Sign in–Google Accounts」であるwebページのタイトルをコピーします。ステップ9-エディタ内で2番目の空のテストステップを選択します。ステップ10-エディタペインにあるコマンドテキストボックスに”assertTitle”と入力します。 “AssertTitle”コマンドは、現在のページタイトルを返し、指定されたタイトルと比較します。Firebug8を使用したSeleniumスクリプト

ステップ11–ステップ8でコピーしたタイトルを2番目のターゲットフィールドに貼り付けます。ステップ12–エディタペインで3番目の空のテストステップを選択します。

ステップ13–コマンドテキストボックスに”type”コマンドを入力します。 “Type”コマンドは、GUI上の指定されたweb要素に値を入力します。ステップ14-webブラウザに切り替え、ログインフォーム内の「電子メール」テキストボックスにマウスカーソルを移動し、右クリックを押します。P>

“Firebugで要素を検査する”オプションを選択します。 Firebugは、web要素の対応するHTMLコード、すなわち”Email Textbox”を自動的に強調表示することに注意してください。ステップ15-上の図のHTMLコードは、「Email」テキストボックスに属する個別のプロパティ属性を明示します。 Webページ上のweb要素を一意に識別する4つのプロパティ(ID、type、placeholder、およびname)があることに注意してください。したがって、web要素を識別するために1つまたは複数のプロパティを選択するのはユーザー次第です。

したがって、この場合、ロケータとしてIDを選択します。 ID値をコピーし、「Id=」で始まる3番目のテストステップのターゲットフィールドに貼り付けて、Idが「Email」であるweb要素を検索するSelenium IDEを示します。

（クリックすると拡大画像が表示されます）

Selenium IDEでは大文字と小文字が区別されるため、属性値ステップ16-検索ボタンをクリックして、選択したロケータがwebページ上の指定されたUI要素を検索して検索するかどうかを確認します。ステップ17-次のステップは、エディタペイン内の3番目のテストステップの値テキストボックスにテストデータを入力することです。値のテキストボックスに”InvalidEmailID”と入力します。ユーザーは、必要に応じてテストデータを変更することができます。ステップ18–エディタペインで4番目の空のテストステップを選択します。

ステップ19–コマンドテキストボックスに”type”コマンドを入力します。ステップ20-webブラウザに切り替えて、ログインフォーム内の「パスワード」テキストボックスにマウスカーソルを移動し、右クリックを押します。”Firebugで要素を検査する”オプションを選択します。

ステップ21-以下のHTMLコードは、「パスワード」テキストボックスに属する個別のプロパティ属性を明示します。 Webページ上のweb要素を一意に識別する4つのプロパティ(ID、type、placeholder、およびname)があることに注意してください。したがって、web要素を識別するために1つまたは複数のプロパティを選択するのはユーザー次第です。

したがって、この場合、ロケータとしてIDを選択します。 ID値をコピーし、”id=”の接頭辞を付けた第三のテストステップのターゲットフィールドに貼り付けます。ステップ22-検索ボタンをクリックして、ロケータタブがwebページ上の指定されたUI要素を検出して検索するかどうかを確認します。ステップ23-次のステップは、エディタペイン内の4番目のテストステップの値テキストボックスにテストデータを入力することです。値テキストボックスに”InvalidPassword”と入力します。ユーザーは、必要に応じてテストデータを変更することができます。ステップ24–エディタペインで5番目の空のテストステップを選択します。

ステップ25–コマンドテキストボックス内に”click”コマンドを入力します。 “Click”コマンドは、webページ内の指定されたweb要素をクリックします。ステップ26-webブラウザに切り替えて、ログインフォーム内の「サインイン」ボタンにマウスカーソルを移動し、右クリックを押します。”Firebugで要素を検査する”オプションを選択します。

ステップ27-以下のHTMLコードは、「サインイン」ボタンに属する個別のプロパティ属性を明示します。

ロケータとしてIDを選択します。 ID値をコピーし、”id=”の接頭辞を付けた第三のテストステップのターゲットフィールドに貼り付けます。ステップ28-検索ボタンをクリックして、選択したロケータがwebページ上の指定されたUI要素を見つけて検索するかどうかを確認します。

テストスクリプトはこれで完了です。完成したテストスクリプトを表示するには、次の図を参照してください。Firebug20を使用したSeleniumスクリプト

ステップ29–作成したテストスクリプトを再生し、前のチュートリアルで行ったのと同じ方法で保存します。

結論

このチュートリアルでは、さらに別のスクリプト作成ツール、またはスクリプト作成を支援するツールを紹介しました。

Firebugは驚くべきことに、webページ上のweb要素を見つける大きな可能性を秘めています。このため、ユーザーはツールの機能を活用して、効果的で効率的な自動化テストスクリプトを手動で作成できます。

次のチュートリアル#5:次のチュートリアルでは、Seleniumのさまざまなタイプのロケータと、テストスクリプトを構築するためのアクセシビリティ技術を見ていきます。その間、読者はFirebugを使用して自動化テストスクリプトの構築を開始することができます。