Puppeteer で使用するセレクタを手軽に取得する方法 - 01 - 株のシステムトレードをしよう

how-to-make-stock-trading-system.dogwood008.com

上記の昨日の記事に引き続き、セレクタの話である。ここからは Google Chrome での話で進めるが、現行版であれば他のブラウザでも概ね似たようなことができる。

まず、macの人は、 Cmd ⌘ + Shift + C 、Windows / Linux の人は、 Ctrl + Shift + C を押す¹と、 "DevTools" というウィンドウ²が開く。この状態のまま、ブラウザのHTMLが描画されている部分の上でマウスカーソルを動かすと、下図のように要素がブロックで選択される状態になる。

gif動画要素がブロックで選択される状態 (8.9MB)

この時、DevTools で要素を右クリックして、 Copy → Copy selector をクリックするだけで、セレクタをコピーできる。下図はその手順を説明した動画である。

gif動画セレクタをコピーして、画面下部に貼り付ける動画(9.7MB)

これだけで、難しいセレクタの仕組みや文法を知らなくても、とりあえずやりたいことは達成できる³。ただ、1個や2個なら良いが、これが10個や20個になると一連の作業だけでもやや面倒かつ間違いが出やすくなる。なので、今度は Excel のマクロのように、リンクをクリックしたり、文字を入力したり、ボタンを押したりするだけで、自動的にセレクタのみならず、ソースコードまで生成してくれる Headless Recorder (Chrome ウェブストア版)を紹介しよう。

https://how-to-make-stock-trading-system.dogwood008.com/entry/how-to-get-selector-02-headless-recorderhow-to-make-stock-trading-system.dogwood008.com

その他のショートカットも、色々とある。↩
場合によっては画面が縦または横に2分割され、左右または下に DevTools ペインが表示される。↩
ただし、機械的に取得したセレクタは、手動で整えたそれと違い、可変長のリスト等に弱い面がある。例えば、「あるタグを親にもつ要素のうち、上から数えてN番目のタグ」という指定を行う :nth-child() という擬似クラスで作成された場合、HTMLのDOMツリーに描画される要素の数によっては意図したものと異なるものが選択される可能性がある。したがって、盲信するのではなく、ある程度自分でも修正できることが好ましいが、ここでは深入りを避ける。↩