PuppeteerでWebページの差分をscreenshot画像で確認する方法
PuppeteerでWebページの差分確認 PuppeteerでWebページの差分確認はページ内のテキストを取得すれば簡単にできるが、それだと画像や余白などの変化に気付くことができない。 そのため、Webページの画像や余白などの差分を確認するには修正前と修正後のスクリーンショット画像を比較する必要がある。 これらを手作業でやるのは手間がかかるが、Puppeteerとresemblejsを使用すればコマンドを入力するだけで簡単にできる。 resemblejsとは その名の通り画像の差分(diff)を確認するためのもの。 Puppeteerはスクリーンショット画像は保存できるが、画像の差分までは検出できないためresemblejsも使用する。 インストール手順 まずmkdir my-diffのような適当なフォルダを作成してcd my-diffで移動する。 次にnpm init -yを実行した後
PuppeteerによるヘッドレスChromeの使い方 2021年度版
Puppeteerとは 以前「PuppeteerによるヘッドレスChromeの使い方 evaluate」という記事を書いたのだが、現在ではコードが古くなってまともに動作しなくなってしまったので「PuppeteerによるヘッドレスChromeの使い方 2021年度版」を新たに作成した。 PuppeteerとはChromeを操ってWebスクレイピングを行い各種チェックなどができるNodeライブラリ。 例えば下記のようなスクリプトを作成してnode test.jsを実行すればChromeが指定した文字列を検索して、さらにスクリーンショットを保存してくれる。 // test.js const puppeteer = require('puppeteer'); puppeteer.launch().then(async browser => { const page = await browser.
コピペで簡単！puppeteerのこんなとき実例８件
さてさて、このところNode.js（Express）での開発を続けていて色々と新しい技術や開発思想に触れる機会を多く持つことができました。 もちろんまだまだ学ぶことは多いのですが、Node.jsを使った開発はある程度理解が深まってきたので、この辺で、「これは今後も使いそう。でも、ちょっと複雑ですぐ忘れちゃいそう・・・😅」という内容を備忘録的にまとめておくことにしました。 ということで、今回は「実際のブラウザを使ってウェブサイトにアクセスできる」puppeteerを使った「こんなとき」をご紹介していきたいと思います。 ※puppeteerのインストール方法や基本的な使い方は、以前「JavaScriptでレンダリングしてるページをスクレイピングする方法」という記事を公開していますので、ぜひそちらをご覧ください。 ぜひ皆さんのお役に立てると嬉しいです😊✨ 開発環境：Node.js 8 スタイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
