AppleScript で Google Chrome を操作してボタンをクリックするコード

ここでは AppleScript で Google Chrome ブラウザを操作してボタンをクリックするコードを紹介します。

AppleScript からのクリック操作を受け付けられるように設定を変更する

ウェブサイト内の要素の取得やクリック操作は JavaScript を実行することで実現できます。しかし初期設定のままの Google Chrome では AppleScript からのクリック操作を受け付けられないので、受け付けられるように設定を変更する必要があります。

メニュー「表示 > 開発 / 管理 > Apple Events からの JavaScript を許可」を「入」にします

開発ツールを起動する

開発ツールを起動して対象の HTML 要素に辿り着けるようにします。

この章以降では ウェブスクレイピングの練習用のページをもとにして説明します。

ここでは AppleScript で「ボタン2」をクリックすることを目的に想定します。

STEP

ウェブページ上で右クリックして「検証」を選択します

ここでは「ボタン2」のボタン上で右クリックしています

STEP

画面が分割され開発ツール（コードが並ぶ画面）が表示されます

開発ツールのインターフェースを常時日本語にする場合は、開発ツールにある以下の「Switch DevTools to Japanese」をクリックします。

対象の HTML 要素をスクリプトで指定してクリックする方法

対象の HTML 要素を指定するために、以下の HTML 要素が持つ情報をもとにします。

さて、先ほど「ボタン2」のボタン上で右クリックして開発ツールを表示した人は、以下のようにコードの一部が選択されていると思います。（そうでない人は、ここで改めて「ボタン2」ボタン上で右クリックして検証を選択してください）

このコードの中身を見やすくすると以下のようになります。

<button 
id="button2" 
name="alert_btn" 
class="green" 
onclick="alert('ボタン2をクリック！')">
ボタン2
</button>

表形式にしてみるとこんな感じ

この中から指定しやすい順に探していきます。以下がその順番です。

ではここからは実際に HTML 要素を指定してクリックするスクリプトを見ていきましょう。

ID で HTML 要素を指定してクリック

まずは ID で HTML 要素を指定しクリックする AppleScript です。

指示した JavaScript

document.getElementById('button2').click();

  ID は一意のもので同ページ内で重複しません（ルール上）

名前で HTML 要素を指定してクリック

次は名前で HTML 要素を指定しクリックする AppleScript です。

指示した JavaScript

document.getElementsByName('alert_btn')[1].click();

  名前は複数取得されます。スクリプト内の[1] で “その 2 番目だよ“ と指示しています

  どうやって “ 2 番目” だということを調べるのか

前掲の表をみると名前には以下の値が設定がされています。

alert_btn

 同ページ内で同じ名前を検索しよう

検索をおこなうには開発ツールの要素パネル内でショートカットキー「⌘+F」を入力します

コードが並ぶ画面の下部に現れる検索窓に「alert_btn」と入力して、「 ｜ 」ボタンで結果へ移動。対象となる HTML 要素が表示されるまで移動します。

結果は「 2 / 6 」ということで、 “（ 6 個中の） 2 番目” ということが判りました

これらはクラス名、タグで指定する際も同様です

クラス名で HTML 要素を指定してクリック

続いてクラス名で HTML 要素を指定しクリックする AppleScript です。

指示した JavaScript

document.getElementsByClassName('green')[1].click();

  クラス名も複数取得されます。スクリプト内の[1] で “その 2 番目だよ“ と指示しています

タグ名で HTML 要素を指定してクリック

続いてタグ名で HTML 要素を指定しクリックする AppleScript です。

指示した JavaScript

document.getElementsByTagName('button')[5].click();

  タグ名も複数取得されます。スクリプト内の[5] で “その 6 番目だよ“ と指示しています

XPath で HTML 要素を指定してクリック

最後に XPath で HTML 要素を指定しクリックする AppleScript です。

指示した JavaScript

document.evaluate(\"//*[@id='button2']\", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotItem(0).click();

  XPath とは何か

HTML の中から特定の要素を見つけるために使用される（XML Path Language とも呼ばれる）言語。文書内の要素を簡単に特定できるため、Web スクレイピングや Web アプリケーション開発などの場面で広く使用されています。

具体的には HTML のツリー構造（階層）に基づいて要素を特定するためのパスを指定することができます。

パスの取得は以下のとおりです。

• 取得したい要素のコード上で右クリック
• 「コピー > XPath をコピー」を選択
• 完了（ペースト可能状態になる）

クローラ作成に必須！XPATHの記法まとめ – Qiita