（この記事は、2022/01/03に執筆しました）

この記事の前提条件。

HTMLが何か知っている
CSSが何か知っている
Power Automate for desktopでWebページからデータを抽出したことがある

※参考: サンプルで使用したWebページは、以下のアドレスになります。
https://fukuyori.github.io/RPALT20220117/

01.CSSセレクターとは

　CSSでデザイン定義を行う際、定義する場所を指定する記述方法です。Automation AnywhereではXPathを使ってWeb上の場所を指定しますが、Power Automate for desktopでは、CSSセレクタを使います。CSSを自分で書ける人は、以下のドキュメントを確認してください。

　また、jQueryのセレクタ機能も使っています。

CSSセレクタの取得

　GUIでWeb上のデータを取得する場合、以下のようにHTMLタグが連なって表示されます。

CSSセレクタ

html > body > div:eq(0) > div > div:eq(1) > div:eq(0) > p:eq(0)

　Power Automate for desktopのGUIではなく、ブラウザ(Microsoft Edge)の機能を使ってセレクタを取得することもできます。

　取得したい箇所を右クリックし、「開発者ツールで調査する」を選択。HTMLのコードが表示され、該当の個所がハイライトしていますので、その箇所で右クリックして、「コピー」⇒「selectorをコピー」とします。
　Chromeを使用している場合は、「開発者ツールで調査する」は「検証」になります。

CSSセレクタ

#FirstLetter > p:nth-child(1)

　Power Automate for desktopで取得した場合より、すっきりしています。CSSセレクターについて、少しわかるようになると、簡潔で、より柔軟性の高いCSSセレクターを記述できるようになります。

**※注意：**抽出プレビューでは、子要素のデータが表示されないことがあります。一度実行した後、変数の中を見て確認してください。

02.「Webページからデータを抽出する」

Power Automate for desktopの「Webページからデータを抽出する」のアクションで、以下の詳細設定ができます。

抽出形式

名称	説明
未定義	データを取得しません
単一の値	1つの値を取得します
選択した値	セレクタを複数指定して取得
リスト	リスト形式で取得
テーブル	テーブル形式で取得
HTMLテーブル全体	tableタグの内容をテーブル形式で取得

「選択した値」で取得

[リスト」で取得

「テーブル」で取得

　テーブルや、リストで抽出するとき、基本CSSセレクターの指定する場所は、繰り返しが発生する場所です。そのあと、CSSセレクターで各項目の内容を指定してやります。

「HTMLテーブル全体」で取得

属性と正規表現

　属性は、タグで囲まれた中の文字列は Own Text で取得できます。タグの中に書かれた属性の値を取得する場合は、その属性の名前を書きます。
　取得する値は、正規表現を使って整形することができます。「100円」となっている場合は「\d+」と指定すれば、「100」と、数字だけの値を取得することができます。
　正規表現の書き方は、以下を参照してください。

03.セレクター、結合子、フィルター

セレクター

　自分で作成したWebページであれば、必要な場所に自分でタグを設定できますが、公開されているWebページは、利用しやすい形になっていません。目的の項目を見つけるには、HTMLタグを手繰って探るということをやります。その時使うのは、セレクターと結合子です。

名称	説明	例
全称セレクター	すべての要素	*
要素型セレクター	要素名を指定	input
クラスセレクター	class属性を指定	.classname
IDセレクター	id属性を指定	#idname
属性セレクター	属性を指定	[attr] [attr=value]

　使用する優先度は、IDセレクター、要素型セレクター、クラスセレクター、属性セレクターの順番です。
　IDセレクターは、原則として１ページ上でユニークになっています。原則に従っているページなら、IDが設定されている場所へ間違いなく飛ぶことができます。ただし、あくまで原則なので、IDが重複しているページもあります。その場合は、前後のタグの構造を確認する必要があります。
　クラスセレクターが項目の内容を示す書き方（例えば、class="MemberList"のような意味のある単語が使われている）になっている場合、比較的安心して使用できます。しかし、大抵のページでクラスはデザインのために使われており、多数のクラス名が並んでいることが多い（例えば、class="css-1dbjc4n r-hvic4v r-1d2f490 r-1xcajam r-zchlnj r-1ykxob0"）ので、その場合は使用しない方がいいでしょう。
　属性セレクターは、IDセレクターやクラスセレクターの選択に条件を付けたり、それ以外の属性を指定する場場合に使います。指定方法の詳細は以下のようになります。

構文	説明	例
[attr]	その属性を持つ要素	[name]
[attr=value]	指定された属性の値が完全一致 [class="a b c"]は class="a b c"と一致	[class="bold-01"]
[attr~=value]	[class="b"]は class="a b c"と一致	[class~="red-02"]
[attr\|=value]	[id\|="pre"]は preとpre-viewと一致	[class\|="red"]
[attr^=value]	要素の最初の値に一致	[class^="bold-02"]
[attr$=value]	要素の最後の値に一致	[class$="red-02"]
[attr*=value]	[id*="re"]はpreとrenと一致	[class*="old"]
[attr operator value i]	値の大文字と小文字を区別しません	[class$="LISTITEM1" i]
[attr operator value s]	値の大文字と小文字を区別します	[id="ListItem1" s]

　^= は、属性の値の先頭からの一部分で一致します。a[href="https"] では、リンク先のURLがhttpsのものを選択することができます。しかし、$= は、値の末尾の部分一致はできないようです。a[href$=".com"] は動作しません。代わりにa[href*=".com"] で部分一致をさせることができます。

結合子

　目的のデータを取り出すには、セレクタ、結合子、フィルターを使っていきます。出来るだけ、曖昧さのない、Webページの変更の影響を受けにくい組み合わせを見つけることがキモになります。

名称	構文	説明	例
子孫結合子	A B	子孫にあたるノード	#MainContent p
子結合子	A > B	直接の子のノード	#MainContent > div > p
一般兄弟結合子	A ~ B	Aの後にあるBの要素	p ~ p
隣接兄弟結合子	A + B	Aの直後のBの要素	span + p

jQueryのフィルター

構文	説明	例
:first	最初の要素	h3:first
:last	最後の要素	h3:last
:even	偶数番目の要素
:odd	奇数番目の要素
:eq()	指定したインデックス番号の要素	h3:eq(0)
:lt()	指定したインデックスより小さい番号の要素	h3:lt(1)
:gt()	指定したインデックスより大きい番号の要素	h3:gt(1)
:not()	動作未確認

even

　偶数番目の要素ですが、0から始まるので、選択されるのは、１と３です。

odd

　奇数番目の要素ですが、0から始まるので、選択されるのは、２と４です。

eq()

　番号は、０から始まります。

lt

jQueryの子要素フィルタ

構文	説明	例
:first-child	最初の子要素	#Table-1 > tbody > tr > :first-child
:first-of-type	セレクタで指定された最初の子要素	#Table-1 > tbody td:first-of-type
:last-child	最後の子要素	#Table-1 > tbody > tr > :last-child
:last-of-type	セレクタで指定された最後の子要素	#Table-1 > tbody td:first-of-type
:only-child	子要素が１つだけのときに取得
:only-of-type	セレクタで指定された要素が１つだけのときに取得
:nth-child()	親要素内にあるセレクタで引数で指定した要素	#FirstLetter > span:nth-child(2)
:nth-of-type()	セレクタと引数で指定された要素	#FirstLetter > p:nth-of-type(2)
:nth-last-child()	nth-childを最後から数える	#FirstLetter > :nth-last-child(2)
:nth-last-of-type()	nth-of-typeを最後から数える	#FirstLetter > span:nth-last-of-type(2)

first-child

最初の子要素を取得。セレクタを指定した場合、１番目の子要素に一致しない場合は取得できません。

first-of-type

　first-childと異なり、最初の子要素でなくても取得できます。

nth-child, nth-of-type

　最初のセレクタを１として数えます。【注意】:eqの場合は、0から始まります。

nth-last-child, nth-last-of-type

　最後のセレクタを１として数えます。※図ではnth-child, nth-of-typeになってますが、nth-last-child, nth-last-of-typeの誤りです。

jQueryのコンテンツフィルタ

構文	説明	例
:contains()	引数で指定した文字列を含む要素	#rsltlst > li:contains("ルート")
:has()	指定したセレクタを「子孫要素」に持つ要素	li:has(span)
:empty	Own Textが何もない要素	div:empty
:parent	動作未確認