Top > WEBページを自動操作する > チェックボックスを操作する

チェックボックスを操作する

チェックボックスのON/OFFを変更します。チェックボックスとは以下のようにレ点を付けたり外したりする箱のことです。Yahoo路線情報を題材に解説します。

WEB上のチェックボックスのイメージ

目次
1:チェックボックスのIDを確認する
2:チェックボックスを変更する
3:稼働確認

1:チェックボックスのIDを確認する

Yahoo路線情報の「手段」のチェックボックス「路線/連絡バス」をONにする方法、およびOFFにする方法を解説します。ブラウザで対象のサイトを開き、F12ボタンを押して下さい。以後、Chromeでの操作方法を説明します。

連絡/路線バスのチェックボックスを操作する方法

ブラウザ画面の右側に小難しそうな画面が開きます。画面上側の矢印ボタンをクリックした後、「路線/連絡バス」のチェックボックスをクリックして下さい。

F12キーでチェックボックスを解析

画面右側にHTML(プログラムコード)が表示され、一部分がハイライトされます(背景に色が付きます)。チェックボックスの場合、ハイライトされた「路線/連絡バス」の文字の前にある「INPUT」タグの文字列を解析します。

検証ツールでチェックボックスの情報を解析

INPUTタグの文字を抜き出すと以下の通りです。

<input type="checkbox" name="lb" id="bus" value="1" checked data-raipd_p = "28">
<label for="bus">路線/連絡バス</label>

路線/連絡バスチェックボックスの名前に当たる「id=xxxxx」または「name=xxxxx」を探します。事例では「id="bus"」という記述が存在します。よって「bus」が路線/連絡バスのチェックボックスの名前(ID)です。
「ID=xxxxx」がない場合は、「name=xxxxx」を探して下さい。両方存在する場合はどちらか一方を控えて下さい。逆に、両方共に存在しない場合、X Pathを利用します。X Pathを理解するをご参照下さい。

2:チェックボックスを変更する

路線/連絡バスのチェックボックスを変更する(ONまたはOFFにする)方法を解説します。まずWorkFusion Studioを起動し、Yahoo路線情報をブラウザで開くところまで作りこみます。
ブラウザでURLを開く設定は「URLを指定してページを開く」をご参照下さい。

チェックボックスを制御する方法

マウスクリックを追加します。
1:画面左側のメニューから「マウス → マウスクリック」を選択し、「ウェブサイトを開く」の上までドラッグして下さい(「ウェブサイトを開く」の背景色が変わるまでドラッグして下さい)。
2:ドラッグした「マウスをクリック」をクリックして下さい。画面の右側に入力項目が表示されます。
3:入力項目に値をセットし、どのチェックボックスを選択するのか指定します。

マウスクリックの追加

1:ターゲット
ウェブの要素」を選択します。すると「要素を次の条件で検索」という項目が表示されますので、「X Path」を選択して下さい。難しい言葉ばかりですが、分かりやすく書くと「ブラウザの中(ウェブの要素)をクリックして。クリックする位置はX Pathで教えるね。」という設定です。
X Pathの下のテキストボックスに //*[@id="bus"] と入力して下さい。idはF12ボタンで調査した路線/連絡バスのチェックボックスの名前(ID)です。
2:設定
チェックボックスのON/OFFを設定するマウスの動きを指定します。ボタンは「左のボタン」を、タイプは「シングルクリック」を選択して下さい。「教えた位置(X Path)でマウスの左ボタンを1回押してね」という意味です。
3:詳細
最高1000ミリ秒(=1秒)まで待機するよう、「1000」を指定します。

ここで注意!
チェックボックスがONになるのか、OFFになるのかは画面を開いた時の状態によって異なります。画面を開いた際、対象のチェックボックスがOFFであれば、マウスクリックを自動化することでチェックONになります。逆に、画面を開いた際にチェックボックスがONの状態であれば、マウスクリックによってチェックOFFに変わります。

3:稼働確認

入力を完了しましたら、稼働確認します。画面中央上部にある「レコーディングを再生」ボタンを押して下さい。なおボタンを押すと変更情報(レコーディング)が自動的に保存されます。

レコーディングの稼働確認

しばらくすると画面右下に以下のようなウィンドウが表示されます。何もせずにお待ち下さい。起動に少々時間がかかります。

レコーディング稼働中のイメージ

さらにしばらくするとブラウザが自動的に起動し、Yahoo路線情報が表示されます。また路線/連絡バスのチェックボックスがONになります。なお、変わった後すぐにブラウザが自動的に閉じます。見逃さないようご注意下さい。

Yahoo経路情報のテキストボックスに文字を自動入力したイメージ