トップ > Power Automate for Desktop > セレクターは何をセレクトしようとしているのか

セレクターは何をセレクトしようとしているのか

Power Automate for Desktop Webオートメーション UI要素 セレクター ブラウザー

ウェブページ上のクリックする対象を確実にセレクターで特定するにはウェブページの構造を確認することが必要となる。その際には多くのブラウザーに備わっているHTML確認ツールを利用するとよい。以下Chromeの「検証」の機能を使って確認する。

 

1. ChromeのHTML確認ツールを起動する。目的のウェブページでなにもないところを右クリックし「検証」を選択する。

f:id:yujihb:20211106003319j:plain

2. Chromeの右ペインに目的のウェブページのHTML構造が表示される。

f:id:yujihb:20211106003333j:plain

3. Webページのボタンを押すフローをつくる。アクション「Webページのボタンを押します」にてMSNのサイトのニュース欄の一つのリンクのUI要素を取得してみる。

f:id:yujihb:20211106003302j:plain

f:id:yujihb:20211106004724j:plain

 

4. UI要素を取得した結果自動的に以下のようなセレクターが取得された。

f:id:yujihb:20211106003310j:plain

5. 取得したリンクの場所をChromeで探す。右ペイン上でマウスを上下に動かすと左ペインのウェブページ上で該当する箇所がハイライトされるので探しやすい。

f:id:yujihb:20211106003344j:plain

6. 取得したリンクについてウェブページ上の位置関係を詳しく確認する。

f:id:yujihb:20211106003354j:plain

7. ウェブページ上のタグと下記の自動取得されたセレクターとを比較すると、同一の構造をしていることがわかる。セレクターはClassの値などをもれなく指定している。

main[Id="main"] > div[Class="stripecontainer"]:eq(0) > div[Class="news stripeouter"] > div[Class="stripe full-width"] > div[Class="paging-container"] > div[Class="newlist stripeheadlinelinklist"]:eq(0) > div[Class="one-col"] > ul[Class="col"] > li[Class="hdlist  primary"]:eq(0) > a[Class="contentlink"]

 

UI要素を取得した際にセレクターが何を自動取得しているのかが分かり、セレクターとウェブページとの対応関係が分かればこっちのもの。セレクターを編集して柔軟に目的の場所を指定することができる。