Webページを使った作業には、例えば「ブラウザを立ち上げて広告管理サイトにIDとパスワードを入れてログインし、キャンペーン名を選んで広告実績データをダウンロードする」といった作業があります。
こうした作業を自動化するには、Webページ上のどの要素を操作するのかをロボットに正しく伝える必要があります。 Coopel では、要素指定の方法として CSS セレクター、XPath、JSPath などを使用できます。これらを使って、クリックするボタン、文字を入力する欄、選択するメニューなどをロボットに教えています。
(＊但し、JSPath を使用した要素指定は、対象の要素が Shadow DOM 内に存在する場合のみ)

Webページでの操作をロボットに教える

Webページ上には、ボタン、入力欄、リンク、表、画像など、さまざまな要素があります。ロボットに正しい操作をさせるには、その中から対象となる要素を正確に特定する必要があります。

Webページの要素はどのように表現されているか

Webページは主に HTML で構造が作られ、CSS で見た目が整えられ、JavaScript で動きが追加されています。
ロボットが操作対象を見つけるときは、この HTML の構造をもとに、どの要素を指定するかを判断します。
要素指定の方法には、例えば次のようなものがあります。

• CSS セレクター: HTML の構造や属性をもとに要素を指定する方法
• XPath: 要素の階層構造をたどって指定する方法
• JSPath: JavaScript で要素を取得する方法

CSSとは？

CSSは、HTMLと組み合わせてWebページの見た目を作るのに使われています。このWebページでも、HTMLとCSSとがセットで使われることで、ご覧の見た目になっています。
HTMLのみでWebページを作ることもできますが、CSSを使うことで、HTMLのタグで囲んだ範囲（要素）に対して、文字や背景の色などを設定することができます。
つまりCSSとは、Webページを見栄えよく設定するための情報のことです。

実際のWebページでは、HTMLやCSSの構造は以下のようになっています。

要素指定とは？

Webページを自動化するうえで重要なのは、「どの要素を操作するか」を明確にすることです。
たとえば、あるボタンをクリックしたい場合でも、ページ内に似たボタンが複数あることがあります。そのため、対象の要素を一意に特定できる情報が必要になります。

このときに利用するのが、CSS セレクター、XPath、JSPath などの要素指定です。

これらは、要素が Web ページ上のどこにあるのか、どのような属性を持っているのかをもとに、対象を特定するための情報です。いわば、Webページ上の要素の「住所」のようなものです。

ロボットに正しい操作をさせるには、操作対象を明確に指定する必要があります。

ボタンをクリックする、プルダウンから項目を選択する、文字を入力する、ファイルをダウンロードするといった操作は、こうした要素指定によって実現されています。

Webサイト側でページ構成や表示位置が変更されることはありますが、適切な方法で要素指定を行うことで、レイアウト変更の影響を受けにくくなる場合があります。

CSSセレクター、XPath、JSPath では、Webページ上の「どの要素の」「どの項目に」「どんな設定を行うか」を指定します。「どの要素の」という部分は、Coopelを使ううえでも非常に大切です。

以下に、具体例で説明します。

例1：ログインボタンの要素を指定する

<button id="login-button">ログイン</button>

• CSS：#login-button
• XPath：//button[@id="login-button"]

→ id を使ってボタンを特定します。

例2：入力欄の要素を指定する

<input name="email">

• CSS：input[name="email"]
• XPath：//input[@name="email"]

→ name 属性で入力欄を特定します。

例3：テキストでボタンの要素を指定する

<button>登録する</button>

• XPath：//button[text()="登録する"]

→ 表示されている文字で要素を特定します。

例4：複数ある要素から1つを選ぶ

<button class="btn">編集</button>
<button class="btn">削除</button>

• CSS：button.btn:nth-child(2)
• XPath：(//button[@class="btn"])[2]

→ 同じ要素が複数ある場合には、位置やテキストで特定します。

例5：DevTools でコードを表示した際、#shadow-root 内に要素がある

<div id="contents">
	<div id="container">
		#shadow-root (open)
			<input name="email">
	</div>
</div>

• JSPath：document.querySelector('#container').shadowRoot.querySelector('input[name="email"]')

→ Shadow DOM 内にある要素は JSPath を使用します。
基本的には、下記のフォーマットになります。
document.querySelector('Shadow DOM までの CSS セレクター').shadowRoot.querySelector('Shadow DOM 内の CSS セレクター')