ヘッドレスブラウザ・イズ・何？
どうもおはようございます、僕です。僕は化石時代の人間なのでキャッシュレスの対応も全然ですがみなさまいかがお過ごしでしょうか？最近「～レス」っての多いですよね。そんなわけで、今日はヘッドレスについて調べてみました。年齢は？趣味は？彼女はいるの？
んで、こんなやつらしい。
A headless browser is a web browser without a graphical user interface.
Headless browsers provide automated control of a web page in an environment similar to popular web browsers, but are executed via a command-line interface or using network communication. They are particularly useful for testing web pages as they are able to render and understand HTML the same way a browser would, including styling elements such as page layout, colour, font selection and execution of JavaScript and AJAX which are usually not available when using other testing methods.
なるほどよくわからない。グラフィカルな操作をしなければヘッドレスブラウザって認識でいいんですかね？
ヘッドレスブラウザとは、グラフィカルユーザーインターフェースを持たないWebブラウザのことです。
ヘッドレスブラウザは、一般的なウェブブラウザと同様の環境でウェブページの自動制御を提供しますが、コマンドラインインタフェースやネットワーク通信を使用して実行されます。ブラウザと同じようにHTMLをレンダリングして理解することができ、ページレイアウト、色、フォントの選択、JavaScriptやAJAXの実行など、他のテスト方法を使用した場合には通常利用できないようなスタイリング要素を含む、ウェブページのテストに特に有用です。
DeepLによるとこういうことらしいです。
Puppeteerを使ってみることにする
まあ、冒頭の話はどうでもよくてヘッドレスな操作のできるツールPuppeteerを前々から触って見たかったのでこんな記事を書いてしまった。
GitHub - puppeteer/puppeteer: Headless Chrome Node.js API
Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.
件のツールはこんなやつ。
んで丁度いいところに遊べる環境があったのでこれを使ってみることにします。
Try Puppeteer
そんなわけで試しになんか作ってみる。
とりあえずお試しでGoogle画像検索からネコ画像を検索してスクショ撮ってみるやつを作ってみた。
以下コード
// const puppeteer = require('puppeteer'); //(async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); const targetURL = 'https://www.google.co.jp/imghp?hl=ja'; await page.goto(targetURL); // ここにコード await page.type('input[title="検索"]', "cute cat"); await page.click('button[type="submit"]'); await page.waitForNavigation({waitUntil: "networkidle2"}); await page.evaluate(_ => { window.scrollBy(0, 200); }); await page.screenshot({path: 'cutecat.png'}); // ここにコード await browser.close(); //})();
プレイグランドで確認してるから実際の挙動よくわかんないけども、実際に使う場合はコメントアウトしてる部分が必要になるっぽい…。ぱっと触った感じだと大雑把な待ち時間を入力する必要がないっぽいですね。あと、やりたいことは大体一行でできる。
これはいいかもしれない。あとは使える環境探し……。
ちなみに導入は以下の通りです。
npm i puppeteer # or "yarn add puppeteer"
