セレクタは、HTML 中の特定のタグを指し示すための識別子である。初期はCSSの文脈で使用されていたが、現在では必ずしもそうではない。
CSSの文脈での主な用途としては特定のタグに特定のスタイルを当てはめ、文字の装飾やコンポーネントの位置調整等に用いられる。一方今回の Puppeteer での使用目的はそうではない。 HTML の DOMツリー 上における特定のタグや要素を指し示し、そこに対して特定の文字列を書き込んだりクリックイベントを発火させたりする目的で使用する。より分かりやすく言えば、テキストボックスに文字を書き込んだり、ログインボタンを押させたり、書いてあるテキストを抜き出したりするという使い方である。
これができると何が嬉しいかと言うと、 HTML の構造が変わらない限り、毎回同じアクションを同じページに対して行うことが可能であるということである。つまり、コンピュータに「テキストボックスに、 ユーザー ID とパスワードを入力し、ログインボタンを押させ」た後、「ログイン後に表示される口座情報から現在の口座残高や時価評価額を抽出」したりすることができる。また それだけではなく株式の売買のプロセスに対してクリックするボタンの順番などのプログラミングすれば購入操作さえ自動化できてしまうということである。
セレクタについて詳しく勉強すると、親子要素・兄弟要素・擬似要素等、少し勉強する範囲が広くなってしまう。セレクトの専門家になることが目的ではないのでここでは詳しく説明することは避ける。一方で、セレクタを用意できないと、押させたいボタンをクリックすることもできない。ではどうするかというと、Chrome DevTools やChromeの拡張機能である Headless Recorder を使えば簡単に取得できる。次の記事で説明しよう。
