FirebaseのCloud Functionでpuppeteerを動かす解説 - Kesinの知見置き場
先日、GAEとCloud Functionsでpuppeteerを動かすコードを紹介しているエントリが公開されました。 cloud.google.com puppeteer、というかChromeを動かすためには実は様々な依存ライブラリをインストールする必要があるのですが、Cloud Functionでは環境そのもののカスタマイズはできなかったので今まではpuppeteerを動かすことはできませんでした。 GAEとCloud Functionでnodejs 8が使えるようになったのと同時に、実行環境のベースのイメージが新しくなった（Ubuntu 18.04とのこと）のでpuppeteerが使えるようになったようです。 ちょっと試してみる分には、先程の記事のソースコードがgithubにアップされているので自分のGCPのプロジェクトにデプロイすることで動くことが確認できると思います。 ただFir
Puppetaria: accessibility-first Puppeteer scripts | Blog | Chrome for Developers
Puppeteer and its approach to selectors Puppeteer is a browser automation library for Node: it lets you control a browser using a simple and modern JavaScript API. The most prominent browser task is, of course, browsing web pages. Automating this task essentially amounts to automating interactions with the webpage. In Puppeteer, this is achieved by querying for DOM elements using string-based sele
Firebase FunctionsとPuppeteerでスクレイピングの定期実行するのを作ってみた
作ったものフロント側は全く作ってないんですが、私が住んでいるバンクーバーのFront End Developerの平均給与をいくつかのサイトからスクレイピングしてFirebaseのデータベースへ格納するといったとてもシンプルなものを作りました。日本ではどれぐらいあるのかわからないんですが、こっちだとポジションの平均給与がユーザーからの自己申請で出てます。調べてて思ったんですが、サイトによってすごくばらつきがありました。 後々フロント側を作って公開しようと思います🚀 Firebase FunctionsFirebase Functionsっていつも個人的には読んでるんですが、正式にはCloud Functions for Firebaseです。Google Cloud Platformのサービスの一つCloud FunctionsをFirebaseと連携させる感じですね。基本的にはFire
Puppeteer と Coverage の話
アドカレの 1 日目も Puppeteer の話を書いてたのだけど、別にその続きとかではまったくなくて、少し前に Puppeteer のカバレッジ関連でドハマリしたのでそれを書こうと思う。 背景他のところで散々書いてきているので、軽く触れる程度にしておくが、 https://github.com/reg-viz/storycap というツールの開発・メンテをしている。Puppeteer で Storybook をクローリングして各 Story を PNG 画像にする、ただそれだけの CLI だ。 このツールは画像ベースの回帰テストを自動化する目的で作られていて、日々の業務でも reg-suit や reg-cli などのツールと組み合わせて使っており、僕自身も前職の頃から世話になっている CLI だ。 自動テストの一環として Storycap を使っている関係上、Storybook をコン
puppeteerでの要素の取得方法 - Qiita
page.evaluate + (querySelector|querySelectorALL) page.$ page.$$ page.$eval page.$$eval とありますが、実際にそれらを使うためにどう書くかをまとめています。速度等は検証できていませんが、evalを使うのがそれぞれコードがシンプルになるので良いかと思います。 APIの動作の詳細はpuppeteerのAPIを参照ください。 https://pptr.dev/api/ #前提 以下のようなliの中にアンカータグが入っているページを取得することを想定しています。 <ul> <li><a href="some link">some HTML</a></li> <li><a href="some link">some HTML</a></li> <li><a href="some link">some HTML</a>
cloud functions × puppeteer × Google Apps Scriptで超低コスト定期実行クローラを作って金曜ロードショーを毎週slackに通知させる - FFFT
cloud functions × puppeteer × Google Apps Scriptで定期実行されるクローラを作ってみます。 今回は毎週月曜に今週の金曜ロードショーをslackで通知させるようにしてみます。 cloud functionsはGCPで利用できるAWSのlumbdaのようなもので、サーバーやランタイム環境を管理することなく、簡単に単一目的のスタンドアロン関数を作成することができます。 実務でも使っていますが、サーバレスでのAPI提供がcloud functionsならすぐに、且つ、簡単にできるのでオススメです。 そのcloud functionsですが8月にpuppeteerのサポートが行われました。 cloud.google.com puppeteerはheadless chromeを操作するchrome公式のnodeライブラリです。 github.com クロー
Metabaseのグラフをslackへ通知するbotをServerless Framework + Puppeteerで作ってみた - カミナシ エンジニアブログ
こんにちは。株式会社KAMINASHIでPMをやっている@gtongy1です。 みなさんはMetabaseをご存知ですか？ 見た目の良さによる直感的なダッシュボードの構築、クエリ記述時の補完機能、グラフの種類数の豊富さ、ツール自体は無料で使える等便利なBIダッシュボードツールです。 カミナシでもMetabaseをフルに活用して、日々分析時に利用しています。 そんなMetabaseですが唯一欠点があって、それはslackとの連携が難しい所です。 slackへ通知を行う時にグラフで表現できるのはまだ棒グラフだけとか、マルチバイトの文字列は文字化けしてしまうとか、実運用に回す時にはちょっと辛いなと感じるところがあります。 そこで、今回Metabaseのグラフをslackへ通知するbotをServerless Framework + Puppeteerで作ってみました。 最終的に以下のようにsla
Playwrightも知らないで開発してる君たちへ - Qiita
重要なのはここで、 pw.webkit.launch() とするか pw.chromium.launch() とするかで 起動するブラウザが変わるだけです。 デバイスの設定も簡単 pw.devices に主な端末のviewport, UAの情報がまとめられています。 デバイスのリスト： https://github.com/microsoft/playwright/blob/master/src/deviceDescriptors.ts const pw = require('playwright'); // iPhone11のデバイス情報を取得 const iPhone11 = pw.devices['iPhone 11 Pro']; (async () => { const browser = await pw.webkit.launch(); const context = awai
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などのデザインリソースを実装します。 その後
Web開発を補助する目的でPuppeteerを使う - BASEプロダクトチームブログ
この記事はBASE Advent Calendar 2020の22日目の記事です devblog.thebase.in どうもこんにちは、Web Frontend Groupの青木です 今回は、個人的にWeb開発を補助する目的でPuppeteerを使っていることがあるので、その話をします 前半では、普段どう使っているのか 後半では、ブラウザ操作を記録してコード生成してくれるRecoderについて紹介します そもそも、Puppeteerって? 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 t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Taking a screenshot with puppeteer and storing it in google cloud storage
GitHub - krasimir/miss-piggy: Test runner for Puppeteer
Cypress vs Selenium vs Playwright vs Puppeteer: Speed
CSS selectors - CSS: Cascading Style Sheets | MDN
puppeteerで既存セッションを使って自動ログイン