Watir-web-elements
提供：Dev Guides
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イベントを起動します。
さて、次のように出力を表示するコードを実行しましょう-
コンボの使用
構文
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をテストするための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'
