提供しているITサービスの効率化と支援の目的で、PuppeteerとPlaywrightを使ったスクレイピングを開発しました。
人がやると正確に得られないスクリーン・ショットを、確実に得るのがはじまりでしたが、期待以上の効果に、オートメーションへの大きな可能性を感じています。
開発した機能
一般公開されているWebサイトから、ダウンロード不可能なHTMLのcanvasで生成されているコンテンツを画像化し、ダウンロード。クラウドに保存する。
開発期間：総計10日
Puppeteerで、画像を期待どおりにダウンロードするには1日で到達。
そこからいくつものコンテンツへの遷移、オートメーションなどに4日ほど。
ここで問題発生。
Puppeteerがスクリーンショットの前に意図しないリロードをすることで、エラーが頻発。（GitHubでもまだオープンのIssue）
回避策を探すのに5日経過し、断念。
Playwrightに望みを託して、まったく同じ機能を移植。
5日ほどで安定し、問題も起きずに安定稼働している。
当初、クラウドでの運用を見込んでいたが、サービスの遅さに、いまはローカルで稼働。
今後、再チャレンジしたい課題。
開発スピード・アップには、Headless Recorder利用が必須
プロトタイピングや、作業の効率化に、Headless Recorderは、強力なサポートになります。
オートメーションには、それなりにコードが必要になるはずですが、DOMを探す、メソッドの理解、PuppeteerとPlaywrightのトランスレーションに大いに役立ってくれます。
何より、手軽。すばらしい。
PuppeteerとPlaywright、どちらが優秀？
今回の画像スクレイピングでは、Puppeteerの意図しないリロードには、悩まされました。
ですが、Playwrightでは、エレメントのスクリーンショットをサイズ指定できない（ページ全体にはもちろん可能。Contextなど、両者のコンセプトの違いが関係？）など、両者には開発途上の至らない点はあります。
明確な違いはなく、できることも一緒。ブラウザ・エンジンはChromium共通のため、結果も一緒。パフォーマンスに明確な違いも見えません。
テスト・ツールとしての目的で開発された印象を受けるPlaywrightと、ChromeのオートメーションからはじまったPuppeteerのバックグラウンドを考えて選ぶのが良いかもしれません。
PuppeteerとPlaywrightの移行は容易？
私には容易でした。
Playwrightに、Contextという概念がありますが、すぐ理解できるレベル。メソッドもほとんど同じです。
どちらかひとつを学べば、もうひとつはすぐ使えると思います。
Webオートメーションをさらに掘り下げていくつもりです。
ビジネスのパートナー、いっしょに開発できそうなチームメイトを探しています。
よろしければ、コンタクトを。
We tried to fast develop Web Automation Functionality with Puppeteer and Playwright.
It got lots of screenshots downloading automatically, that was difficult by human operation. Automation has very good potential for keep image specification, quality, and surely efficiency.
Functionalities
Getting lots Screenshots from public web service, but that contents cannot downloadable images because it’s based on HTML5 CANVAS generated images. Storing image data to Cloud Storage.
Total 10 days Development
Image Capturing by Puppeteer was Only 1 day. More 4 days used to Navigation Handling and Automation.
We troubled this point.
Puppeteer made Unexpected Reloading before Screenshot, (Still Open Issue on GitHub).
We lost 5 days for it, but finally gave up.
Translating to Playwright as same functionalities on 5 days, it’s just works now!
We hoped to work on cloud based service, but it was too slow to be. Now it’s working on Local Node.js.
We will try it again.
Headless Recorder is Useful for Speed up
Headless Recorder strongly supports development efficiency.
Of course Web Automation Functionality cannot run only recorded code, but that Chrome Extension helps DOM analytics, understanding Methods, or Translation between Puppeteer and Playwright, etc.
First of all, it’s simple, Excellent!
Puppeteer or Playwright, Which is better?
In this case Puppeteer made trouble about Screenshots.
However Playwright cannot define screen shot size for Elements (of course Page based option is works), it was inconvenience specification for our service.
Each libraries are going in progress, we agree.
Almost same specifications, both Chromium base, little difference about performances.
Playwright might be focus to Testing Automation, Puppeteer was started from Automation with Chrome. These background difference suggests for selection.
Puppeteer/Playwright Translation is Easy? Yes!
Simply we answer YES.
Each class and methods looks same. One library study will get both.
We explore Web Automation further, which has big potential.
We are looking for parter for Business Development and Service Production.
Let us Contact.