Top > WEBページを自動操作する > WEB上のボタンを押す

WEB上のボタンを押す

指定したボタンを自動的に押します。ボタンとは以下の画像のように何か処理を実行するために押す部材を意味します。Yahoo路線情報を題材に解説します。

WEB上のボタンの説明

目次
1:ボタンのIDを確認する
2:指定したボタンを押す
3:ENTERボタンを押す
4:稼働確認

1:ボタンのIDを確認する

対象画面上に複数のボタンがあるかもしれません。例えばYahoo路線情報の場合、画面上に「検索」ボタンが複数存在します。よって、押したいボタンの名前(ID)を調べます。
ブラウザで対象のサイトを開き、F12ボタンを押して下さい。以後、Chromeでの操作方法を説明します。

F12キーを押して検証ツールを起動する

ブラウザ画面の右側に小難しそうな画面が開きます。画面上側の矢印ボタンをクリックした後、対象のプルダウンメニュー(箱)をクリックして下さい。

検証ツールでボタンの情報を確認する方法

画面右側にHTML(プログラムコード)が表示され、一部分がハイライトされます(背景に色が付きます)。ハイライトされた部分から「ID=xxxxx」または「name=xxxxx」という記述を探し出します。「xxxxx」はページや場所によって異なります。この「xxxxx」がボタンを特定する名前(ID)です。

検証ツールでボタンの情報を表示

Yahoo路線情報の事例の場合、ハイライトされた部分の文字列は以下です。「ID=xxxxx」が存在します。「xxxxx」の部分に該当する「searchModuleSubmit」がボタンの名前(ID)です。

<input type="submit" value="検索" id="searchModuleSubmit" data-rapid_p="30">

「ID=xxxxx」がない場合は、「name=xxxxx」を探して下さい。両方存在する場合はどちらか一方を控えて下さい。逆に、両方共に存在しない場合、X Pathを利用します。X Pathを理解するをご参照下さい。

2:指定したボタンを押す

WorkFusion Studioを起動し、ブラウザで対象画面を開くところまで設定して下さい。
ブラウザでURLを開く設定は「URLを指定してページを開く」をご参照下さい。

ボタンを制御する方法

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

マウスクリックの追加

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

ENTERボタンを押す

検索ボタンのあるWEB画面の多くでは、パソコンのENTERボタンを押すと検索ボタンを押した場合と同じ動作となります。よって、ENTERボタンを押す方法を解説します。
ENTERボタンを押す方法は、先に説明したIDを指定してボタンを押す方法よりも簡単かつミスの少ない方法です。

ENTERボタンで検索ボタンを代替する方法

WorkFusion Studioを起動し、ブラウザで対象画面を開くところまで設定して下さい。その後、「キーストロークを入力」を追加します。
1:画面左側のメニューから「キーボード → キーストロークを入力」を選択し、画面中央付近までドラッグして下さい。
2:ドラッグした画面中央の「キーストロークを入力」をクリックして下さい。画面右側に入力項目が表示されます。
3:入力項目に値をセットし、ENTERボタンを押す挙動を指定します。

キーストロークの追加方法

1:キーストロークを入力
Key combination」を選択して下さい。
2:入力-押すキー
変更ボタンを押して下さい。「キーストロークを編集」ダイアログが表示されます。画面上でキーボードのENTERボタンを1回押して下さい。成功すると画面内の詳細の部分に{{ENTER}}と表示されます。成功を確認しましたら保存ボタンを押して下さい。

キーストロークの追加方法

詳細の部分に{{ENTER}}以外の文字の表示されている場合は失敗です。もう一度「ENTER」ボタンを押し直して下さい。
3:詳細
最高1000ミリ秒(=1秒)まで待機するよう、「1000」を指定します。

4:稼働確認

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

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

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

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

さらにしばらくするとブラウザが自動的に起動し、Yahoo路線情報が表示されます。自動的に検索ボタンが押され、画面上に入力エラーメッセージが表示されれば成功です。しばらくするとブラウザが自動的に閉じられます。

Yahoo経路情報の検索ボタンを自動押下したイメージ