Watir-概要

「Water」と発音されるWatir（RubyでのWebアプリケーションテスト）は、Rubyを使用して開発されたオープンソースツールであり、あらゆるプログラミング言語で開発されたアプリケーションに適したWebアプリケーションの自動化に役立ちます。 Watirのインストールをサポートするブラウザーは、Internet Explorer、Firefox、Chrome、Safari、およびEdgeです。 Watirは、インストール用のRubygemsとして入手できます。

Watirは指定されたブラウザに接続し、URLを開く、ボタンをクリックする、実際の人が行うようにテキストボックス内にデータを入力するという指示に従います。 Watirは、RSpec、Cucumberなどのテストフレームワークでのブラウザサポートに最もよく使用されます。

Watirの機能

Watirは、以下で説明するように、機能が豊富です-

ウェブ要素の場所-ブラウザ内にレンダリングされたウェブ要素を見つける方法はいくつかあります。主に使用されるのは、id、クラス、タグ名、カスタム属性、ラベルなどです。

スクリーンショットを撮る-Watirでは、必要に応じて行われたテストのスクリーンショットを撮ることができます。これは、中間テストを追跡するのに役立ちます。

ページのパフォーマンス-_performance.navigation、performance.timing、performance.memory、およびperformance.timeOrigin_などのプロパティを持つパフォーマンスオブジェクトを使用して、ページのパフォーマンスを簡単に測定できます。これらの詳細は、ブラウザに接続したときに取得されます。

ページオブジェクト-Watirのページオブジェクトは、クラスの形でコードを再利用するのに役立ちます。この機能を使用すると、コードを複製せずに管理しやすくすることなく、アプリを自動化できます。

ダウンロード-Watirを使用すると、UIまたはWebサイトのファイルダウンロードを簡単にテストできます。

アラート-Watirは、UIまたはWebサイトでアラートポップアップをテストするための使いやすいAPIを提供します。

ヘッドレステスト-ヘッドレステストを使用すると、ブラウザーを開かずにコマンドラインで詳細を取得できます。これは、コマンドラインでUIテストケースを実行するのに役立ちます。

Watirを使用する利点

Watirは次の利点を提供します-

Watirはオープンソースのツールであり、非常に使いやすいツールです。
WatirはRubyで開発されており、ブラウザーで動作するWebアプリケーションはすべて、watirを使用して簡単に自動化できます。
Watirではすべての最新ブラウザーがサポートされているため、テストが簡単です。
Watirには、ページパフォーマンス、アラート、iframeテスト、ブラウザーウィンドウのテスト、スクリーンショットの撮影などを行うためのライブラリが組み込まれています。

Watirの欠点

他のソフトウェアと同様に、Watirにも制限があります

WatirはRubyテストフレームワークでのみサポートされており、他のテストフレームワークでは使用できません。
Watirを使用したモバイルテストは強化されておらず、デスクトップブラウザーは、リアルタイムデバイスとして動作するのではなく、モバイルブラウザーのように動作するように模倣されています。

Watir-はじめに

Watir（RubyでのWebアプリケーションテスト）*は「Water」と発音され、Rubyを使用して開発されたオープンソースツールであり、アプリケーションの記述言語に関係なくWebアプリケーションの自動化に役立ちます。 Watirには、ブラウザとの対話、ページ要素の検索、スクリーンショットの取得、アラートの操作、ファイルのダウンロード、_window.open_ポップアップウィンドウ、ヘッドレステストなどに役立つAPIの豊富なセットが付属しています。

サポートされているブラウザは-

インターネットエクスプローラ
Firefox
クロム
サファリ
Edge

注-Watirは、インストール用のRubygems gemとして利用できます。

Watir Webdriverを使用して、WebサイトとUIアプリケーションをテストできます。 Watirはブラウザ関連のものに完全に焦点を合わせているため、次のような他のテストフレームワークとともにWatirを使用できます

RSpec
きゅうり

メインのテストコードはテストフレームワークを使用して記述され、ブラウザーとの対話はWatirの支援を受けて行われます。

Watirと共にテストフレームワークのフローは以下のとおりです-

Rubygems

RSpecまたはCucumberは、テストランナーとテストコードに関係しています。 WebサイトまたはUIのテストに関する詳細は、Watirを参照するページオブジェクトに分割できます。このオブジェクトでは、テストに使用するページロケーターを取得します。 Watirは、そのWebドライバーとともに、ブラウザーへの接続とテスト自動化の実行に役立ちます。

Watir-環境のセットアップ

Watirを使用するには、次をインストールする必要があります-

Rubyをインストールする
Watirをインストールする
ルビー鉱山（IDE）

WatirはRubyを使用してビルドされるため、Rubyとgem（Rubyのパッケージマネージャー）をインストールする必要があります。

WindowsでのRubyのインストール

WindowsにRubyをインストールするには、-https://rubyinstaller.org/downloads/にアクセスします

Rubyインストール

32ビットまたは64ビットのオペレーティングシステムに基づいてルビーバージョンをインストールします。ここで、スクリーンショットに示すように、強調表示されたものをインストールしました。ダウンロードしたら、指示に従って手順に従ってインストールします。

インストールが完了したら、以下に示すようにコマンドラインでバージョンを確認して、rubyがインストールされているかどうかを確認します-

C:\> ruby -v

Rubyが正常にインストールされている場合、以下に示すように出力を見ることができます-

Rubyインストール済み

インストールされているバージョンは2.6.3です。システムにRubyを正常にインストールしました。 Rubyインストールgemと一緒に、つまり rubyパッケージマネージャーもインストールされます。次のようにインストールされたgemのバージョンを確認できます-

Rubyパッケージマネージャー

WindowsにRubyとGemをインストールしました。

LinuxでのRubyインストール

LinuxにRubyをインストールするには、Linuxターミナルで次のコマンドを実行します-

wget -O ruby-install-0.6.0.tar.gz https://github.com/postmodern/ruby-install/archive/v0.6.0.tar.gz
tar -xzvf ruby-install-0.6.0.tar.gz
cd ruby-install-0.6.0/
sudo make install
ruby-install ruby 2.5.3

Mac用のRubyインストール

LinuxにRubyをインストールするには、Mac端末で以下のコマンドを実行します-

Xcodeをインストールする

xcode-select --install

HomeBrewをインストールする

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

rbenvをインストールする

brew install rbenv
rbenv init
touch ~/.bash_profile
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
source ~/.bash_profile
rbenv install 2.5.3
rbenv local 2.5.3

Watirのインストール

watirをインストールするコマンドは次のとおりです-

gem install watir

gemインストールwatir

次に、以下に示すように出力画面を観察することができます-

Watirのインストール

RubyMine IDE

RubyMine IDEを使用して、テストケースを作成および実行します。 RubyMine IDEの公式Webサイトはhttps://www.jetbrains.com/ruby/[www.jetbrains.com/ruby]です。

RubyMine IDE

RubyMineは、30日間の無料試用が可能な有料IDEです。無料試用ボタンをクリックしてダウンロードします。また、選択した他のIDEを使用してテストケースを作成することもできます。

無料試用ボタンをクリックすると、ダウンロードが開始されます。ダウンロードが完了したら、システムにインストールします。

RubyMineセットアップ

[次へ]をクリックして、インストールを続行します。インストールが完了したら、IDEを開くと、以下に示すようにプロジェクトを作成するように求められます-

RubyMineインストール済み

[新規プロジェクトの作成]をクリックし、プロジェクトの名前をWatirとして入力しました。これがIDEの表示です-

新しいプロジェクト

テストケースをwatir/フォルダーに書き込み、実行します。

Watir-ブラウザー用ドライバーのインストール

この章では、Watirを使用してプロジェクトをテストするために必要なブラウザードライバーをインストールします。 Watir 6より前は、ブラウザードライバーを使用するには_watir-webdriver_を含める必要がありました。 Watir 6のリリースでは、_watir-webdriver_はWatirパッケージの一部として利用でき、ユーザーは_watir-webdriver_を個別に追加する必要はありません。

Chrome、Firefox、Safariなどのブラウザーはデフォルトで使用可能であり、外部で追加する必要はありません。テスト中にブラウザーのドライバーが使用できないという問題が発生した場合は、以下の指示に従っていつでもダウンロードできます。

次のブラウザのドライバをインストールします-

ブラウザ用ドライバー-Chrome
ブラウザ用ドライバー-Firefox
ブラウザ用ドライバー-Edge
ブラウザ用ドライバー-Internet Explorer
ブラウザ用ドライバー-Safari

ブラウザ用ドライバー-Chrome

Chromeブラウザのドライバーを取得するには、-https://sites.google.com/a/chromium.org/chromedriver/downloadsにアクセスします。

ドライバーブラウザー

ブラウザのバージョンを確認し、それに応じてChromeドライバーをダウンロードします。クロムブラウザのバージョンを確認するには、次のようにします-

Chromeドライバー

[Google Chromeについて]をクリックすると、以下に示すようにChromeバージョンが表示されます-

Chromeバージョン

したがって、バージョンは74です。したがって、クロムドライバーバージョン74をダウンロードしてください。

Chromeドライバーのダウンロード

次に、オペレーティングシステムに応じてchromeドライバーをダウンロードします。 chromedriver_win32.zipをダウンロードします。これは、32ビットと64ビットの両方のマシンを対象としています。ダウンロードしたドライバーを使用する場合は、PATH変数のどこかに場所を追加します。

ブラウザ用ドライバー-Firefox

Firefoxドライバーの場合、次のスクリーンショットに示すように、https://github.com/mozilla/geckodriver/releasesにアクセスしてください-

Firefoxのダウンロード

オペレーティングシステムごとに、上記のようにドライバーをダウンロードします。ダウンロードしたドライバーを使用する場合は、PATH変数のどこかに場所を追加します。

ブラウザー用ドライバー-Edge

Firefoxドライバーの場合、次のスクリーンショットに示すように、https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/にアクセスしてください-

ドライバーブラウザーエッジ

あなたが持っているMicrosoft Edgeのバージョンをクリックしてください-

Microsoft Edge

[リリース]リンクをクリックすると、リダイレクトされます-

バージョン番号

ここでは、Windows用のダウンロードバージョンを見つけることができます。ダウンロードしたドライバーを使用する場合は、PATH変数のどこかに場所を追加します。

ブラウザ用ドライバー-Internet Explorer

Internet Explorer用のドライバーをインストールするには、以下に示すように-https://docs.seleniumhq.org/download/にアクセスします-

Internet Explorer

IEのダウンロードセクションの詳細はここに示されています-

ダウンロードセクション

OSごとに、32ビットまたは64ビットのWindows IEをダウンロードします。また、場所をPATH変数に追加して、ドライバーを使用します。

ブラウザ用ドライバー-Safari

safariバージョン10以降では、safariのドライバーを外部からダウンロードする必要はありません。 Watirのインストール時に、gemパッケージとともにダウンロードされます。

Watirをインストールすると、Chrome、Firefox、Internet Explorerのドライバーも利用できることに注意してください。ただし、問題に直面し、特定のバージョンをテストする必要がある場合は、ブラウザごとにそれらをダウンロードし、PATHの場所を更新して、アプリケーションのテストに使用できます。

Watir-ブラウザーの操作

デフォルトでは、ブラウザー名が指定されていない場合、Watirはchromeブラウザーを開きます。 Watirのインストールとともに、必要なブラウザードライバーがインストールされます。ブラウザーでの作業で問題が発生した場合は、ブラウザードライバーの章に示されているとおりにドライバーをインストールし、PATH変数の場所を更新します。

この章では、Watirを使用してブラウザーを開く方法を理解します。

Watirを使用してブラウザーを開く手順

IDE RubyMineを開き、新しいファイルtest1.rbを作成します

Watirを使用するブラウザー

IDE RubyMine

[OK]を選択し、以下に示すようにファイルパターンをrubyとしてクリックします-

ファイルパターン

[OK]をクリックしてファイルを作成します。

次に、以下に示すようにブラウザを開く簡単なコードを記述します-

test1.rb

require 'watir'
Watir::Browser.new

シンプルなコード

上記のように、IDEで強調表示されている[実行]ボタンをクリックします。実行をクリックすると、以下に示すようにブラウザが開きます-

実行ボタン

ブラウザは自動的に開閉します。 test1.rbにさらにコードを追加しましょう。

以下に示すように、ブラウザの名前を指定できます-

Chromeの例

require 'watir'
Watir::Browser.new :chrome

次に、テストケースでpage-urlを開きます。

例

require 'watir'
browser = Watir::Browser.new
browser.goto("https://www.google.com")

実行をクリックして、以下に示すように出力を確認します-

テストケース出力

同様に、Firefox、Safari、Internet Explorerブラウザを開くことができます。

Firefoxの例

require 'watir'
Watir::Browser.new :firefox

Firefoxの例

Internet Explorerの例

ワティールコード

require 'watir'
browser = Watir::Browser.new :ie
browser.goto("https://www.google.com")

エラーを表示する次のコードを実行すると表示されます-

Unable to find IEDriverServer. Please download the server from
(Selenium::WebDriver::Error::WebDriverError)

http://selenium-release.storage.googleapis.com/indexl and place it
somewhere on your PATH.

More info at
https://github.com/SeleniumHQ/selenium/wiki/InternetExplorerDriver.

これは、watirパッケージにInternetExplorerドライバーがないことを意味します。ここから同じものをダウンロードしました-https://docs.seleniumhq.org/download/とPATH変数を更新しました。

次に、もう一度実行して、Internet Explorerブラウザが次のように開くのを確認します-

Explorer Browser Opening

Safariブラウザーを開くWatirコード

require 'watir'
browser = Watir::Browser.new :safari
browser.goto("https://www.google.com")

Microsoft EdgeブラウザーへのWatirコード

require 'watir'
browser = Watir::Browser.new :edge
browser.goto("https://www.google.com")

Watir-Web要素

この章では、Watirでフォローする方法を説明します-

テキストボックスの使用
コンボの使用
ラジオボタンの使用
チェックボックスの使用
ボタンの使用
リンクの使用
Divでの作業

テキストボックスの使用

構文

browser.text_field id: 'firstname'//will get the reference of the textbox

ここでは、UIでテキストボックスを操作する方法を理解しようとします。

以下に示すように、Textboxlページを検討します-

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>

   <body>
      <script type = "text/javascript">
         function wsentered() {
            console.log("inside wsentered");
            var firstname = document.getElementById("firstname");
            if (firstname.value != "") {
               document.getElementById("displayfirstname").innerHTML =
                  "The name entered is : " + firstname.value;

               document.getElementById("displayfirstname").style.display = "";
            }
         }
      </script>

      <div id = "divfirstname">
         Enter First Name :
         <input type = "text" id = "firstname" name = "firstname" onchange = "wsentered()"/>
      </div>
      <br/>
      <br/>
      <div style = "display:none;" id = "displayfirstname"></div>
   </body>
</html>

対応する出力は以下のとおりです-

テキストボックスの操作

テキストボックスがあります。名前を入力すると、onchangeイベントが発生し、名前が下に表示されます。

ここで、テキストボックスを見つけて名前を入力し、onchangeイベントを発生させるコードを記述しましょう。

ワティアコード

require 'watir'
b = Watir::Browser.new :chrome
b.goto('http://localhost/uitesting/textboxl')
t = b.text_field id: 'firstname'
t.exists?
t.set 'Riya Kapoor'
t.value
t.fire_event('onchange')

私たちはChromeブラウザーを使用しており、pageurlを http：//localhost/uitesting/textboxl として指定しています。

goto apiブラウザーを使用すると、pageurlが開き、id：firstnameのtext_fieldが見つかります。それが存在する場合、値をRiya Kapoorとして設定し、fire_event apiを使用してonchangeイベントを起動します。

さて、次のように出力を表示するコードを実行しましょう-

TextBoxes Runの操作

TextBoxes出力の実行

コンボの使用

構文

browser.select_list id: 'months'//will get the reference of the dropdown

ここでテストするテストページを次に示します-

<html>
   <head>
      <title>Dropdown</title>
   </head>

   <body>
      <script type = "text/javascript">
         function wsselected() {
            var months = document.getElementById("months");

            if (months.value != "") {
               document.getElementById("displayselectedmonth").innerHTML =
                  "The month selected is : " + months.value;

               document.getElementById("displayselectedmonth").style.display = "";
            }
         }
      </script>
      <form name = "myform" method = "POST">
         <div>
            Month is :
            <select name = "months" id = "months" onchange = "wsselected()">
               <option value = "">Select Month</option>
               <option value = "Jan">January</option>
               <option value = "Feb">February</option>
               <option value = "Mar">March</option>
               <option value = "Apr">April</option>
               <option value = "May">May</option>
               <option value = "Jun">June</option>
               <option value = "Jul">July</option>
               <option value = "Aug">August</option>
               <option value = "Sept">September</option>
               <option value = "Oct">October</option>
               <option value = "Nov">November</option>
               <option value = "Dec">December</option>
            </select>
         </div>
         <br/>
         <br/>

         <div style = "display:none;" id = "displayselectedmonth">
         </div>
   </body>
</html>

出力

コンボの使用

ドロップダウンから月を選択すると、同じものが下に表示されます。

Watirを使用して同じことをテストしましょう。

コンボ選択用のWatirコード

require 'watir'
b = Watir::Browser.new :chrome
b.goto('http://localhost/uitesting/combosl')
t = b.select_list id: 'months'
t.exists?
t.select 'September'
t.selected_options
t.fire_event('onchange')

コンボを使用するには、b.select_list apiの後にドロップダウンのIDを使用してselect要素を見つける必要があります。ドロップダウンから値を選択するには、t.selectと必要な値を使用する必要があります。

実行時の出力は次のとおりです-

コンボ出力の操作

ラジオボタンの使用

構文

browser.radio value: 'female'
//will get the reference of the radio button with value “female”

ラジオボタンを操作するために使用するテストページを次に示します-

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>

   <body>
      <form name = "myform" method = "POST">
         <b>Select Gender?</b>
         <div>
            <br/>
            <input type = "radio" name = "gender" value = "male" checked> Male
            <br/>
            <input type = "radio" name = "gender" value = "female"> Female
            <br/>
         </div>
      </form>
   </body>

</html>

ラジオボタンの操作

Watirコードに示すように、値がFemaleのラジオボタンを選択します-

require 'watir'
b = Watir::Browser.new
b.goto('http://localhost/uitesting/radiobuttonl')
t = b.radio value: 'female'
t.exists?
t.set
b.screenshot.save 'radiobutton.png'

ラジオボタンを使用するには、ブラウザに選択している値を伝える必要があります。 b.radio value：” female”

また、スクリーンショットを撮って、radiobutton.pngとして保存します。同じものが下に表示されます-

ラジオボタン出力の操作

チェックボックスの使用

構文

browser. checkbox value: 'Train'
//will get the reference of the checkbox with value “Train”

ここにチェックボックスのテストページがあります-

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>

   <body>
      <form name = "myform" method = "POST">
         <b>How would you like to travel?</b>
         <div>
            <br>
            <input type = "checkbox" name = "option1" value = "Car"> Car<br>
            <input type = "checkbox" name = "option2" value = "Bus"> Bus<br>
            <input type = "checkbox" name = "option3" value = "Train"> Train<br>
            <input type = "checkbox" name = "option4" value = "Air"> Airways<br>
            <br>
         </div>
      </form>
   </body>

</html>

チェックボックスの使用

次に、以下に示すように、ブラウザでチェックボックスを見つけるためにWatirを使用します-

require 'watir'
b = Watir::Browser.new
b.goto('http://localhost/uitesting/checkboxl')
t = b.checkbox value: 'Train'
t.exists?
t.set
b.screenshot.save 'checkbox.png'

ブラウザーでチェックボックスを見つけるには、_b.checkbox_を選択する値と共に使用します。

チェックボックス出力の操作

ボタンの使用

構文

browser.button(:name => "btnsubmit").click
//will get the reference to the button element with has name “btnsubmit”

ここにボタンのテストページがあります-

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>

   <body>
      <script type = "text/javascript">
         function wsclick() {
            document.getElementById("buttondisplay").innerHTML = "Button is clicked";
            document.getElementById("buttondisplay").style.display = "";
         }
      </script>

      <form name = "myform" method = "POST">
         <div>
            <br>
            <input type = "button" id = "btnsubmit" name = "btnsubmit"
               value = "submit" onclick = "wsclick()"/>
            <br>
         </div>
      </form>
      <br/>

      <div style = "display:none;" id = "buttondisplay"></div>
   </body>

</html>

ボタンの操作

これは、指定されたページ上のボタンを見つけるためのコードです-

require 'watir'
b = Watir::Browser.new
b.goto('http://localhost/uitesting/buttonl')
b.button(:name => "btnsubmit").click
b.screenshot.save 'button.png'

これがスクリーンショットbutton.pngです

ボタン

リンクの使用

構文

browser.link text: 'Click Here'
//will get the reference to the a tag with text ‘Click Here’

次のテストページを使用してリンクをテストします-

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>
   <body>
      <br/>
      <br/>
      <a href = "https://www.google.com">Click Here</a>
      <br/>
   </body>
</html>

リンクの操作

リンクのテストに必要なWatirの詳細は以下のとおりです-

require 'watir'
b = Watir::Browser.new
b.goto('http://localhost/uitesting/linksl')
l = b.link text: 'Click Here'
l.click
b.screenshot.save 'links.png'

出力

リンク出力の操作

Divでの作業

構文

browser.div class: 'divtag'
//will get the reference to div with class “divtag”

divをテストできるテストページ。

<html>
   <head>
      <title>Testing UI using Watir</title>
      <style>
         .divtag {
            color: blue;
            font-size: 25px;
         }
      </style>
   </head>

   <body>
      <br/>
      <br/>
      <div class = "divtag"> UI Testing using Watir </div>
      <br/>
   </body>
</html>

出力

Divでの作業

divをテストするためのWatirコードはここに示されています-

require 'watir'
b = Watir::Browser.new
b.goto('http://localhost/uitesting/divl')
l = b.div class: 'divtag'
l.exists?
l.text
b.screenshot.save 'divtag.png'

出力

Div出力の操作

Watir-Web要素の特定

テスト用のWatirでは、要素を見つける必要があります。要素のID、クラス、またはテキストを使用して、さまざまな方法で要素を見つけることができます。

この章では、要素を見つけるさまざまな方法を示すいくつかの例を見ていきます。

要素のIDを使用する

テストページ

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>

   <body>
      <script type = "text/javascript">
         function wsentered() {
            console.log("inside wsentered");
            var firstname = document.getElementById("firstname");

            if (firstname.value != "") {
               document.getElementById("displayfirstname").innerHTML =
                  "The name entered is : " + firstname.value;

               document.getElementById("displayfirstname").style.display = "";
            }
         }
      </script>

      <div id = "divfirstname">
         Enter First Name :
         <input type = "text" id = "firstname" name = "firstname" onchange = "wsentered()"/>
      </div>
      <br/>
      <br/>
      <div style = "display:none;" id = "displayfirstname">
      </div>
   </body>
</html>

例

require 'watir'
b = Watir::Browser.new :chrome
b.goto('http://localhost/uitesting/textboxl')
t = b.text_field(id: 'firstname')//using the id of the textbox to locate the textbox
t.exists?
t.set 'Riya Kapoor'
b.screenshot.save 'textboxbefore.png'
t.value
t.fire_event('onchange')
b.screenshot.save 'textboxafter.png'

この例では、textbox要素のidを使用して、それを見つけて値を設定しています。

t = b.text_field(id: 'firstname')

出力

IDを使用

ID要素の使用

あなたがdiv、スパンまたは他のhtmlタグを見つける必要がある場合は、次のようにidを使用して同じことを行うことができます

div

browser.div(id: "divid")
browser.div(id:/divid/)

スパン用

browser.span(id: "spanid")
browser.span(id:/spanid/)

要素のNAMEを使用する

テストページ

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>

   <body>
      <script type = "text/javascript">
         function wsentered() {
            console.log("inside wsentered");
            var firstname = document.getElementById("firstname");

            if (firstname.value != "") {
               document.getElementById("displayfirstname").innerHTML =
                  "The name entered is : " + firstname.value;

               document.getElementById("displayfirstname").style.display = "";
            }
         }
      </script>

      <div id = "divfirstname">
         Enter First Name :
         <input type = "text" id = "firstname" name = "firstname" onchange = "wsentered()"/>
      </div>
      <br/>
      <br/>
      <div style = "display:none;" id = "displayfirstname">
      </div>
   </body>
</html>

例

require 'watir'
b = Watir::Browser.new :chrome
b.goto('http://localhost/uitesting/textboxl')
t = b.text_field(name: 'firstname')//name is used to locate the textbox element
t.exists?
t.set 'Riya Kapoor'
b.screenshot.save 'textboxbefore.png'
t.value
t.fire_event('onchange')
b.screenshot.save 'textboxafter.png'

出力

IDを使用

ID要素の使用

タグ名を使用する

以下に示すように、htmlタグを直接使用して、必要なhtml要素を見つけることができます。

div

browser.div(id: "divid")
browser.div(id:/divid/)

スパン用

browser.span(id: "spanid")
browser.span(id:/spanid/)

pタグの場合

browser.p(id: "ptag")
browser.p(id:/ptag/)

ボタン用

browser.button(id: "btnid")
browser.button(id:/btnid/)

クラス名を使用する

クラス名を使用して要素を見つけることができます。以下に示すように行うことができます-

div

browser.div(class: "divclassname")
browser.div(class:/divclassname/)

スパン用

browser.span(class: "spanclassname”)
browser.span(class:/spanclassname/)

pタグの場合

browser.p(class: "pclassname")
browser.p(class:/pclassname/)

ボタン用

browser.button(class: "btnclassname")
browser.button(class:/btnclassname/)

テキストボックス用

browser.text_field(class: 'txtclassname')
browser.text_field(class:/txtclassname/)

以下に示すように、複数のクラスを渡すこともできます-

div

browser.div(class: ["class1", "class2"])

テキストを使用する

これは、テキスト付きの要素を使用して要素を見つけるもう1つの方法です。たとえば-

browser.button(text: "button text")
browser.button(text:/button text/)

ラベルを使用する

以下に示すように、要素のラベルを使用してそれを見つけることができます-

browser.text_field(label: "text here"))
browser.text_field(label:/text here/))

データ属性の使用

htmlタグにデータ属性がある場合、以下に示すようにそれを使用して要素を見つけることができます-

たとえば、次のようにタグを見つけることができます-

<div data-type = "test1"></div>

次のようにdivを見つけることができます-

browser.div(data-type: 'test1'))
browser.div(data-type:/test1/))

カスタム属性を使用する

以下に示すように、カスタム属性を使用して要素を見つけることもできます-

html要素の例

<div itemprop = ”content”>
   ….
</div>

次のようにdivを見つけることができます-

browser.div(itemprop: ‘content'))
browser.div(itemprop:/content/))

可視属性を使用する

可視属性を使用する要素は、以下に示すように配置することができます-

browser.div(visible: true)
browser.div(visible: false)

Watir-iframeの使用

Watirは、iframeを操作するための使いやすい構文を提供します。

構文

browser.iframe(id: 'myiframe')
//will get the reference of the iframe where we want to input details.

iframeの処理方法を理解し、iframe内の要素を見つけるために、この章では例に取り組みます。

例

メイン

<html>
   <head>
      <title>Testing using Watir</title>
   </head>
   <body>
      <iframe src = "test1l" id = "myiframe" width = "500" height = "100"></iframe>
   </body>
</html>

テスト1

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>

   <body>
      <script type = "text/javascript">
         function wsentered() {
            console.log("inside wsentered");
            var firstname = document.getElementById("firstname");

            if (firstname.value != "") {
               document.getElementById("displayfirstname").innerHTML =
                  "The name entered is : " + firstname.value;

               document.getElementById("displayfirstname").style.display = "";
            }
         }
      </script>

      <div id = "divfirstname">
         Enter First Name :
         <input type = "text" id = "firstname" name = "firstname" onchange = "wsentered()"/>
      </div>
      <br/>
      <br/>
         <div style = "display:none;" id = "displayfirstname"></div>
   </body>
</html>

出力

iframe

上記の例では、エントリフォームはiframe内で定義されています。私たちがそれを見つけてフォームをテストするのに役立つWatirコードを以下に示します-

ワティアコード

require 'watir'
b = Watir::Browser.new :chrome
b.goto('http://localhost/uitesting/mainl')
t = b.iframe(id: 'myiframe').text_field
t.set 'Riya Kapoor'
b.screenshot.save 'iframetestbefore.png'
t.fire_event('onchange')
b.screenshot.save 'iframetestafter.png'

ここで指定されたURLでiframeを見つけるためのワティアコード-

t = b.iframe(id: 'myiframe').text_field

上記のように、iframeのタグ名とiframeのIDを使用しました。

上記のコードのスクリーンショットを以下に示します-

iframetestbefore.png

IDを使用

iframetestafter.png

ID要素の使用

Watir-自動待機

この章では、待機を詳細に理解しましょう。自動待機を理解するために、簡単なテストページを作成しました。ユーザーがtextbox onchangeイベントにテキストを入力すると、3秒後にボタンが有効になります。

Watirには、特定のイベントまたはプロパティを待機する_wait_unit_ api呼び出しがあります。以下に示すように、テストページについても同じテストを行います-

構文

browser.button(id: 'btnsubmit').wait_until(&:enabled?)
//here the wait is on the button with id : btnsubmit to be enabled.

testwaitl

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>

   <body>
      <script type = "text/javascript">
         function wsentered() {
            setTimeout(function() {
            document.getElementById("btnsubmit").disabled = false; }, 3000);
         }
         function wsformsubmitted() {
            document.getElementById("showmessage").style.display = "";
         }
      </script>

      <div id = "divfirstname">
         Enter First Name :
         <input type = "text" id = "firstname" name = "firstname" onchange = "wsentered()"/>
      </div>
      <br/>
      <br/>
      <button id = "btnsubmit" disabled onclick = "wsformsubmitted();">Submit</button>
      <br/<
      <br/<

      <div id = "showmessage" style = "display:none;color:green;font-size:25px;"&gtl;
         Button is clicked
      </div>
   </body>
</html>

出力

自動待機

テキストボックスにテキストを入力すると、ボタンが有効になるまで3秒間待つ必要があります。

自動待機

[送信]ボタンをクリックすると、次のテキストが表示されます-

送信ボタン

ボタンを有効にするための遅延が追加されたため、自動化がこのようなケースを処理することは困難です。何らかの遅延がある場合、または特定のイベントやプロパティのプロパティで待機する必要がある場合は、以下に示すようにwait_untilを使用できます-

wait_untilを使用したWatirコード

require 'watir'
b = Watir::Browser.new :chrome
b.goto('http://localhost/uitesting/testwaitl')
t = b.text_field(name: 'firstname')
t.exists?
t.set 'Riya Kapoor'
b.screenshot.save 'waittestbefore.png'
t.value
t.fire_event('onchange')
btn = b.button(id: 'btnsubmit').wait_until(&:enabled?)
btn.fire_event('onclick');
b.screenshot.save 'waittestafter.png'

次に、次のコマンドを使用します

btn = b.button(id: 'btnsubmit').wait_until(&:enabled?)

Watirは、ボタンが有効になるのを待ち、後でクリックイベントが発生するのを待ちます。キャプチャされたスクリーンショットは以下に示されています-

Waittestbefore.png

Waittestbefore

waittestafter.png

waittestafter

Watir-ヘッドレステスト

この章では、Watir Webdriverのヘッドレスオプションを使用してページURLをテストする方法を学習します。

構文

Browser = Watir::Browser.new :chrome, headless: true

私たちがテストしようとしているテストページはここに示されています-

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>

   <body>
      <script type = "text/javascript">
         function wsentered() {
            console.log("inside wsentered");
            var firstname = document.getElementById("firstname");

            if (firstname.value != "") {
               document.getElementById("displayfirstname").innerHTML =
                  "The name entered is : " + firstname.value;

               document.getElementById("displayfirstname").style.display = "";
            }
         }
      </script>

      <div id = "divfirstname">
         Enter First Name : <input type = "text" id = "firstname" name = "firstname" onchange = "wsentered()"/>
      </div>
      <br/>
      <br/>
      <div style = "display:none;" id = "displayfirstname"></div>
   </body>
</html>

出力

ID要素の使用

Watirコード

require 'watir'
b = Watir::Browser.new :chrome, headless: true
b.goto('http://localhost/uitesting/textboxl')
t = b.text_field(name: 'firstname')
t.exists?
t.set 'Riya Kapoor'
t.value
t.fire_event('onchange')
b.screenshot.save 'headless.png'

Watir chromeブラウザにオプション_headless_：trueを追加しました。あなたがRubyプログラムを実行するとき、それはブラウザを開かず、すべてがコマンドラインで実行されます-

DevTools listening on ws://127.0.0.1:53973/devtools/browser/b4127866-afb8-4c74-b967-5bacb3354b19
[0505/144843.905:INFO:CONSOLE(8)] "inside wsentered", source: http://localhost/uitesting/textboxl (8)

console.logメッセージを追加し、コマンドラインに同じメッセージを出力しました。

headless.pngのスクリーンショットを以下に示します-

ID要素の使用

Firefoxでは

Firefoxのwatirコードはここに示されています-

require 'watir'
b = Watir::Browser.new :firefox, headless: true
b.goto('http://localhost/uitesting/textboxl')
t = b.text_field(name: 'firstname')
t.exists?
t.set 'Riya Kapoor'
t.value
t.fire_event('onchange')
b.screenshot.save 'headlessfirefox.png'

headlessfirefox.pngのスクリーンショットを次に示します-

ID要素の使用

Watir-モバイルテスト

モバイルテストでは、テスト用のデバイスブラウザーとして機能するデスクトップブラウザーを使用します。この章でその手順を理解しましょう。

モバイルブラウザでアプリをテストするには、webdriver-user-agentをインストールする必要があります。

webdriver-user-agentのインストール

gem install webdriver-user-agent

Webdriverのインストール

さて、以下の例に示すように、Webdriver useragentを使用します-

例

require 'watir'
require 'webdriver-user-agent'
driver = Webdriver::UserAgent.driver(browser: :chrome, agent: :iphone, orientation: :landscape)
browser = Watir::Browser.new driver
browser.goto 'https://facebook.com'
puts "#{browser.url}"
puts browser.url == 'https://m.facebook.com/'

facebook.comのURLを指定しました。あなたがそれを実行すると、以下に示すように、ユーザーエージェントに基づいて、モバイルモードで開きます-

Facebook

次に、ポートレートモードで試してみましょう。この目的のために次のコードを使用します-

require 'watir'
require 'webdriver-user-agent'
driver = Webdriver::UserAgent.driver(browser: :chrome, agent: :iphone, orientation: :portrait)
browser = Watir::Browser.new driver
browser.goto 'https://facebook.com'
puts "#{browser.url}"
puts browser.url == 'https://m.facebook.com/'

ポートレートモードでの出力は以下のとおりです-

ポートレートモード

Watir-スクリーンショットのキャプチャ

スクリーンショットをキャプチャする機能は、Watirで利用できる興味深い機能の1つです。テストの自動化中に、スクリーンショットを取得して画面を保存できます。ケースでは、エラーが発生した場合、スクリーンショットの助けを借りて同じことが文書化できます。

スクリーンショットを撮ったテストページと一緒の簡単な例を以下に説明します-

構文

browser.screenshot.save 'nameofimage.png'

テストページ

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>

   <body>
      <script type = "text/javascript">
         function wsentered() {
            console.log("inside wsentered");
            var firstname = document.getElementById("firstname");

            if (firstname.value != "") {
               document.getElementById("displayfirstname").innerHTML =
                  "The name entered is : " + firstname.value;

               document.getElementById("displayfirstname").style.display = "";
            }
         }
      </script>
      <div id = "divfirstname">
         Enter First Name :
         <input type = "text" id = "firstname" name = "firstname" onchange = "wsentered()"/>
      </div>
      <br/>
      <br/>
      <div style = "display:none;" id = "displayfirstname"></div>
   </body>
</html>

例

require 'watir'
b = Watir::Browser.new :chrome
b.goto('http://localhost/uitesting/textboxl')
t = b.text_field(id: 'firstname')//using the id of the textbox to locate the textbox
t.exists?
t.set 'Riya Kapoor'
b.screenshot.save 'textboxbefore.png'
t.value
t.fire_event('onchange')
b.screenshot.save 'textboxafter.png'

Watirを使用して撮影したスクリーンショットを次に示します-

textboxbefore.png

IDを使用

textboxafter.png

ID要素の使用

Watir-ページオブジェクト

Watirのページオブジェクトは、クラスの形式でコードを再利用するのに役立ちます。ページオブジェクト機能を使用すると、コードを複製することなくアプリを自動化でき、コードを管理しやすくすることもできます。

テスト時には、テストするページごとにページオブジェクトを作成できます。次に、ページオブジェクトを使用してメソッドとプロパティにアクセスします。

ページオブジェクトを使用する背後にある理由-

変更の変更時にページに変更が加えられた場合、コードを書き直す必要はありません。
コードの冗長性を回避するため。

Watirでページオブジェクトを使用するには、RSpecを使用します。 RSpecに慣れていない場合のために、link：/rspec/index [RSpec]で利用できる完全なチュートリアルを以下に示します。

私たちがテストを実行しようとしているページはここに与えられています-

テキストボックス

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>

   <body>
      <script type = "text/javascript">
         function wsentered() {
            console.log("inside wsentered");
            var firstname = document.getElementById("firstname");

            if (firstname.value != "") {
               document.getElementById("displayfirstname").innerHTML =
                  "The name entered is : " + firstname.value;

               document.getElementById("displayfirstname").style.display = "";
            }
         }
      </script>

      <div id = "divfirstname">
         Enter First Name :
         <input type = "text" id = "firstname" name = "firstname" onchange = "wsentered()"/>
      </div>
      <br/>
      <br/>
      <div style = "display:none;" id = "displayfirstname"></div>
   </body>
</html>

出力

テキストボックスでの作業出力の実行

以下に示すように、上記のページのページオブジェクトを作成します-

pageobjecttest.rb

class InitializeBrowser
   def initialize(browser)
      @browser = browser
   end
end

class TestPage lt; InitializeBrowser
   def textbox
      @textbox = TestTextbox.new(@browser)
   end
   def close
      @browser.screenshot.save 'usingpageobject.png'
      @browser.close
   end
end # TestPage

class TestTextbox < InitializeBrowser
   URL = "http://localhost/uitesting/textboxl"

   def open
      @browser.goto URL
      self
   end
   def enterdata_as(name)
      name_field.set name
      name_field.fire_event('onchange')
   end

private
   def name_field
      @browser.text_field(:id > "firstname")
   end
end # TestTextbox

定義された3つのクラスがあります-InitializeBrowser、TestPageおよびTestTextbox-

InitializeBrowser -これは開かれたブラウザを初期化し、ブラウザオブジェクトをTestPageおよびTestTextboxクラスと共有します。
TestPage -このクラスにはTestTextboxへのオブジェクト参照があり、スクリーンショットをキャプチャしてブラウザを閉じるメソッドが含まれています。
TestTextbox -このクラスには、ページのURLを開き、テキストフィールドへの参照を与え、データを設定し、onchangeイベントを発生させるメソッドがあります。

上記のコードを実行すると、次のように出力を確認できます-

ID要素の使用

Watir-ページパフォーマンス

Watir Pageのパフォーマンス機能を使用すると、応答時間のメトリックを追跡でき、Chrome、Firefox、IE9以降で正常に機能します。現在、Safariブラウザはサポートされていません。

この機能の使用方法を詳しく見てみましょう。それを利用するには、下に示すようにgemを使用してwatir-performanceをインストールする必要があります-

コマンド

gem install watir-performance

Watirパフォーマンス

watir-performanceのインストールが完了しました。サポートされているメトリックは次のとおりです-

概要
ナビゲーション
記憶
タイミング

watir-performanceを使用した実際の例をここで説明します。ここでは、サイトの応答時間を確認します-以下に示すようにlink：/index [www.finddevguides.com]-

require 'watir'
require 'watir-performance'
10.times do
   b = Watir::Browser.new :chrome
   b.goto 'https://www.finddevguides.com'
   load_secs = b.performance.summary[:response_time]/1000
   puts "Load Time: #{load_secs} seconds."
   b.close
end

出力

Load Time: 7 seconds.
Load Time: 7 seconds.
Load Time: 5 seconds.
Load Time: 5 seconds.
Load Time: 6 seconds.
Load Time: 5 seconds.
Load Time: 5 seconds.
Load Time: 13 seconds.
Load Time: 12 seconds.
Load Time: 5 seconds.

performance.timingを使用する

require 'watir'
require 'watir-performance'

b = Watir::Browser.new :chrome
b.goto 'https://www.finddevguides.com'
load_secs = b.performance.timing[:response_end] - b.performance.timing[:response_start]
puts "Time taken to respond is #{load_secs} seconds."
b.close

出力

Time taken to respond is 41 seconds.

performance.navigationを使用する

require 'watir'
require 'watir-performance'

b = Watir::Browser.new :chrome
b.goto 'https://www.finddevguides.com'
perf_nav = b.performance.navigation
puts "#{perf_nav}"
b.close

出力

{:type_back_forward=>2, :type_navigate=>0, :type_reload=>1,
:type_reserved=>255, :redirect_count=>0, :to_json=>{}, :type=>0}

performance.memoryを使用する

require 'watir'
require 'watir-performance'

b = Watir::Browser.new :chrome
b.goto 'https://www.finddevguides.com'
memory_used = b.performance.memory
puts "#{memory_used}"
b.close

出力

{:js_heap_size_limit=>2, :type_navigate=>0, :type_reload=>1, :ty2136997888,
:total_js_heap_size=>2, :type_navigate=>0, :type_reload=>1, :ty12990756,
:used_js_heap_size=>2, :type_navigate=>0, :type_reload=>1, :ty7127092}

Watir-クッキー

この章では、Watirを使用してCookieを操作する方法を学習します。

ここでは、指定されたURLのCookieを取得する簡単な例を説明します。

クッキーを取得する構文

browser.cookies.to_a

例

require 'watir'

b = Watir::Browser.new :chrome
b.goto 'https://www.finddevguides.com'
puts b.cookies.to_a

出力

{:name=>"_gat_gtag_UA_232293_6", :value=>"1", :path=>"/",
:domain=>".finddevguides.com", :expires=>2019-05-03 08:33:58 +0000,
:secure=>false}

{:name=>"_gid", :value=&gt "GA1.2.282573155.1556872379", :path=>"/",
:domain=>".finddevguides.com", :expires=>2019-05-04 08:32:57 +0000,
:secure=>false}

{:name=>"_ga", :value=>"GA1.2.2087825339.1556872379", :path=>"/",
:domain=>".finddevguides.com", :expires=>
2021-05-02 08:32:57 +0000, :secure=>false}

次に、以下に示すようにクッキーを追加しましょう-

クッキーを追加する構文

browser.cookies.add 'cookiename', 'cookievalue', path: '/', expires:
(Time.now + 10000), secure: true

例

require 'watir'
b = Watir::Browser.new :chrome
b.goto 'https://www.finddevguides.com'
puts b.cookies.to_a
b.cookies.add 'cookie1', 'testing_cookie', path: '/', expires:
(Time.now + 10000), secure: true
puts b.cookies.to_a

クッキーを追加する前の出力

{:name=>"_gat_gtag_UA_232293_6", :value=>"1", :path=>"/",
:domain=>".finddevguides.com", :expires=>2019-05-03 08:44:23 +0000,
:secure=>false}

{:name=>"_gid", :value=>"GA1.2.1541488984.1556873004",
:path=>"/", :domain=>".finddevguides.com",
:expires=>2019-05-04 08:43:24 +0000, :secure=>false}

{:name=>"_ga", :value=>"GA1.2.1236163943.1556873004",
:path=>"/", :domain=>".finddevguides.com",
:expires=>2021-05-02 08:43:24 +0000, :secure=>false}

Cookieを追加した後の出力

{:name=>"_gat_gtag_UA_232293_6", :value=>"1", :path=>"/",
:domain=>".finddevguides.com", :expires=>2019-05-03 08:44:23 +0000,
:secure=>false}

{:name=>"_gid", :value=>"GA1.2.1541488984.1556873004",
:path=>"/", :domain=>".finddevguides.com",
:expires=>2019-05-04 08:43:24 +0000, :secure=>false}

{:name=>"_ga", :value=>"GA1.2.1236163943.1556873004",
:path=>"/", :domain=>".finddevguides.com",
:expires=>2021-05-02 08:43:24 +0000, :secure=>false}

{:name=>"cookie1", :value=>"testing_cookie", :path=>"/",
:domain=>"www.finddevguides.com", :expires=>2039-04-28 08:43:35 +0000,
:secure=>true}

最後のものは、watirを使用して追加したものです。

クッキーを消す

構文

browser.cookies.clear

例

require 'watir'

b = Watir::Browser.new :chrome
b.goto 'https://www.finddevguides.com'
puts b.cookies.to_a
b.cookies.clear
puts b.cookies.to_a

出力

{:name=>"_gat_gtag_UA_232293_6", :value=>"1", :path=>"/",
:domain=>".finddevguides.com", :expires=>2019-05-03 08:48:29 +0000,
:secure=>false}

{:name=>"_gid", :value=>"GA1.2.1264249563.1556873251",
:path=>"/", :domain=>".finddevguides.com",
:expires=>2019-05-04 08:47:30 +0000, :secure=>false}

{:name=>"_ga", :value=>"GA1.2.1001488637.1556873251",
:path=>"/", :domain=>".finddevguides.com",
:expires=>2021-05-02 08:47:30 +0000, :secure=>false

Empty response ie a blank line will get printed after cookie.clear is called.

特定のCookieを削除する

構文

browser.cookies.delete 'nameofthecookie'

例

require 'watir'
b = Watir::Browser.new :chrome
b.goto 'https://www.finddevguides.com'
puts b.cookies.to_a
puts b.cookies.delete "_ga"
puts b.cookies.to_a

出力

All cookies:
{:name=>"_gat_gtag_UA_232293_6", :value=>"1", :path=>"/",
:domain=>".finddevguides.com", :expires=>2019-05-03 08:52:38 +0000,
:secure=>false}

{:name=>"_gid", :value=>"GA1.2.1385195240.1556873499",
:path=>"/", :domain=>".finddevguides.com",
:expires=>2019-05-04 08:51:37 +0000, :secure=>false}

{:name=>"_ga", :value=>"GA1.2.1383421835.1556873499",
:path=>"/", :domain=>".finddevguides.com",
:expires=>2021-05-02 08:51:37 +0000, :secure=>false}

After delete cookie with name _ga
{:name=>"_gat_gtag_UA_232293_6",
:value=>"1", :path=>"/", :domain=>".finddevguides.com",
:expires=>2019-05-03 08:52:38 +0000, :secure=>false}

{:name=>"_gid", :value=>"GA1.2.1385195240.1556873499",
:path=>"/", :domain=>".finddevguides.com",
:expires=>2019-05-04 08:51:37 +0000, :secure=>false}

Watir-プロキシ

Watirでは、ブラウザで使用する必要があるプロキシオブジェクトの助けを借りてプロキシを使用できます。

構文

proxy = {
   http: '127.0.0.1:8080',
   ssl: '127.0.0.1:8080'
}
b = Watir::Browser.new :chrome, proxy: proxy

Chromeブラウザでプロキシを使用する方法の例を以下に示します-

例

require "watir"
proxy = {
   http: '127.0.0.1:8080',
   ssl: '127.0.0.1:8080'
}
b = Watir::Browser.new :chrome, proxy: proxy
b.goto 'google.com'
b.screenshot.save 'proxy.png'

以下に示すようにプロキシオブジェクトを使用しました-

proxy = {
   http: '127.0.0.1:8080',
   ssl: '127.0.0.1:8080'
}

プロキシアドレスの詳細は、httpとsslの両方に使用されます。以下に示すように、Chromeブラウザでプロキシを使用できます-

b = Watir::Browser.new :chrome, proxy: proxy

出力proxy.pngは以下に示されています-

出力プロキシ

Firefoxブラウザでプロキシを使用する方法の例については、以下で説明します-

例

require "watir"
proxy = {
   http: '127.0.0.1:8080',
   ssl: '127.0.0.1:8080'
}
b = Watir::Browser.new :firefox, proxy: proxy
b.goto 'google.com'
b.screenshot.save 'proxyfirefox.png'

以下に示すように、プロキシの詳細を追加できます-

proxy = {
   http: '127.0.0.1:8080',
   ssl: '127.0.0.1:8080'
}
b = Watir::Browser.new :firefox, proxy: proxy

出力proxyfirefox.pngはここに示されています-

出力プロキシ

Watir-アラート

この章では、Watirを使用してアラートを処理する方法を理解します。

構文

browser.alert.exists?
browser.alert.ok
browser.alert.close

テストページ

<html>
   <head>
      <title>Testing Alerts Using Watir</title>
   </head>

   <body>
      <script type = "text/javascript">
         function wsformsubmitted() {
            alert("Button is Clicked !");
         }
      </script>
      <button id = "btnsubmit" onclick = "wsformsubmitted();">Submit</button>
   </body>
</html>

ワティアコード

require 'watir'
b = Watir::Browser.new :chrome
b.goto('http://localhost/uitesting/testalertl')
b.button(id: 'btnsubmit').click
b.alert.ok
b.screenshot.save 'alerttest.png'

出力alerttest.pngはここに示されています-

アラートテスト

Watir-ダウンロード

UIまたはWebサイトには、pdfまたはドキュメントをダウンロードするボタンまたはリンクがあります。ブラウザにいくつかの設定を与えることで、Watirで使用するためにそれをテストできます。

ダウンロードの構文-

prefs = {
   'download' => {
      'default_directory' => "C:/download",
      'prompt_for_download' => false,
   }
}
b = Watir::Browser.new :chrome, options: {prefs: prefs}

prefsのダウンロードでは、ダウンロード後にファイルを保存するパスを指定する必要があり、上記の構文に示すオプションを使用してブラウザに同じパスを指定する必要があります。

実行例をここに示します。ここでは、ボタンを含むテストページを作成しました。クリックすると、以下に示すようにfile.txtというファイルがダウンロードされます-

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>

   <body>
      <br/>
      <br/>
      <button id = "btnsubmit">
         <a href = "file.txt" download>Click to Download!</a>
      </button>
      <br/>
   </body>
</html>

file.txt

This is for testing watir download

出力

Watirのテスト

ダウンロードボタンをクリックすると、ファイルがダウンロードされます。

次に、Watirを使用して同じことをテストしましょう-

require 'watir'
prefs = {
   'download' => {
      'default_directory' => "C:/download",
      'prompt_for_download' => false,
   }
}
b = Watir::Browser.new :chrome, options: {prefs: prefs}
b.goto('http://localhost/uitesting/filedownloadl')
b.button(id: 'btnsubmit').click
b.screenshot.save 'testdownload.png'

ダウンロードしたファイルを保存するために指定したパスは「C：/download」です。上記のコードを実行すると、次のようにダウンロードパスにファイルがダウンロードされます-

ダウンロードパス

出力testdownload.pngは次のようになります-

testdownload

Watir-ブラウザウィンドウ

ポップアップウィンドウを使用するか、新しいブラウザウィンドウを開く必要がある場合があります。この章では、Watirを使用してこのようなケースをテストする方法について説明します。

構文

browser.window

私たちがテストしようとしている実際の例はここに与えられています-

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>

   <body>
      <script type = "text/javascript">
         function wsclick() {
            var myWindow = window.open(
               "https://www.google.com/", "mywindow", "width = 1000,height = 500");
         }
      </script>

      <form name = "myform" method = "POST">
         <div>
            <br>
            <input type = "button" id = "btnsubmit" name = "btnsubmit" value = "submit" onclick = "wsclick()"/>
            <br>
         </div>
      </form>
      <br/>
   </body>
</html>

出力

ブラウザウィンドウ

[ウィンドウを開く]ボタンをクリックすると、ポップアップウィンドウが開きます。ここで、指定したURLはhttps://www.google.com/[www.google.com]です。次に、Watir/

例

require 'watir'
b = Watir::Browser.new :chrome
b.goto('http://localhost/uitesting/windowpopupl')
b.button(id: 'btnsubmit').click
b.window(title: 'Google').use do
   b.screenshot.save 'popupwindow.png'
   t = b.text_field(class: 'gLFyf')
   t.set 'Watir'
   b.screenshot.save 'popupwindowbefore.png'
   b.button(name: 'btnK').click
   b.screenshot.save 'popupwindowafter.png'
end

私たちが撮ったスクリーンショットは以下のとおりです-

Watir-quick-guide

Watir-概要

Watirの機能

Watirを使用する利点

Watirの欠点

Watir-はじめに

Watir-環境のセットアップ

WindowsでのRubyのインストール

LinuxでのRubyインストール

Mac用のRubyインストール

Xcodeをインストールする

HomeBrewをインストールする

rbenvをインストールする

Watirのインストール

RubyMine IDE

Watir-ブラウザー用ドライバーのインストール

ブラウザ用ドライバー-Chrome

ブラウザ用ドライバー-Firefox

ブラウザー用ドライバー-Edge

ブラウザ用ドライバー-Internet Explorer

ブラウザ用ドライバー-Safari

Watir-ブラウザーの操作

Watirを使用してブラウザーを開く手順

test1.rb

Chromeの例

例

Firefoxの例

Internet Explorerの例

Safariブラウザーを開くWatirコード

Microsoft EdgeブラウザーへのWatirコード

Watir-Web要素

テキストボックスの使用

構文

ワティアコード

コンボの使用

構文

出力

コンボ選択用のWatirコード

ラジオボタンの使用

構文

チェックボックスの使用

構文

ボタンの使用

構文

リンクの使用

構文

出力

Divでの作業

構文

出力

出力

Watir-Web要素の特定

要素のIDを使用する

テストページ

例

出力

div

スパン用

要素のNAMEを使用する

テストページ

例

出力

タグ名を使用する

div

スパン用

pタグの場合

ボタン用

クラス名を使用する

div

スパン用

pタグの場合

ボタン用

テキストボックス用

div

テキストを使用する

ラベルを使用する

データ属性の使用

カスタム属性を使用する

html要素の例

可視属性を使用する