Xpath を使用した Web サイトの操作方法

Ver.1.2 以前では、MICHIRU RPA 専用 Web ブラウザ「MICHIRU browser」にて、HTML の要素で場所を指定して操作することができます。

Ver.1.3 以降は、Chrome や Edge といった普段お使いのブラウザでも、HTML の要素で場所を指定して操作することができます。

目次

HTMLの要素とは

Web サイトは HTML という言語で構成されています。下図は、あるサイトの HTML を Google Chrome のデベロッパーツールで表示したものです。

<body> や <div> のように <> で囲われた要素はタグと呼ばれます。 /html/body/div[1]/div[3]/form/div[1]/div[1]/div[1]/div/div[2]/textarea のように、タグを / で繋げた文字列をXpathと呼びます。Xpath は要素の特定に使用する住所のようなものです。

タグには ID や CLASS といった情報も含まれ、それらを使用した要素の特定も可能です。詳しくは下表のとおりです。

MICHIRU browser を使用したブラウザ操作では、これらを用いて操作位置を特定します。

Xpathタグを / で繋げた文字列で、要素の住所です。[]で囲まれた数字は同じ階層に複数のタグがある場合に表示され、何番目の要素なのかを表します。
例:/html/body/div[1]/div[3]/form/div[1]/div[1]/div[1]/div/div[2]/textarea
IDタグの固有の識別名です。原則、ページ内に同名のIDは存在しません。
例:APjFqb(上図青枠)
Name要素に任意の名前をつけたものです。
例:q(上図ピンク枠)
ClassName主にスタイル設定に使用されます。多くの場合、ページ内に同名のCLASSが存在します。
例:gLFyf(上図緑枠)
TagName<> で囲まれたタグのことです。
例:<div>、<textarea> など(上図赤枠)
HTML 要素

MICHIRU browser の操作画面の説明

ホーム画面

ツールタブ上部の「MICHIRU browser起動」ボタンをクリックする、または、「ブラウザ操作」内の「MICHIRU browserを開く」の操作が実行されると、下図の画面が表示されます。

番号名称説明
1ページの追加/削除ボタン+ボタンでページを追加します。-ボタンでページを閉じます。
2ページリストクリックで表示するページを切り替えます。
3ダウンロードリストダウンロードしたファイルの一覧を表示します。
4履歴リストダブルクリックで移動します。
5お気に入りリストお気に入りの一覧を表示します。
6Xpath表示バーマウスカーソル上のXpath を表示します。
7HTML要素右クリックで表示されるメニューからHTML 要素情報を表示をクリックすると、その要素情報(Xpath、ID、Name、ClassName、TagName等)が表示されます。
8検索窓ページ内の検索を行います。
9設定メニュー印刷や設定等のメニューが表示されます。
10設定環境設定画面を開きます。

HTML 要素の確認方法

下図は、MICHIRU browser で Google のトップページを開き、入力欄で右クリックした時のものです。

  • カーソル部分の Xpath が表示されます。
  • 右クリックで表示されたメニューから「HTML 要素情報を表示」をクリックすると、カーソル部分の要素の詳細が表示されます。それぞれの項目の詳細は下表のとおりです。
クリップボードにコピー要素情報を操作の詳細設定にコピーできます。ここでコピーされた内容は、ブラウザ操作内の操作の詳細設定にて「要素情報反映」ボタンを押すと取り込まれます。
基準 Xpath右の+ボタンで Xpath から1つずつ要素が取り込まれ、-ボタンで要素が1つずつ Xpath に戻ります。基準 Xpathに設定したタグの内部に対して操作を行います。
Xpathカーソル位置の Xpath が表示されます。-ボタンで要素が1つずつ基準 Xpath に移り、+ボタンで1つずつ要素が 基準 Xpath から戻ります。
IDカーソル位置の ID 名が表示されます。ID が設定されていない場合は表示されません。原則、ID はページ内に1つしか存在しませんが、同名の ID が複数ある場合は Index 番号での識別が可能です。
Nameカーソル位置の Name 名が表示されます。Name が設定されていない場合は表示されません。
同名の Name が複数ある場合は Index 番号での識別が可能です。
ClassNameカーソル位置の Class 名 が表示されます。Class が設定されていない場合は表示されません。
同名の Class が複数ある場合は Index 番号での識別が可能です。
TagNameカーソル位置のタグ名が表示されます。同階層に同じタグが複数ある場合は Index 番号での識別が可能です。
HTML 要素情報

MICHIRU browser を使用した操作の詳細設定

HTML 要素の取得方法

HTML 要素取得後に操作を選択する方法

操作したい場所にカーソルを合わせて画像取得ショートカットキー(初期設定ではShift キー)を押すと、HTML要素が取得されます。このときの操作は「ブラウザクリック」や「選択項目を設定」など、取得された要素に合わせて自動設定されますが、意図した操作と異なる場合は操作欄から選択し直してください。

操作選択後に HTML 要素を取得する方法(操作位置を変更する場合も含む)

MICHIRU browser に表示されている Web サイトの操作位置にカーソルを合わせて右クリックし、「HTML要素を表示」を選択します。基準 Xpath の調整後、「クリップボードをコピー」を押し、RPAの操作画面へ戻ります。詳細画面の「要素情報反映」ボタンを押すと、新しい HTML 要素が反映されます。キー画像を設定している場合は必要に応じて修正してください。

操作位置の指定

その後、どのHTML 要素をもとに操作を行うのかを対象指定で選択します。それぞれ、データ保存先の内容を変数として使用できます。

XpathXpath で操作位置を特定したい場合に選択します。
ID[Index]ID 名で操作位置を特定したい場合に選択します。
Name[Index]Name 名で操作位置を特定したい場合に選択します。
ClassName[Index]Class 名で操作位置を特定したい場合に選択します。
TagNameタグ名で操作位置を特定したい場合に選択します。
カーソル位置カーソル位置で場所を特定したい場合に選択します。キー画像と操作位置の設定が必要です。

キー画像の設定について

画像取得ショートカットキーを使用して HTML 要素を取得した操作では、キー画像も同時に取得されますが、その場合、操作位置の特定はキー画像検索が先に行われます(キー画像の発見後、HTML 要素で操作位置を特定する)。画面全体がキー画像として設定される HTML 要素取得直後の状態では、実行時にエラーとなることがあるのでご注意ください。

キー画像の設定合は、「画像操作情報編集ボタン」から行ってください。

Xpath、ID[Index]、Name[Index]、ClassName[Index]、TagName での指定の場合、キー画像を削除しても正しく動作しますが、操作セットリストのサムネイルが表示されません。修正の際に、操作位置の解読が困難になる恐れがあるためご注意ください。

目次