Intro Web Font のサブセット化を Font Weight に応じて作り分けるとともに、それを Puppeteer を用いて生成するように変更した。 Web Font の静的サブセット 本サイトで提供している Web Font は当初、文字を事前に選定して生成したものを使っていた。 Noto Sans の Web Font 対応とサブセットによる最適化 当時はコンテンツがなかったが、コンテンツも増えた後は、コンテンツの原稿である markdown ファイルから使用している文字を抽出して生成するように変更していた。 これでおおよそ必要最小限のサイズにすることができていた。 Regular と Bold の最適化 本サイトでは Font Weight として Regular(400) と Bold(700) を提供しているが、これまでは抽出した文字種を Bold/Regular 両
Re:VIEW+CSS組版の執筆環境を簡単に構築できるようにしました - 圧倒亭グランパのブログ
【追記（2019/02/10 9:53）】 現在開いているこの記事は技術書典５に向けての記事です。 技術書典６に向けての最新記事は以下をご参照ください。 使いやすくなったり、Re:VIEWなどのバージョンが更新されています。 at-grandpa.hatenablog.jp 【追記おわり】 Re:VIEW+CSS組版の環境は、わかめさんの vvakame/review-css-typesetting で整いつつあります。今回は、個人的に欲しい機能を追加した、という話です。いい感じに回っているのでブログにまとめることにしました。 目次 目次 Re:VIEWとは CSS組版とは Re:VIEW+CSS組版 環境構築 使い方 やってること デザインの変更 CSSを編集する htmlを編集する 完成したPDFは印刷所で印刷可能か（確認完了） まとめ Re:VIEWとは Re:VIEW形式で書かれた
GitHub - checkly/headless-recorder: Chrome extension that records your browser interactions and generates a Playwright or Puppeteer script.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Monitoring as codeUnite E2E testing and monitoring in one developer-focused monitoring as code (MaC) workflow. Synthetic MonitoringOpen Source based E2E automation to monitor your web app continuously.
GitHub - qawolf/qawolf: 🐺 Create browser tests 10x faster
At QA Wolf, we’re building the magical QA experience that we wanted when we were managing engineering teams. With zero effort on your part, we get you to 80% automated test coverage in 4 months — and keep you there. We plan. You’ll get a test matrix covering every user flow in your web app, from happy path to edge case and everything in between. We automate. Using vanilla, open source Microsoft Pl
GitLab CIとPuppeteerを使ってはてなブログのデザインを継続的にデプロイする - pixiv inside - pixiv inside
こんにちは！ピクシブ福岡オフィスでエンジニアをしている@tasshiです。 今回はpixiv insideリニューアルのデプロイ環境についてお話ししたいと思います。 pixiv insideについて 「pixiv inside（ピクシブ インサイド）」は、ピクシブ株式会社の日常を伝えるためのオウンドメディアです。 2014年に「pixiv engineering blog」としてスタートし、2017年に現在の「pixiv inside」になりました。 WordPressからはてなブログへ pixiv insideでは2020年1月にセルフホスティングのWordPressからはてなブログへと移行し、新デザインへのリニューアルを行っています。 デザインリニューアルではデザイナーさんの作ったデザインを元にして、エンジニアがJavaScript, CSSなどのデザインリソースを実装します。 その後
2020年は、突如Playwrightが現れ、Seleniumを置き換えるほどの勢いでいろいろなツールが現れました。 Puppeteerは、Playwrightが出てからもTypeScript化をしたりカスタムクエリハンドラ機能が実装されたりと、Chrome DevToolsプロトコルを利用するライブラリとして改善が続いています。 今年１年の Puppeteerのリリースページ https://github.com/puppeteer/puppeteer/releases Playwrightのリリースページ https://github.com/microsoft/playwright/releases を時系列にまとめてみます。 2020年1月。 PuppeteerとPlaywrightの15日間の演劇 https://speakerdeck.com/taminif/relation-
Puppeteer (Chrome の自動操作ライブラリ) を Python に移植してpyppeteerという名前で公開しました - Blank File
Puppeteer というJavaScriptでchromeを自動操作するライブラリが最近話題になっていました。 私もPythonでSeleniumの代わりに使えるものがほしかったので、puppeteerをPythonに移植し、pyppeteerという名前で公開しました。 Puppeteerについては下記Qiitaの投稿が参考になるかと思います。 –headless時代の本命？ Chrome を Node.jsから操作するライブラリ puppeteer について - Qiita 使用上の注意 まだ作ったばかり＆テスト不十分なのでバグがあると思います。 なので試す時は「うまく動いたらラッキー」くらいの人柱精神でお願いします。 特にwindowsでは全くテストしていないので動かないかもしれません。 一応自分でwdomのテストに使ってみましたが、Webページのテストに使う分には意外と大丈夫です。
はじめに タイトルにもある通り、最近 Web アクセシビリティ (以下アクセシビリティ) の検証ツールを作っています。この記事では作るにあたったモチベーションや、現時点での機能、今後の展望についてまとめます。 モチベーション アクセシビリティを評価しようとすると Lighthouse にも付随する axe のようなツールを用いることが多いと思います。axe は WCAG 2.0 や WCAG 2.1 に則った数多くのルールを持ち、アクセシビリティに関する問題発見を支援してくれます。Lighthouse 以外では、axe をモジュールとして使えることはもちろん、Chrome の Extension などからも実行可能で、ユースケースに合わせた柔軟な利用ができます。 ただ、検証精度はどうかというと少し物足りなさを感じる部分があります。例えば以下のような例です。 <div role="butto
ヘッドレスブラウザとSSRF | MBSD Blog
ヘッドレスブラウザは、サーバ環境などでHTMLをレンダリングするためにバックグラウンドで動作させるブラウザです。 筆者も昨年診断ツールに組み込んだのを契機に使用し始めました。使ってみるとなかなか面白いので、今年は社内での学習用の「やられサイト」にも組み込んでみました。今回はこのやられサイトを題材にして、ヘッドレスブラウザとSSRF（Server-side request forgery）について書きます。 やられサイトの概要 開発したやられサイトは簡単なブックマークサイトです。ユーザがURLを入力すると、そのスクリーンショット画像をヘッドレスブラウザで取得して、ユーザが付けたコメントなどの付加情報とともに保存します。 下図はヘッドレスブラウザに関連する部分の構成です。 図のとおりNode.jsのPuppeteerを使用しており、バックエンドのブラウザエンジンはChromiumです。性能向上
GitHub - GoogleChromeLabs/ndb: ndb is an improved debugging experience for Node.js, enabled by Chrome DevTools
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
puppeteer + express + mocha で快適 TDD している話 - ジンジャー研究室
TDD という用語を使うとテストおじさんがやってきて、それはそうじゃないとか色々言い出すと思うんだけど、それが趣旨ではないので勘弁して欲しい。予防線ここまで。 Puppeteer でテスト Puppeteer が世間的にも個人的にもブームだ。ヘッドレス Chrome を操ってクローリングしたりスクリーンショットを撮ったり色々出来る。 github.com で、あれこれと遊んでいるうちにテストに使えるんじゃね？ということに気づいたので実践してみたら快適だったという話。ブラウザ操作してテストというのは昔から Selenium というのがあり、こちらはクロスブラウザで出来たりするんだけどまあ大掛かりでだるさを感じてしまう。メリットデメリットの比較はさておき、どうせならナウいやつを使ってみたい。よし使おう。 何をテストするか 普段から画面を見ながら開発しているので、どこに何が表示されているべきとい
WebのクローリングにPuppeteerを使っています。 いつかPuppeteerの使い方をまとめたいなと思っていたのですが、そうこうしている内に月日は流れ、Puppeteerと同様のブラウザ操作ツールとして、Playwrightの名前をよく聞くようになってきました。 ならばいっそのこと、新たにクローラーを書く時はPlaywrightに乗り換えて、その使い方をまとめようかなと思い始めました。 一方、ブラウザ操作ツールとしてSeleniumも有名です。 Microsoft Power AutomateでSeleniumが使えると聞いたので、Seleniumならクローリングだけでなく、日々の業務の自動化にも使えて便利かなとSeleniumにも興味がありました。 SeleniumとPlaywright、どちらにしようかと迷ったのですが、どちらも使ったことがなかったので結局両方を使って確かめること
この記事は、 Recruit Engineers Advent Calendar 2017 の2日目です。 リクルートテクノロジーズで パートナーとして働いてる mizchi です。ここでの仕事は、 yosuke_furukawa が忙しくて調べられないことを、勝手に調べてくることです。 今までリクルートでやったことは Next.js, AMP, PWA, Puppeteer って感じ。今回は Puppeteer を使ったE2Eテストの自動化やパフォーマンス評価の話をします。 puppeteer とは リポジトリ名でわかりますが、GoogleChrome チームが公式に提供する Chrome の Headless Driver です。 スペルがとにかく覚えづらい クロスブラウザテスト以外にはかなり万能なツールです。E2Eテスト、スクレイピング、日々の作業の自動化、なんでもござれ。 他のブラ
Puppeteer、テスト自動化の次世代標準「WebDriver BiDi」に対応開始。Firefoxもサポートへ
Puppeteer、テスト自動化の次世代標準「WebDriver BiDi」に対応開始。Firefoxもサポートへ Node.jsでヘッドレスブラウザを用いたテスト自動化のためのフレームワーク「Puppeteer」が、ブラウザ自動化の次世代標準である「WebDriver BiDi」（「BiDi」は双方向を表すため、読みは「ウェブドライバー バィディ」とのこと）への対応を開始しました。 Puppeteerは、ChromiumベースのWebブラウザに対してChrome DevTools Protocolを用いて通信することで、Webブラウザの操作を自動化するとともに、コンソールに表示される情報やログなどの収集、画面キャプチャなどの取得によって、テストの自動化を効率化してくれる機能を備えています。 このPuppeteerが、現在策定中の次世代標準の「WebDriver BiDi」に対応を開始しま
Puppeteerのnode apiを使ったサンプルプログラムを作り、ヘッドレスChromeを操作してみましたので報告します。 先日、Google Chromeにヘッドレス機能が追加されました。GUI無しにコマンドラインからChromeを操作できるようになったわけです。 https://developers.google.com/web/updates/2017/04/headless-chrome?hl=ja ちょっと前まではnodeからこのヘッドレスChromeへアクセスするにはchrome-remote-interfaceなどが必要でしたが、最近Puppeteerというものが現れてもっと簡単にヘッドレスChromeを操作できるようになりました。 https://github.com/GoogleChrome/puppeteer 公式サイトにあるPuppeteerの使い方 スクリーンシ
ヘッドレスブラウザ＋Puppeteerが使える「Cloudflare Workers Browser Rendering API」がオープンベータに
ヘッドレスブラウザ＋Puppeteerが使える「Cloudflare Workers Browser Rendering API」がオープンベータに Cloudflareは、同社のサーバレス基盤であるCloudflare Workersを通じてヘッドレスブラウザとそれをコントロールするPupeteerを呼び出せる「Workers Browser Rendering API」（以下、Browser Rendering API）のオープンベータを発表しました。 これまではBrowser Rendering APIはクローズドベータとして一般ユーザーには開放されていませんでしたが、オープンベータ化によりウェイトリストに登録したユーザーから利用できるようになると説明されています。 The Workers Browser Rendering API allows developers to prog
Puppeteer と ARIA Handler
先日、社内の技術共有会で https://github.com/puppeteer/recorder という npm パッケージの話が挙がったのだけど、ここで登場する ARIA Handler という機能が面白い内容だったため、それを書いていこうと思う。 https://developers.google.com/web/updates/2020/11/puppetaria で触れられている内容と重複する部分も多いため、先に参考として挙げておく。 また、Puppeteer の Undocumented な機能であったり、CDP の Experimental な機能への言及となるため、その点は承知した上で読んでもらえると。 Puppeteer Recorder@puppeteer/recorder 自体は名前の通り、Headless Chrome ラッパである Puppeteer を使って
この記事でやること Puppeteerの環境構築を行い、Headless-Chromeが動くのを確認するまで。 自己紹介 株式会社Creaithの上田です。 社員の曽宮が、フロントエンドテストツールはpuppeteerが最高などとって言ってたら 同僚のモトキが「seleniumでも同じことやってやる」と言い出したので。 社員の曽宮が記事を書き、私はそれを見守る事になりました。 えぇ 全力で見守るだけです。 もちろん対決なので負けたら、一蓮托生、私もそれに巻き込まれてゴニョゴニョゴニョ いろいろ比較していきPuppeteerを活用できる様になれるとこまでを連載して行こうと思います。 比較対象：フロントエンド・テストツール比較 Selenium #01環境構築編 Puppeteerとは 「ぱぺってぃ~あ」はとにかく環境構築がメタクソに楽なのです 先日Google Chromeにヘッドレス機能が
Puppeteer is a Node.js library which provides a high-level API to control Chrome/Chromium over the DevTools Protocol. Puppeteer runs in headless mode by default, but can be configured to run in full ("headful") Chrome/Chromium. Get started | API | FAQ | Contributing | Troubleshooting Example import puppeteer from 'puppeteer'; (async () => { // Launch the browser and open a new blank page const b
Introducing headless Chrome support in Cloud Functions and App Engine | Google Cloud Blog
News, updates, and best practices for developing apps on Google Cloud Platform.
GitHub - addyosmani/puppeteer-webperf: Automating Web Performance testing with Puppeteer 🎪
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
CodeceptJS
CodeceptJS is opensource MIT licensed testing framework. Works with your favorite frontend frameworks → Scenario Driven Write acceptance tests from user's perspective. Make tests readable and easy to follow. Driver Agnostic Run your tests via Playwright, WebDriver, Puppeteer, TestCafe, Protractor, Appium. The code is the same. Learn More
Chromeの操作を記録してPuppeteerやPlaywrightのコードに置き換えてくれる「Headless Recorder」レビュー
ウェブサイトのテスト自動化やスクレイピングに利用されるPuppeteerやPlaywrightといったライブラリを使うと、ChromeやFirefoxなどのGUIを備えるブラウザなしにウェブサイトの情報を取得することができます。そんなPuppeteerやPlaywrightのコードを「ブラウザの操作」から逆に取得できるのが、Chrome拡張機能の「Headless Recorder」です。 Headless Recorder - Chrome ウェブストア https://chrome.google.com/webstore/detail/headless-recorder/djeegiggegleadkkbgopoonhjimgehda Headless RecorderはChromeウェブストアで配信されているので、上記のURLにChromeでアクセスして「Chromeに追加」をクリッ
[レベル: 上級] この記事では、Googlebot によるレンダリングを検証、デバッグする方法を4つ紹介します。 Googlebot ＝ Chrome 41 まず、前提知識として知っておかなければならないことは、Googlebot がレンダリングする仕組み (Web Rendering System、略して WRS と呼ぶ）は、Chrome 41 に相当するということです。 この記事を書いている時点では、Chrome の最新バージョンは 65 です。 現在利用されている ES6 の機能のごく一部しか Googlebot はサポートできていません。 たとえば、CSS カスタムプロパティや Strict mode、IndexedDB をサポートしていません。 Chrome 41 がリリースされたのは、2015年3月です。 つまり、SEO を意識するなら、3年前のブラウザに合わせなければならな
［速習］ Puppeteer ～ヘッドレスChromeでテスト＆スクレイピング 第2章ブラウザ操作自動化の基本 ～非同期処理を扱うasync/await関数、自動化の鍵を握るPuppeteerコンポーネント 第2章では、実際にヘッドレスChromeを自動化するうえで必要となる、最新のJavaScriptの構文やPuppeteerのAPIについて解説します。 進化し続けるJavaScript PuppeteerのAPIを解説する前に、第1章の冒頭で掲載したサンプルコードを見返してみましょう。もしかすると、中にはまったく見慣れない構文が見つかったかもしれません。 const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await b
The Chrome DevTools Protocol allows for tools to instrument, inspect, debug and profile Chromium, Chrome and other Blink-based browsers. Many existing projects currently use the protocol. The Chrome DevTools uses this protocol and the team maintains its API. Instrumentation is divided into a number of domains (DOM, Debugger, Network etc.). Each domain defines a number of commands it supports and e
2018年6月2日、PhantomJSのリポジトリがついにアーカイブ化されました。PhantomJSのメインメンテナーは、「より高速かつ安定して動作するヘッドレスChromeが登場したことで、PhantomJSの開発を続ける必要がなくなった」と述べています。 PhantomJSは、TwitterやNetflixでも単体テストやパフォーマンステストで使用されていた、ヘッドレスブラウザのデファクトスタンダードでした。ヘッドレスブラウザとは、GUI（Graphical UserInterface）を必要としないブラウザです。 これまでPhantomJSを使ってきた人たちは、徐々にヘッドレスChromeに切り替え始めています。一方で、「切り替えにどのような作業が必要になるのか」や「いったい何が変わるのか」がわからないといった声を耳にすることもよくあります。 そこで本特集では、ヘッドレスChro
Github Actionsで簡単にPuppeteerを使えるaction-puppeteer-scriptを作りました - The Third Law
maku693です。 Github ActionsでPuppeteerを簡単に使えるCustom Actionを作りました。 github.com 最近Github Actions上でブラウザを動かしたくなったのですが、いちいち実行環境を整えるのも面倒なので、サクッとできないものかと調べたところ、意外とPuppeteerをそのまま使えるactionというのは存在しないようだったので、自分で作りました。 使い方はREADMEに書いてありますが、ここでも軽く紹介します。 以下のjobでは、ページのタイトルを取ってきて、それを後続のstepで利用しています。 - id: get-title uses: maku693/action-puppeteer-script@v0 with: script: | const page = await browser.newPage(); await pag
Automate an isolated browser instance with just a few lines of code
Automate an isolated browser instance with just a few lines of code11/16/2022 If you’ve ever created a website that shows any kind of analytics, you’ve probably also thought about adding a “Save Image” or “Save as PDF” button to store and share results. This isn’t as easy as it seems (I can attest to this firsthand) and it’s not long before you go down a rabbit hole of trying 10 different librarie
ブラウザ拡張のE2Eテストを検討してみた（Playwright、Puppeteer、Cypress） - Techtouch Developers Blog
この記事はテックタッチアドベントカレンダー 8 日目の記事です。 フロントエンドエンジニアの taka です。Amazon Black Friday でフットウォーマーを買ったのですが、冷え性の自分には最高でした。冷え性の方には是非使ってみてもらいたいです。 今回は、モダンなツールである Playwright と Puppeteer、Cypress を実際に触ってみたので、そこから得られた知見を紹介したいと思います。 要件の整理 一般的な要件 テックタッチ特有の要件 機能ごとの比較 テストツールの有無 複数タブ / ウィンドウ ShadowDOM ブラウザ拡張 要素の特定 スクリーンショット 動画 実行速度 まとめ 要件の整理 テックタッチはブラウザ拡張であるため、一般的な Web アプリケーションとは少し要件が異なってきます。以下に、一般的な要件とテックタッチ特有の要件を書き出しました。
web上の情報を抽出するスクレイピング技術ですが、いままでphantomJSで行っていましたが、chromeがヘッドレスブラウザに対応したとのことで、そのnodeライブラリであるpuppeteerで実践してみました。 環境構築 とりあえずお試しということで、dockerで構築しました。 構成はnode.jsのdockerイメージにpuppeteerを追加するかたちです。 下記2サイトの手順を大幅に参考にさせていただきました。 Docker コンテナ上で Puppeteer を動かす Puppeteer をDockerコンテナで利用する ディレクトリ構成はこんな感じ。 / ├ app/ │ └ script/ │ └ app.js │ └ data/ ├ docker-compose.yml ├ Dockerfile └ Package.json FROM node:9.2.0 RUN a
GitHub - microsoft/playwright-cli: CLI for common Playwright actions. Record and generate Playwright code, inspect selectors and take screenshots.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
puppeteer https://github.com/GoogleChrome/puppeteer/releases puppeteerを触ってみて自分がよく使う書き方を載せたら これから始めてみようかなって人に需要あるんじゃないかと書いてみます Basic認証突破 const USERNAME = 'user'; const PASSWORD = 'passwd'; await page1.setExtraHTTPHeaders({ Authorization: `Basic ${new Buffer(`${USERNAME}:${PASSWORD}`).toString('base64')}` });
Puppeteer, Selenium, Playwright, Cypress - how to choose? - AI-driven E2E automation with code-like flexibility for your most resilient tests
Puppeteer, Selenium, Playwright, Cypress – how to choose? At Testim, a lot of what we do is build AI-based features on top of automation frameworks to add stability,… At Testim, a lot of what we do is build AI-based features on top of automation frameworks to add stability, accelerate test creation, and improve root-cause analysis. We evaluate a number of test automation frameworks to understand
Add puppeteer-screenshot by styfle · Pull Request #207 · vercel/now-examples
This repository has been archived by the owner. It is now read-only.
Puppeteer入門 スクレイピング+Web操作自動処理プログラミング - 秀和システム あなたの学びをサポート！
Puppeteerは、Node.jsで動く最新のWebブラウザ自動化ライブラリで、データ収集やWeb開発、動作テストの効率化などに使われます。Google製のライブラリなので、Chromeとの相性は抜群です。本書は、Puppeteerの実行環境の構築から、スクレイピングとWeb操作の自動化を実現するプログラミング、デバッグまでを解説した入門書です。Node.jsとJavaScriptの入門書としても使えます。鶴田謙二さんによる素敵なイラストが目印です！ 【サポートはこちら】→https://www.shuwasystem.co.jp/support/7980html/5520.html 第1部 準備編 第1章 Puppeteerの基礎 1-1 ブラウザ自動化のライブラリ Puppeteer 1-2 JavaScriptと組み合わせ可能 Puppeteerでできること、できないこと 1-3
Puppeteerでできることまとめ
GMOアドマーケティングのy.a.です。 PuppeteerはHeadless Chrome使うのを便利にするNode ライブラリです。 https://developers.google.com/web/tools/puppeteer/ （引用元：Puppeteer | Tools for Web Developer https://developers.google.com/web/tools/puppeteer/） ですのでスクレイピングなり、なにかWebページのテストを自動化したい場合に、比較的手軽に色々できます。 そこでPuppeteerに興味を持った方へ、なるべく簡潔にPuppeteerで出来ることをいくつか紹介したいと思います。 ※なお実行環境にNode.jsがインストールされていることが前提です。 インストール
Cloud Functions with Puppeteer + Google Apps Script でスクレイピングサーバーをサクッと作る - Qiita
const puppeteer = require('puppeteer'); let page; async function getBrowserPage() { // Launch headless Chrome. Turn off sandbox so Chrome can run under root. const browser = await puppeteer.launch({ args: ['--no-sandbox'] }); return browser.newPage(); } exports.getTrends = async (req, res) => { if (!page) { page = await getBrowserPage(); } await page.goto('https://qiita.com'); const result = await
Metabaseのグラフをslackへ通知するbotをServerless Framework + Puppeteerで作ってみた - カミナシ エンジニアブログ
こんにちは。株式会社KAMINASHIでPMをやっている@gtongy1です。 みなさんはMetabaseをご存知ですか？ 見た目の良さによる直感的なダッシュボードの構築、クエリ記述時の補完機能、グラフの種類数の豊富さ、ツール自体は無料で使える等便利なBIダッシュボードツールです。 カミナシでもMetabaseをフルに活用して、日々分析時に利用しています。 そんなMetabaseですが唯一欠点があって、それはslackとの連携が難しい所です。 slackへ通知を行う時にグラフで表現できるのはまだ棒グラフだけとか、マルチバイトの文字列は文字化けしてしまうとか、実運用に回す時にはちょっと辛いなと感じるところがあります。 そこで、今回Metabaseのグラフをslackへ通知するbotをServerless Framework + Puppeteerで作ってみました。 最終的に以下のようにsla
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Puppeteer で静的サイトの Font Subsetting | blog.jxck.io
Cypress vs Selenium vs Playwright vs Puppeteer: Speed
2020年: PuppeteerとPlaywrightの激動の１年。 - Qiita
Web アクセシビリティの検証ツール acot を作ってる - wadackel.me
Selenium と Playwright の両方を使ってみた感想 - 新しいことにはウェルカム
puppeteerでフロントエンドISUCONのためのパフォーマンス計測ツールを作りたい - Qiita
PuppeteerでヘッドレスChromeを操ってみる - Qiita
フロントエンド・テストツール比較 Puppeteer #01環境構築編 - Qiita
Puppeteer | Puppeteer
SEOに役立つ、Googlebotのレンダリングを検証する4つの方法
第2章 ブラウザ操作自動化の基本 ～非同期処理を扱うasync/await関数、自動化の鍵を握るPuppeteerコンポーネント | gihyo.jp
Chrome DevTools Protocol
第1章 Puppeteerの魅力は何か ～ヘッドレスChromeを自由自在に操る | gihyo.jp
puppeteerでスクレイピング - Qiita
puppeteerでよく使うであろう処理の書き方 - Qiita